StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Thanks to junkystu, this is the code I used. Note the settimeout which aids the transition (so you dont see the new image leaving the gallery). The figure 95 is based on the animate speed of 100 and is via eye adjustment only. I also added a reverse animation if the user clicked previous image.</p> <p>I also have thumbnails the user can click on which does not perform any animation. Hence, the <code>if next else if prev</code> is skipped when <code>direction == "none"</code></p> <h2>Old code - don't use this.</h2> <pre><code>if (direction == "next") image.animate({ 'left': '-1000' }, 100, function () { image.css({ 'left': '1000px' }); }); else if (direction == "prev") image.animate({ 'left': '1000' }, 100, function () { image.css({ 'left': '-1000px' }); }); setTimeout(function() { image.attr('src', largerImage); }, 95); if (direction == "next") image.animate({ 'left': '0' }, 100); else if (direction == "prev") image.animate({ 'left': '0' }, 100); </code></pre> <p>Another tip is have the <code>img</code> tag inside a <code>div</code> where <code>overflow: hidden;</code></p> <h2>New Code!</h2> <p>Here are my document.ready control event hookups</p> <pre><code>$(document).on("click", ".gallery-thumbnail", function (e) { var gallery = $(this).closest('.gallery'); GallerySetFeature(gallery, $(this).attr("data-gallery-id"), "none"); }); $(document).on("click", ".gallery-prev", function (e) { GalleryNextPrev(this, e); }); $(document).on("click", ".gallery-next", function (e) { GalleryNextPrev(this, e); }); //-- only showing the next/prev controls on hover. $(document).on("mouseenter", ".gallery-feature", function (e) { $(this).find('.gallery-next').removeClass('invisible'); $(this).find('.gallery-prev').removeClass('invisible'); }); $(document).on("mouseleave", ".id-gallery-feature", function (e) { $(this).find('.gallery-next').addClass('invisible'); $(this).find('.gallery-prev').addClass('invisible'); }); </code></pre> <p>Here is my function for when the next/prev control is clicked. This handles doing the reverse animation when exceeding direction before first image or after last image.</p> <pre><code>function GalleryNextPrev(control, e) { var gallery = $(control).closest('.gallery'); var ubound = parseInt(gallery.attr('data-gallery-ubound')); var current = parseInt(gallery.attr('data-gallery-currentid')); var directionIsNext = $(control).hasClass('gallery-next'); var newIndex = (directionIsNext ? current + 1 : current - 1); if (newIndex > ubound) { newIndex = 0; directionIsNext = false; } else if (newIndex < 0) { newIndex = ubound; directionIsNext = true; } GallerySetFeature(gallery, newIndex, (directionIsNext ? "next" : "prev")); } </code></pre> <p>Here is my function that does the animation. Note the imagesLoaded function (get <a href="http://desandro.github.io/imagesloaded/" rel="nofollow">http://desandro.github.io/imagesloaded/</a>)! Oh, plus I add an ajax spinner on top of the image if it does not load in a certain time.</p> <pre><code>var ajaxSpinnerId; function GallerySetFeature(gallery, thumbIndex, direction) { thumbIndex = parseInt(thumbIndex); gallery.attr('data-gallery-currentid', thumbIndex); var thumbnail = gallery.find('[data-gallery-id=' + thumbIndex + ']'); var thumbnailImg = thumbnail.find('img'); var largerImage = thumbnail.attr('data-gallery-larger'); var downloadLink = thumbnail.attr('data-gallery-download'); var thumbTitle = thumbnail.attr('data-gallery-title'); var feature = $(gallery).find('.gallery-feature'); var feature_img = $(gallery).find('.gallery-feature img'); if (direction == "next") feature_img.animate({ 'left': '-1000' }, 100, function() { feature_img.css({ 'left': '1000px' }); }); else if (direction == "prev") feature_img.animate({ 'left': '1000' }, 100, function() { feature_img.css({ 'left': '-1000px' }); }); feature_img.attr('src', largerImage); feature_img.attr('width', feature_img.width); feature_img.attr('height', feature_img.height); //-- IsUndefined is my function, but you know what it is anyway. Just checking Is Undefined! if (IsUndefined(ajaxSpinnerId)) { ajaxSpinnerId = setTimeout(function() { //-- ajax spinner start feature.addClass("gallery-ajax"); }, 150); } imagesLoaded(feature_img, function() { //-- ajax spinner end clearTimeout(ajaxSpinnerId); ajaxSpinnerId = undefined; feature.removeClass("gallery-ajax"); if (direction == "next") feature_img.animate({ 'left': '0' }, 100); else if (direction == "prev") feature_img.animate({ 'left': '0' }, 100); }); //-- Just setting labels like title, image size and download link all storted client side as attributes. $(gallery).find('.gallery-download').attr('href', downloadLink); $(gallery).find('.gallery-title').text(thumbTitle); $(gallery).find('.gallery-position').text(thumbIndex + 1); //-- because I have little thumbnails the user can directly click on. I put a color border around the thumbnail to indicate the current showing. This works for prev/next image link too. gallery.find('.gallery-thumbnail-img-selected').removeClass('gallery-thumbnail-img-selected').addClass('gallery-thumbnail-img'); thumbnailImg.addClass('gallery-thumbnail-img-selected').removeClass('gallery-thumbnail-img'); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload