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
Related
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?
I added the thumbnail class to my thumbnails div, which had the intended effect. However, some of the thumbnails were smaller in size than the others. I wanted them to have the same height so I gave each thumbnail a height of 210px, thinking that would now appear the same all aligned horizontally in a line. However, setting the height had the strange effect of making the smaller thumbnails jut out of the alignment by extending below. I tried solving this by setting the css property of top: 0px; on each thumbnail, but that did not make any difference. How can I get all my thumbnails to be the same height AND be perfectly aligned horizontally?
The problem was eventually solved by adding style element overflow: hidden; to the thumbnail class.
If you are using bootstrap, did you try putting each image in its own div class for columns? If you are at all thinking of responsive design (which is why one typically uses bootstrap) this might help you get them to align extremely quickly and easily.
http://getbootstrap.com/2.3.2/scaffolding.html, take a look at the live fluid grid part.
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
My client is asking for a slider plugin for wordpress those will be placed at the header of the page. It will have multiple images fading one after another with next and previous button. But the problem is he does not want exactly responsive slider . He wants some like this link http://go-vacation.com/ . Please look at the slider of the top. Try to resize the browser width and height. The main theme is when someone resize the browser window the image is hiding behind the screen. and no scroll bar is coming. Scroll bar will come only when the screen is resized to less than 960 pixel. Image size of the sliders will be 1600*600 px.So suppose the screen is now at 1000px then you will be able to see only 1000px portion of the image the rest will be hidden from both side of the screen. Please observe the behavior of http://go-vacation.com/
I am not actually the logic behind this so that I can start with CSS and js. What will be main theme to start for this. Do you have anything in your collection? If it is normal jquery slider then also no problem . I will convert it to wordpress plugin. Or any help with simple example of the main logic is appreciable.
The best WP slider I know (which is also responsive) is FlexSlider. But you can use any slider you want. Just set your slider container min-width and width: 100% (if it's not set by slider itself).
I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.