Question

我有一个当前的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>

库2：

    <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。没有能够找到一个不能去除自动播放的治疗方法。

您可以提供任何帮助。

Answer 1

终于找到了解决问题的方法。＆＃34; head＆＃34;中的代码现在是

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

运作良好，我很放心，它终于走到了一起。非常感谢我检查和测试的许多小提琴中的线索。

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

1 个答案: