An easy way to open a YouTube video with Shadowbox from a slider (using jQuery Cycle2) when a slide is clicked.
A great option when opting to use lightbox functionality in your site or app is Shadowbox. It's a standalone, lightweight app that is easy to set up. There are many responsive image sliders, but jQuery Cycle2 is a favorite of ours. This plugin builds off of the already successful jQuery Cycle, adding support for responsive layouts and a streamlined implementation process.
Before you get started, be sure you're linking up your files correctly! This includes the jQuery library, jQuery Cycle2 plugin, and both the Shadowbox Javascript and CSS files.
The first step in getting this to work is to get your cycle set up. Thanks to Cycle2's flexibility, we aren't restricted to using list elements for our sliders.
<div id="cycle-1" class="cycle">
<a href="#" class="prev"><span>Prev</span></a>
<a href="#" class="next"><span>Next</span></a>
<a class="slide" href="http://www.youtube.com/v/Ke1Y3P9D0Bc" rel="shadowbox[Large]">
<img src="images/slides/iron-man-3.jpg" alt="Iron Man 3" />
</a>
<a class="slide" href="http://www.youtube.com/v/7p7rocHEecE" rel="shadowbox[Large]">
<img src="images/slides/thor-dark-world.jpg" alt="Thor: The Dark World" />
</a>
<a class="slide" href="http://www.youtube.com/v/WEbzZP-_Ssc" rel="shadowbox[Large]">
<img src="images/slides/the-wolverine.jpg" alt="The Wolverine" />
</a>
<div class="pager-wrap">
<div class="pager"></div>
</div>
</div>
This setup is pretty simple. We have:
<a> tags. There are two parts needed to make the Shadowbox work properly.With our HTML set up, the next step is to set up some CSS so our slider elements are positioned properly. We'll also override the existing Shadowbox counter styling.
<style>
.prev,
.next {
display:block;
color:#fff;
position:absolute;
top:0;
text-transform:uppercase;
z-index:1000;
background:rgba(0,0,0,0.5);
font-size:75%;
font-weight:700;
height:100%;
transition-property:background-color, color;
transition-duration:300;
padding:0 15px;
}
.next {
right:0;
}
.prev:hover,
.next:hover {
text-decoration:none;
background:rgba(255,255,255,0.5);
}
.prev span,
.next span {
display:block;
position:relative;
top:48%;
}
.pager-wrap {
position:absolute;
bottom:0;
width:100%;
z-index:500;
text-align:center;
padding:5px 0;
}
.pager {
display:inline-block;
width:auto;
background:rgba(25,25,25,0.75);
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:0 0 5px 1px rgba(255,255,255,0.25);
margin:0 auto;
padding:5px;
}
.pager span {
width:20px;
height:20px;
background:#ccc;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
display:block;
float:left;
text-indent:-9999px;
font-size:0;
color:transparent;
transition-property:background-color;
transition-duration:300;
cursor:pointer;
margin:0 2px;
}
#sb-counter a {
text-indent:-9999em;
background:#ccc;
display:block;
float:left;
border-radius:50px;
color:transparent;
width:15px;
height:15px;
transition-property:background-color;
transition-duration:300;
margin:2px;
padding:0;
}
#sb-counter a:hover {
background-color:#fff;
}
.cycle a,.cycle > a > img {
display:block;
width:100%;
height:auto;
}
.pager span:hover,
.pager span.cycle-pager-active,
#sb-counter a.sb-counter-current {
background:#fff;
}
</style>
Now that the HTML is set up and styled, it's time to set up the Javascript that will rotate the slider, open up the Shadowbox, and handle the functionality of the slider (like the pager, previous/next links, etc.).
Create a new Javascript file (which this tutorial will refer to as main.js). This is where we'll put all our code. Within main.js, we'll add a small bit of code to initialize the Shadowbox and set an area where we can run the rest of our Javascript once the DOM is ready. We'll also add an option to Shadowbox to allow for galleries to be cycled continuously.
// Initializing Shadowbox
Shadowbox.init({
continuous: true
});
// Set up our DOM-ready function.
jQuery(function($){
});
First, let's get the slideshow playing. To do this, we'll make a call to the cycle plugin, e.g. $('#cycle-1').cycle();. Since our HTML isn't set up in the default way that the cycle plugin looks for when the plugin is initialized, we'll have to pass some options to it in order for it to function properly.
Within the cycle call (.cycle()), we're going to pass an object containing all of our objects that will look something like this:
$('#cycle-1').cycle({
slides: '> a.slide',
speed: 300,
pager: '> .pager-wrap > .pager',
next: '> .next',
prev: '> .prev'
});
This will handles the following:
<a> tags as the slide elements<div> as the placeholder for all the pager navigation items.a.prev and a.next elements to handle the previous and next slide functionality.Now our slider should be cycling through each slide. You can view the full API for the Cycle2 plugin here.
The next step is to get the Shadowbox working when you click on a slide. First, the Shadowbox has to be initialized. This is simple to do: just call Shadowbox.init() at the beginning of your main.js file.
Next, we're going to tell Shadowbox to listen for a click event on the cycle's slide elements and configure the content that it will show when the slide is clicked. Within the DOM-ready function, add the following code.
Shadowbox.setup('#cycle-1, {
onOpen: function() { $('.cycle').cycle('pause'); }, // Stops the cycle when the shadowbox is opened.
onClose: function() { $('.cycle').cycle('resume'); }, // Resumes the cycle on close.
counterType: 'skip'
});
If you've followed this tutorial correctly, you will have a working slideshow that will properly open up YouTube videos using the Shadowbox plugin. View a working sample of this tutorial.