Question

Have any one tried to activate fancybox thumbnail gallery using a button or an anchor click, Currently one can use fancybox by clicking on the image which takes you to the popup image gallery, In my condition i want a simple button or an html anchor , so that when a user click on the button or anchor the modal popup gallery should be displayed. Also my images will be coming from db , Any ideas how to do this ???

缩略语

$( .fancybox-thumbs ).fancybox({
            prevEffect:  none ,
            nextEffect:  none ,

            closeBtn: false,
            arrows: false,
            nextClick: true,

            helpers: {
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });

最新工作说明:

 $( a.gallery ).click(function () {
        $( .fancybox-thumb ).click();
    });

Answer 1

我正想到这一点(因为你先前曾问过这个问题),也许你可以尝试模拟第一组分级的点击。

$( #gallery ).click(function(){
      $( .fancybox-thumbs:first ).click();
});

让我知道

Answer 2

你可以这样做: 界定具有特性和图像的阵列

var galPhotos = [{
        href :  ../img/galeria/fondo1.jpg , nextEffect  :  none ,   prevEffect    :  none , closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href :  ../img/galeria/fondo2.jpg , nextEffect  :  none ,   prevEffect    :  none , closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href :  ../img/galeria/fondo3.jpg , nextEffect  :  none ,   prevEffect    :  none , closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href :  ../img/galeria/fondo4.jpg , nextEffect  :  none ,   prevEffect    :  none , closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } }];

之后,只是

$( a#gallery ).live( click ,function(){
     $.fancybox(galPhotos);
});

自行检查,但地雷是(和工作罚款):

var galPhotos = [
                    {href :  ../img/galeria/fondo1.jpg , nextEffect  :  fade ,    prevEffect     :  fade }, 
                    {href :  ../img/galeria/fondo2.jpg , nextEffect  :  fade ,    prevEffect     :  fade },
                    {href :  ../img/galeria/fondo3.jpg , nextEffect  :  fade ,    prevEffect     :  fade }, 
                    {href :  ../img/galeria/fondo4.jpg , nextEffect  :  fade ,    prevEffect     :  fade },
                    {href :  ../img/galeria/fondo5.jpg , nextEffect  :  fade ,    prevEffect     :  fade },
                    {href :  ../img/galeria/fondo6.jpg , nextEffect  :  fade ,    prevEffect     :  fade } 
                ];

或简单模拟点击到那类

$( #gallery ).click(function(){
      $( .fancybox-thumbs:first ).click();
});

让我知道这怎么办。

Answer 3

或许这项工作:

<a class="fancybox-thumb" rel="fancybox-thumb" href="link_to_large_image.png" title="Image title">
<img src="link_to_small_image.png" alt="" />
</a>

Answer 4

新参观者

$( [data-fancybox="gallery"] ).fancybox({
    thumbs : {
      autoStart: true,
      axis:  x 
    }
  });

友情链接