How to display png images in browser with resizing and scrollbar - javascript

We're designing an application that processes images and highlights certain parts by parsing co-ordinates. However, images being larger in size can't be displayed in single go. Also image can not be scrolled vertically as I've applied no formatting as of now, only horizontal scroll works.
Now the requirement is to display the full image with scrolls enabled. Also, the image size vertically and horizontally should be resized when the boxes on the top and side are expanded and collapsed.
E.g. This is how the page initially loads with the sidebar:
Now, we can resize it when the need for sidebar ends as highlighted so as to get the entire view to image after collapsing the bar in the image after this:
Of course the top and side bar can be floating over the image or when the bars are expanded the image needs to be resized so as to not conceal any of its details.
We're developing this application in dot net MVC and image is displayed on the view. I'm not able to understand what would be the simplest approach to achieve this without using complex jQuery functions? And if there's no alternative to using jQuery then what other technologies in accordance to jQuery will be needed to achieve this? Is it also possible to achieve with simply HTML and CSS?

Related

Thumbnail fix in Blueimp Image Gallery

I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature

Center box grid horizontally and vertically with stamp in the middle

The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."

Fullscreen background slideshow with custom image positions (per slide)

I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.
I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.
The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).
At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.
Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)
Thanks guys!
You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.
Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops, like:
Animated Content Menu
Fullscreen Image Blur
Responsive 3D Panel Layout

jQuery responsive banner auto resize images and content to fit space

I want to create custom banner or download one.
The banner has following requirement,
I could add images and text in this banner.
On each slide you can add multiple images and text, for an example slide one has two images and text on sides, then slide two has three images and text on the sides.
IMPORTANT – if the images are small thumbnails the text should fill the blank areas or around the image. The banner should be responsive to the element inside (could be an div). If the image is big the text should go underneath the
image or on the side.
slides left or right
left and right navigation button, as well pagination
Example: http://www.bbc.co.uk - main banner at the top
I had a look on the internet i tried the following:
flexslider - very good, meet all the requirements apart from point 3. but dont know how to make it responsive.
orbit slider - good but flexslider it easier to style.
Note: this banner will not be used on mobile device.
Seems like you didn't get any answers because there's no such thing as a perfect finished solution. It's not difficult to change any of the mentioned sliders and make them responsive IF you know some css. I'd suggest that, depending on how many of these works you want to do, you give it a try. You can find good free tutorials online.
I found this one plugin though, worth a try: http://marktyrrell.com/labs/blueberry/
And some more: http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins

Dynamic number of thumbs according to available area in a webpage

I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!

Categories