We Keep Coding

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

jQuery not detecting window size correctly

so I have a set of images that on a big screen are not using the image slider. And when the screen goes below a certain width, the image slider is initiated.
At the moment, when I resize the window manually and play around dragging the size around it works well.
But, if I resize the window to a small size and hit F5 then what should happen is that the page automatically recognises that it needs to initiate the image slider. What does happen is that the images load like this below and not an interactive image slider.
So the problem is that if the page is already under 939 then the bxSlider functionality doesn't work. It will put the images into a bullet-pointed list as below without actually adding the interactivity. It will also not deactivate the bxSlider when the screen is resized to above 939.

It sounds like you're using the resize event to trigger your code. The reason that doesn't work when you refresh at a small size is that after the page loads, you don't resize it again, so the resize event doesn't fire.
Resizing only triggers when you manually grow/shrink the browser, without refreshing the page.
To fix it, just trigger your current function on first page load (I can't see the code here, but presumably it checks the current browser dimensions and updates the page accordingly? If so, entirely safe and sensible to run at the start of page load).

try changing this
$(window).resize(checkWidth);
to
$window.on('resize', function() {
checkWidth();
});

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

Auto hiding behind the screen image slider for WordPress

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).

How can I combine an image slider with scaling images?

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.