Magento Question posted in
The official documentation can be found here.

jQuery fancybox with thumbnail – Magento

I’m using fancybox (2.15) and elevatezoom (3.0.8) that come with Magento 1.9.2.4, to zoom the main image and create a fancybox gallery with the other images of the gallery. Fancybox is opened when clicking on the main image.

What i need, is to use the thumbnail helper to navigate the thumbnails while the fancybox is open, but the problem is that I’m not able to initialize it in the easiest and suggested way, like

$(selector).fancybox({config});

and the way i’m using has no effect on the fancybox appearance.

This is the code i’m using

js

$(document).ready(function() {
            if($('.thumb-link').size() == 0){
                var ez = $('.gallery-image.visible').first().data('zoom-image');
            }else{
                var ez =  $(".thumb-link");
            }

            $.fancybox({
                'width':400,
                'height': 500,

                helpers : {
                    title   : {
                        type: 'outside'
                    },
                     thumbs : {
                       width    : 50,
                       height   : 50
                    }
                }
            });

            $(".gallery-image.visible").bind("click", function(e) {  
                $.fancybox(ez);
                return false;
            });

        });

where .gallery-image.visible is the main image and the .thumb-link are the thumbnails in my Html.

Following other questions like this one using fancybox set height and width

but I actually get not visible effect on the fancybox.

Is there a different way to re-initialize fancybox configurations before calling it effectively?

EDIT:
Actually I changed my code in this way:

var fancyConfig =  {'width' : 200, 'height': 300,...};

            $(".gallery-image.visible").bind("click", function(e) {  
                $.fancybox(ez, fancyConfig);
                return false;
            });

and I can see some effects but no trace of thumbs….I included and can see the proper libraries for fancybox thumbnails helper.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Actually I found out that using the libraries used in the fiddle and not the ones I was loading in my server, makes the scripts compatible and it works. So in this way it works:

    var fancyConfig =  {
            helpers : {
                thumbs  : {
                    width   : 50,
                    height  : 50
                }
            }
        };
        $(".gallery-image").click(function(e) {  
            $.fancybox(ez, fancyConfig);
            return false;
        });

    and the fiddle

    $(document).ready(function() {
      if($('.thumb-link').size() == 0){
          var ez = $('.gallery-image.visible').first().data('zoom-image');
      }else{
          var ez =  $(".thumb-link");
      }

      var fancyConfig =  {
              'speedIn' : 1000,
              'speedOut' : 1000,
              helpers : {
                  title   : {
                      type: 'outside'
                  },
                  thumbs  : {
                      width   : 50,
                      height  : 50
                  }
              }
          };
      $(".gallery-image.visible").bind("click", function(e) {  
          $.fancybox(ez, fancyConfig);
          return false;
      });

  });
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-image-thumbs li:first-child {
    margin-left: -1px;
}
.product-image-thumbs li{
    display: inline-block;
    margin-right: 2%;
}
.product-image-thumbs a {
    display: inline-block;
    border: 1px solid #cccccc;
    overflow: hidden;
}
.product-image-thumbs a img{
  width: 122px;
  height: 122px;
  overflow: hidden;
}

.product-image-gallery .gallery-image {
    display: none;
}
.product-image-gallery .gallery-image.visible {
    display: block;
}

.product-img-box .product-image img {
    max-width: 100%;
    max-height: 750px;
    width: 500px;
    max-width: 500px;
    margin: 0px auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>

<div class="product-img-box">
  <div class="product-image product-image-zoom zoom-available">
      <div class="product-image-gallery">
          <img id="image-main"
               class="gallery-image visible"
               src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg"
               alt="custom-alt"
               title="img-title" 
                data-zoom-image="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />

              <img id="image-main"
                   class="gallery-image"
               src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
              <img id="image-0"
                   class="gallery-image"
                   src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" />
               <img id="image-1"
                   class="gallery-image"
                   src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" />
              <img id="image-2"
                   class="gallery-image" src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />

      </div>
  </div>
</div>


<div class="more-views">
   <ul class="product-image-thumbs">
        <li>
            <a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="2" href="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg">
                <img src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" alt="custom-alt" />
            </a>
            <a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="0" href="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg">
                <img src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" alt="custom-alt" />
            </a>
            <a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="1" href="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=g">
                <img src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" alt="custom-alt" />
            </a>
        </li>
    </ul>
</div>


  2. 0

    I think that this piece of code does not do anything, I do not see any selector or collection of objects here:

    $.fancybox({
  'width':400,
  'height': 500,

  helpers : {
    title   : {
      type: 'outside'
    },
    thumbs : {
      width    : 50,
      height   : 50
    }
  }
});

    I think you should replace $.fancybox(ez); with $.fancybox.open(ez, {config});

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search