代码之家 › 专栏 › 技术社区 › sissy

带缩略图的jQuery fancybox

elevatezoom fancybox magento jquery javascript

sissy · 技术社区 · 7 年前

我正在使用Magento 1.9.2.4附带的fancybox(2.15)和ElevateToom(3.0.8)来缩放主图像,并与画廊的其他图像一起创建fancybox画廊。单击主图像时,Fancybox会打开。

我需要的是在fancybox打开时使用thumbnail助手导航缩略图,但问题是我无法以最简单和建议的方式初始化它,例如

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

我使用的方式对fancybox的外观没有影响。

这是我正在使用的代码

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;
            });

        });

哪里 .gallery-image.visible 是主图像和 .thumb-link 是我的Html中的缩略图。

下面是其他类似的问题 using fancybox set height and width

但实际上,我在fancybox上没有看到明显的效果。

在有效调用fancybox配置之前,是否有其他方法重新初始化fancybox配置?

编辑: 实际上,我是这样修改代码的:

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

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

我可以看到一些效果,但没有拇指的痕迹。。。。我包括并可以看到fancybox缩略图助手的适当库。

2 回复 | 直到 7 年前

Janis 7 年前

我认为这段代码没有任何作用,我在这里没有看到任何选择器或对象集合:

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

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

我认为你应该更换 $.fancybox(ez); 具有 $.fancybox.open(ez, {config});

sissy 7 年前

事实上,我发现使用fiddle中使用的库,而不是我在服务器中加载的库,可以使脚本兼容并且工作正常。因此,它是这样工作的:

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

和 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>