I have a current Fancybox set up to display a youtube video or a gallery slideshow. Each is initiated by clicking on a play button (html object) containing the following links:
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>
The HTML in body is:
<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>
Code in head is:
<!-- 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>
I am using V2. Now that I have added the 2nd gallery div (SSHeidiDiv) the slideshow goes through all the images in both galleries instead of just the images associated with that div. I have tried many solutions offered but can't get them to work so decided to ask for help here.
The other issue I came upon is relating to the youtube video. I set it to autoplay, which is fine for the current video but when I tested the same code using a video that had sound I discovered the video was playing in the background, i.e. you could hear the sound but the video was suppressed, no doubt by the hidden div. Have not been able to find a cure short of removing autoplay.
Any help you can offer would be appreciated.
