I've been following this tutorial and have successfully implemented it in a site I'm working on, but have an untidy issue in Chrome.
http://tympanus.net/Tutorials/ResponsiveImageGallery/
It uses .empty() and .append() to remove the old image and change to the next, which isn't too bad in safari and Firefox (and not too bad in the tutorial demo, as the issue isn't that noticeable) but in Chrome, when the container is emptied and before the new image loads the parent container collapses, so everything on the page jumps about.
The code:
_showImage = function( $item ) {
// shows the large image that is associated to the $item
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );
}
anim = false;
}).attr( 'src', largesrc );125
is there a better way to swap images?
Or a better responsive image gallery?
I have a site to build that shows the largest possible image for the browser space available and responsive design is the only way to go, but finding a good gallery that isn't fixed height and width and is adaptable to be WordPressed is proving hard.
1 answer
point
If you are seeing the problem, then a fix would probably be to set the height of the element to be the height of the new image (or even animate it if you want to be fancy) just before you empty it. This will prevent the flicker you might be seeing. You could also just swap out the src on the old element without removing it, but if there is more content than just the image that probably won't work.
As far as alternatives, I'm not sure I know of any that are responsive. That said, Chrome should be fast enough to handle this without the flicker and it surprises me to hear that it is chugging enough to show the effect. What other code is running at the same time in the background and how large are the images?
- here's a dev site: http://jk.boldfishdev.com/hq-ja/?projects=costa-project
- Maybe my computer is too fast, but I honestly don't see any flicker on your dev site. There's no fancy transition, but no flicker either.
- in Chrome? Firefox and Safari don't jump up and down at all, but Chrome is ugly - maybe I have a broken Chrome!
- Ah. I disabled all my extensions - it's now performing as Safari and Firefox. - slight jump as the height changes, but not a complete close and re-open. Now to find out which extension and why!
- It's Ad Block for chrome - which is a PITA, but at least I know it's not the site code...
- Glad to hear you got it solved :) But that's interesting that it is causing such a delay. If you can isolate a case, you could probably report to them as a bug since it shouldn't be causing that much of a slow on your browser time.
