javascript - Fancybox在同一页面上使用多个画廊

我当前设置了Fancybox来显示youtube视频或图库幻灯片。每一个都通过单击包含以下链接的播放按钮（html对象）来启动：

YouTube：

    <a class="youtube shadowborder" href="#youtubeDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>

gallery1：

    <a class="fancyboxLauncher shadowborder" href="#SSGalleryDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>

gallery2：

    <a class="fancyboxLauncher shadowborder" href="#SSHeidiDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>

正文中的HTML是：

     <div class='hidden'>
        <div id="youtubeDiv">
            <iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="SSGalleryDiv" class='hidden'>
                <a class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
                <a class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
                <a class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>
        </div>
        <div id="SSHeidiDiv" class='hidden'>
                <a class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
                <a class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
                <a class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
        </div>

头中的代码为：

     <!-- Add jQuery library -->
<script type="text/javascript" src="$thisfolderurl$jquery_1.10.1.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.mousewheel_3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox_buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox_buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox_thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox_thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox_media.js?v=1.0.6"></script>

    <style type="text/css">
    .hidden {
display: none;
}

    a.shadowborder img,a.shadowborder:link,a.shadowborder:visited {
    float: left;
    border: none;}
    a.shadowborder:hover{
    border:2px solid white;
    border-radius: 14px;
    -webkit-box-shadow: 0 0 12px white;
    box-shadow: 0 0 12px white;}
    </style>
    <script type="text/javascript">
     $(document).ready(function() {
     $(".fancyboxLauncher").on("click", function(){
     $(".fancybox").eq(0).trigger("click");
      return false;
     });
     // fancybox for youtube
     $(".youtube").fancybox({
     padding: 0,
     openEffect: 'elastic',
      openSpeed: 250,
     closeEffect: 'elastic',
     closeSpeed: 150,
      closeClick: true,
      closeBtn: true,
     helpers: {
     overlay: {
        opacity: 0.4,
        css: {
            'background': '#50a382'
        }
       }
      }
       });
       // fancybox for images
       $(".fancybox")
      .attr('rel', 'gallery')
      .fancybox({
        padding : 0,
        autoPlay: 'true',
        playSpeed: 4000,
       closeBtn: true,
       arrows:true,
        helpers: {
          overlay: {
            opacity: 0.4,
            css: {
                'background': '#50a3e2'
            }
        }
      }
      });
      }); // ready
    </script>

我正在使用V2。现在，我已经添加了第二个画廊div（SSHeidiDiv），幻灯片将遍历两个画廊中的所有图像，而不仅仅是与该div相关联的图像。我尝试了许多提供的解决方案，但无法使其正常工作，因此决定在这里寻求帮助。

我遇到的另一个问题与youtube视频有关。我将其设置为自动播放，这对于当前视频来说很好，但是当我使用具有声音的视频测试相同的代码时，我发现该视频在后台播放，即，您可以听到声音，但是视频被抑制了，这是毫无疑问的。由隐藏的div。删除自动播放功能后找不到解决方法。

您可以提供的任何帮助将不胜感激。

最佳答案

终于找到了解决我问题的方法。现在，“ head”中的代码是

    <script type="text/javascript">
 $(document).ready(function() {

$(".fancybox-trigger").click(function() {
    $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
    return false;
});

// fancybox for youtube
  $(".youtube").fancybox({
    padding: 0,
    openEffect: 'elastic',
    openSpeed: 250,
    closeEffect: 'elastic',
    closeSpeed: 150,
    closeClick: true,
    closeBtn: true,
    helpers: {
        overlay: {
            opacity: 0.4,
            css: {
                'background': '#50a382'
            }
        }
    }
  });

// fancybox for images
$(".fancybox").fancybox({
        padding : 0,
        autoPlay: 'true',
        playSpeed: 4000,
        closeBtn: true,
        arrows:true,
        helpers: {
            overlay: {
                opacity: 0.4,
                css: {
                    'background': '#50a3e2'
                }
            }
        }
    });

 }); // ready
</script>

的HTML现在

    <div id='wrap'>
<div id="youtubeDiv" class='hidden'>
    <iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fancyDiv" class='hidden'>
    <a rel="gallery" class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
    <a rel="gallery" class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
    <a rel="gallery" class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>

    <a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
    <a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
    <a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
</div>
</div>

现在，附加到我的gallery1播放按钮图像的链接代码是

<a data-trigger-rel="gallery1" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>

我画廊的链接代码是

<a data-trigger-rel="gallery" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>

效果很好，我终于放心了。非常感谢我检查和测试的许多小提琴中提供的线索。

关于javascript - Fancybox在同一页面上使用多个画廊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33842997/