View Full Version : Single Responsive Photo Gallery plus Slideshow

06-25-2013, 03:02 PM
Single Responsive Photo Gallery plus Slideshow (http://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html)

http://www.javascriptbank.com/javascript/project/Single_Responsive_Photo_Gallery_plus_Slideshow/Single%20Responsive%20Photo%20Gallery%20plus%20Slideshow.jpg (http://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html)

srpgs is a simple jQuery plugin to create a responsive photo gallery plus slideshow with a set of data. It's very easy to setup and use, customize or develop. Check out demo (http://www.javascriptbank.com/project/srpgs/) or download (http://www.javascriptbank.com/project/srpgs/srpgs.zip) now.

06-25-2013, 03:49 PM
Looks nice. In Opera, if I pause the slideshow, advance the scroller, and click on individual items. The transition is odd. It first transitions to some other image, smoothly. I think that's actually the previous image that was showing, not sure. Then abruptly the image I clicked on appears.

I don't have time right now to troubleshoot this in Opera or check if this happens in other browsers. Perhaps later.

06-25-2013, 03:55 PM
In Firefox the images load abruptly and then reloads with a different size of the image.....

Also there was a image of a tree that was sideways that kept loading every other image or so for a while then that stopped and the rest of the images loaded without that one being in the mix

06-26-2013, 02:19 PM
thank jscheuer1 & ajfmrf, for online demo, perhaps I set the value of srpgs_slideshowSpeed too low, it's not long enough to load high resolution pictures

I just change this value to 15s, and rearrange some code, hope it's fine now

06-26-2013, 03:04 PM
Nope still doing it. I think you might need to preload the next image before showing it, in the meantime (by using the next image's load event* to determine when to start to transition it in), continue to show the current image and superimpose a centered loading image over it. Preloading of the next image in auto mode could begin as soon as the previous image has loaded. There could also be other problems. But once the images are cached, things seem to work more smoothly.

If you are only testing this locally, that's not a good test. Images on your hard drive will load much faster. And to get a good idea of how this will look to the first time visitor, you need to clear your cache before viewing it.

As a side note, although we do allow some leeway, generally this is not the section of the forum where you should present a script that's not really working right. That would be the javascript section:


where you can ask for help in fixing problems with a script.

If this isn't resolved soon, I may be moving this thread to that section.

I also just noticed that, in automatic mode, when the scroller advances, the currently showing image's thumbnail is no longer visible. And it takes a while for the slideshow to change to the next image. The scroller shouldn't advance until the first thumbnail at the top of the new view in the scroller is being transitioned to. Or you could advance the scroller minus one, so that the currently showing image in the slideshow's thumbnail is still visible. Or this might just be a part of the original problem, perhaps the next image isn't cached yet, but it seems to happen even the second time around as well, when all the images would be cached.

I also notice that the larger images bleed through the inactive thumbnails. That's a matter of personal preference. But since sometimes there's some white space behind the thumbnails as well (half the edge of the larger image half white) when the larger image isn't wide enough, it looks tacky to me. I'd just have a black background behind the thumbnail slider. As, even when the larger image does cover the entire window, it's very hard to distinguish what the inactive thumbnails look like due to the bleed through.

*Depending upon how the slideshow works, that could be the load event of an img tag, or you could make a separate javascript new Image() for it to load it. If it's already cached, it will take no time to load. If not, you will know how long to wait before trying to transition it in.

06-26-2013, 03:15 PM
Still an issue with this using firefox.

The image that I click on has a brief second image that shows before the one I clicked on.Sometimes.

In other words ,some but not all images are not loading directly but a fraction of a second prior to loading a different image is showing.

It is hard to explain....