Issues adapting simple carousel gallery to page

[schwim]

Hi there everyone!

I’m modifying an ecommerce template to utilize this simple gallery script for the product images. I’m unable to get the script to work however. Clicks result in nothing. Here’s my attempted implementation: http://wheeltastic.com/shop/pro-comp/PXA5034-78573

The page makes the jquery inclusion at the top and I’ve included the two scripts needed below the images, as was done in the demo page.

Could someone steer me straight in what I’m doing wrong?

Thanks for your time!

[PaulOB]

Hi,

The script is looking for the main-image div and the thumbnails div to be siblings but you have nested them in extra divs.

If you change the html for that section to this then it will work.

<div class="product-main-img">
  <div class="main-image"> <img src="/images/cartitems/PXA5034-78573-1.jpg" alt="Placeholder" class="custom"> </div>
  <div class="thumbnails">
    <table class="padding">
      
        <td class="border"><a href="/images/cartitems/PXA5034-78573-1.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-1.jpg" alt="Thumbnails"></a></td>
        <td class="border"><a href="/images/cartitems/PXA5034-78573-2.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-2.jpg" alt="Thumbnails"></a></td>
        <td class="border"><a href="/images/cartitems/PXA5034-78573-3.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-3.jpg" alt="Thumbnails"></a></td>
      </tr>
      <tr>
        <td class="border"><a href="/images/cartitems/PXA5034-78573-4.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-4.jpg" alt="Thumbnails"></a></td>
        <td class="border"><a href="/images/cartitems/PXA5034-78573-5.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-5.jpg" alt="Thumbnails"></a></td>
        <td class="border"><a href="/images/cartitems/PXA5034-78573-6.jpg"><img width="100" src="/images/cartitems/PXA5034-78573-6.jpg" alt="Thumbnails"></a></td>
      </tr>
      <tr>
    </table>
  </div>
</div>
<script src="/includities/jquery.prodGal.js"></script>

You don’t seem to need the product wrapper anyway.

[schwim]

Hi there Paul and thanks so much for your help!

I made the necessary change and it worked fantastically, thank you!

My next issue is resulting from my attempt to combine a lightbox image script with the gallery script. I’ve got the lightbox integrated successfully but the issue is that although the the gallery script is updating the image name, it is failing to update the a href name as well. I have tried to include the alt and class into the a href that the image has, but it didn’t make a difference.

To explain better, on this page, clicking a thumbnail updates the display image. Clicking the display image will bring up a lightbox with the first image, no matter what display image has been selected via the thumbnails.

http://wheeltastic.com/shop/pro-comp/PXA5034-78573

Is there a way to update the simplegal function to update the a href iimage name as well as the image?

(function($){

  $.fn.extend({

    simpleGal: function (options) {

      var defaults = {
        mainImage: ".placeholder"
      };

      options = $.extend(defaults, options);

      return this.each(function () {

        var thumbnail = $(this).find("a"),
            mainImage = $(this).siblings().find(options.mainImage);

        thumbnail.on("click", function (e) {
          e.preventDefault();
          var galleryImage = $(this).attr("href");
          mainImage.attr("src", galleryImage);
        });

      });

    }

  });

})(jQuery);

[PaulOB]

Hi,

Add this line:

mainImage.closest('a').attr("href", galleryImage);

It goes at the end like this:

 * simpleGal -v0.0.1
 * A simple image gallery plugin.
 * https://github.com/steverydz/simpleGal
 * 
 * Made by Steve Rydz
 * Under MIT License
 */
(function($){

  $.fn.extend({

    simpleGal: function (options) {

      var defaults = {
        mainImage: ".placeholder"
      };

      options = $.extend(defaults, options);

      return this.each(function () {

        var thumbnail = $(this).find("a"),
            mainImage = $(this).siblings().find(options.mainImage);

        thumbnail.on("click", function (e) {
          e.preventDefault();
          var galleryImage = $(this).attr("href");
          mainImage.attr("src", galleryImage);
	      mainImage.closest('a').attr("href", galleryImage);
        });

      });

    }

  });

})(jQuery);

[schwim]

Thank you so much, Paul. It’s working like a champ!