Betterwithpesto

Question that I posted on the Squarespace answers board:

I'm working on a site, and they want to be able to hover over a product on a listing page and have it go to another thumbnail of the product.

Is there way just to do this with just javascript, without having to make a custom product.list?

I'm working on a squarespace site for someone, and they wanted a way for thumbnails to swap on an item when someone hovers of them like on here(This link will break in the near future):

Link to sample squarespace site

No one responded... so I figured out a really hacky way of solving this.

Here's the answer I posted on this thread:

Okay, So I have a solution for this incase yall were wondering. It's sort of tied to the Boutique theme. I'm sure there are better ways of doing this, but this works for now, and I hope some of you guys will post better solutions in the future.

The basic problem is, there's this squarespace.maincontent block on the product listing page that you don't have access to, and you don't want to make a custom one from scratch. Your botique site should have the following in the site.region file.

    <div id="contentWrapperSidebar" role="main">
        <section id="page">
            {squarespace.main-content}
        </section>
    </div>

Using JSONT, you have access to all of the products thumbnails, even on the listing page.
Place the following div underneath the div the main-content. Basically it digs through the JSONT and pulls out the 2nd thumbnail link for all the products on the page, and displays them in a div on your product page.

<div id="itemThumbnails">
  {.repeated section items}
    {.section items}
      {.section 1}
        <img src="{assetUrl}?format=300w">
      {.end}
    {.end}
  {.end}
</div>

Place this css in the global.less file, it hides the thumbnails that we just displayed.

#itemThumbnails{
  display: none;
}

The rest of this involves jQuery, so you have to include jQuery somewhere on your site. I put this between the tags on the top of the layout:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="scripts/jquery-2.0.0.min.js"><\/script>')</script>

In your site.region file, place this script... at the bottom of the file.

<script>
$(window).load(function(){
  var next_thumbs = [];
  var o_thumbs = [];
  $('#itemThumbnails img').each(function(i) {
    $(this).attr('id', i);
    var safe = $(this).attr('src')
    safe = safe.slice(0, 4) + 's' + safe.slice(4)
    next_thumbs.push(safe);
  });

  $('#productList').find('img').each(function(j) {
    $(this).attr('id', j);
    if(!(j > (next_thumbs.size - 1))){
      $(this).attr('next', next_thumbs[j]);
    }
    else{
      $(this).attr('next', '');
    }
    o_thumbs.push($(this).attr('src'));

  });

  var orig = '';
  var next = '';
  $('#productList .product-image img').hover(
    function(){
      orig = $(this).attr('src');
      next = $(this).attr('next');
      $(this).attr('src', next);
      $(this).attr('next', orig);

   }, function(){
      $(this).attr('src', orig);
      $(this).attr('next', next);
   });
});

</script>

It's kind of a hack, but what it does is it creates an attribute called next in each thumbnail on the page with the url of the next thumbail. On hover, it swaps these 2 attributes, and switches the thumbnails.

The important thing is: Every product on the page must have 2 thumbnails for this to work. If there's one product on the page that doesn't, it ruins the flow of this... and the rest of the thumbnails will be out of order. If anyone can think of a solution that doesn't break the order when there's a product with 1 thumbnail. That would be cool. Cheers.