Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Time for action — adding the slideshow

The jCarousel plugin has taken care of setting up the carousel for us, but we want to get fancy and also add a slideshow area.

We're on our own here, so we'll create a separate function for creating the slideshow area. Then we'll call the new function inside our document ready statement:

function slideshowInit() {
// Slideshow setup goes here
}
$(document).ready(function(){
slideshowInit();
$('#thumb-carousel').jcarousel({
scroll: 6,
wrap: 'circular'
});
});

First up, we'll wrap a container around our thumbnail list to create the slideshow area. We find ourselves already in need of referring to the thumbnail list again, so let's store a reference to it in a variable and update the call to the jcarousel() method as follows:
```
var thumbs = $('#thumb-carousel'),
function slideshowInit() {
// Slideshow setup goes here
}
$(document).ready(function(){
slideshowInit();
thumbs.jcarousel({
scroll: 6,
wrap: 'circular'
});
});
```
Next, inside the slideshowInit() function, we'll call jQuery's wrap() method to wrap the list in a<div>.
```
function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
}
```
Next, we need to create the actual stage where the full-size images will be featured. We also need to create the next and previous buttons. We're going to use the prepend() method so that these elements are inserted into stage-wrap div before the thumbs list.
```
function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
}
```

Now, we'll pop back into our styles.css file and add some styles for these new elements as follows:

#stage-wrap { position:relative;width:856px; }
#stage { width:600px;height:400px;padding:0 0 20px 0;position:relative;text-align:center;margin:0 128px; }
#stage img { position:absolute;top:0;left:50%;margin-left:-300px; }
#slideshow-next { position:absolute;right:80px;top:160px;width:38px;height:75px;cursor:pointer;background:transparent url(images/arrow-right.png) no-repeat 0 0; }
#slideshow-next:hover,
#slideshow-next:active { background-position:0 -75px; }
#slideshow-prev { position:absolute;left:80px;top:160px;width:38px;height:75px;cursor:pointer;background:transparent url(images/arrow-left.png) no-repeat 0 0; }
#slideshow-prev:hover,
#slideshow-prev:active { background-position:0 -75px; }

All of our full-size images are the same size, 600x400, so we can set that as the width and height of the stage and position the next and previous image buttons accordingly. If you view the page in a browser now, you should see a large blank area left for the stage and the next and previous image buttons on either side of it, all positioned above the thumbnail carousel.

We've got a carousel, we've got an empty stage, and we've got next and previous buttons on either side of our stage. Next, we'll populate the stage with an image slideshow. We'll get started by setting up a variable to refer to the stage and setting the opacity of the stage to 0 as shown in the following code:
```
function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
var stage = $('#stage'),
stage.css('opacity',0);
}
```
We've hidden the stage from view so that we can load the images into it without the site visitor seeing the images loading. This lets us have some control over how the slideshow appears as it's being created. We're going to keep the stage invisible until there's something to see.
Next, we'll need to get all the links to the full-size images and get ready to find the URL for each full-size image as follows:
```
function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
var stage = $('#stage'),
stage.css('opacity',0);
var imageLinks = thumbs.find('a'),
var src;
}
```
The links to the full-size images are contained in the thumbnail list, which we can refer to with the thumbs variable. We're just finding all of the links in that list and storing them in a variable called imageLinks. Next, we're setting up an empty container called src where we're going to store the url for the images. Though for now, we're leaving that container empty. We'll fill it up in a moment.

We've got 12 links to full-size images. For each link, we need to create a new image on the stage. We'll use jQuery's each() method to loop through each link and create an image.

function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
var stage = $('#stage'),
stage.css('opacity',0);
var imageLinks = thumbs.find('a'),
var src;
imageLinks.each(function(i) {
// We'll create our images here
});
}

This is the jQuery way of saying For each link, do this thing.

Next, we'll create an image for each of the links. First up, we know that the src attribute of the image is going to equal the href attribute of the link. In other words, a link as follows:
```
<a href="images/600/Switzerland.jpg">Switzerland</a>
```
will be used to create an image as follows:
```
<img src="images/600/Switzerland.jpg"/>
```
So the first thing we'll do is get that empty src variable we created earlier and store the URL for the image in it:
```
imageLinks.each(function(i) {
src = $(this).attr('href'),
});
```
Next, we're going to create an image with this src attribute. I'm going to store my newly created image in a variable called img:
```
imageLinks.each(function(i) {
src = $(this).attr('href'),
var img = $('<img/>', {
src: src,
css: {
display: 'none'
}
});
});
```
We've set the display of the image to none, to hide all of the images created in this way. We've set the src attribute of the image to the src variable that's holding the URL of the image.

Now that the image is created, we'll add it to the stage.

imageLinks.each(function(i) {
src = $(this).attr('href'),
var img = $('<img/>', {
src: src,
css: {
display: 'none'
}
});
img.appendTo(stage);
});

jQuery's appendTo() method lets us append the image to the stage.

Now that the stage is full of images, let's go ahead and make it visible again.

function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
var stage = $('#stage'),
stage.css('opacity',0);
var imageLinks = thumbs.find('a'),
var src;
imageLinks.each(function(i) {
src = $(this).attr('href'),
var img = $('<img/>', {
src: src,
css: {
display: 'none'
}
});
img.appendTo(stage);
});
stage.css('opacity',1);
}

Next, we want to show the appropriate image in the stage when one of the thumbnail links in the carousel is clicked. If you click the thumbnails now, you'll see that it opens the full-size image in the browser, but we want the image to show in the stage instead. We just need a way to reference a particular image in the stage from an image in the carousel. There are several different ways we could go about that there's nearly always multiple ways to get something done. In this case, we're going to take advantage of jQuery's data() method to store an index number in each thumbnail link. I'll then use that index to find and show the appropriate image.
Basically, we're going to number the links in the list. You'd think they'd be numbered 1 through 12, but remember that JavaScript counting starts at 0, so the thumbnail images will be numbered 0 through 11. When a thumbnail is clicked, we'll get the index number of that thumbnail, find the image on the stage with that same index and show it. So if our site visitor clicks thumbnail number 6, we'll find image number 6 on the stage and show it.
First up, we have to assign the index numbers to the thumbnails. Inside the document ready statement, add a small function to loop through each thumbnail and add an index number as follows:
```
$(document).ready(function(){
thumbs.find('a').each(function(index){
$(this).data('index', (index));
});
slideshowInit();
thumbs.jcarousel({
scroll: 6,
wrap: 'circular',
initCallback: nextPrev
});
});
```

Now that all of the thumbnail links are numbered, we can write a function that will find the appropriate image on the stage and show it when the thumbnail is clicked. Inside of the slideshowInit() function, we'll bind our function to the click event:

function slideshowInit() {
thumbs.wrap('<div id="stage-wrap"></div>'),
$('#stage-wrap').prepend('<div id="slideshow-next"></div><div id="slideshow-prev"></div><div id="stage"></div>'),
var stage = $('#stage'),
stage.css('opacity',0);
var imageLinks = thumbs.find('a'),
var src;
imageLinks.each(function(i) {
src = $(this).attr('href'),
var img = $('<img/>', {
src: src,
css: {
display: 'none'
}
});
img.appendTo(stage);
});
stage.css('opacity',1);
imageLinks.bind('click', function(){
// Function to find and show an image goes here
});
}

The first thing to do inside our new function is to cancel the browser's default behavior. We don't want the link to open the image in the browser, so we'll return false.
```
imageLinks.bind('click', function(){
return false;
})
```
Next, we need to get the number that we stored in our link. We'll use the data() method again to find the number:
```
imageLinks.bind('click', function(){
var index = $(this).data('index'),
return false;
})
```
Now, we need to search in the stage for the image with that index number. I'm going to store the image in a variable called nextImage since it will be the next image to show.
```
imageLinks.bind('click', function(){
var index = $(this).data('index'),
var nextImage = stage.find('img:eq(' + index + ')'),
})
```
jQuery allows us to find an element by its index number using the :eq selector. For example, the $('img:eq(1)') selector would select the second image in a list of images. (Remember, JavaScript counting starts at 0 instead of 1.) In this case, I know which number image I want because it's the number stored in the link that was just clicked.

Now that we've got the next image, we need to show it. We're going to fade it in and add a class of active to it.

imageLinks.bind('click', function(){
var index = $(this).data('index'),
var nextImage = stage.find('img:eq(' + index + ')'),
nextImage.fadeIn().addClass('active'),
return false;
})

But don't forget that there's already another image visible. We need to find that one and fade it out. Since we're adding a class of active when the image is shown, we can easily find the currently displayed image by looking for the one with the class of active:
```
imageLinks.bind('click', function(){
var index = $(this).data('index'),
var nextImage = stage.find('img:eq(' + index + ')'),
stage.find('img.active').fadeOut().removeClass('.active'),
nextImage.fadeIn().addClass('active'),
return false;
})
```
Don't forget that we'll have to be sure to remove that active class so that only one image will be marked active at a time.

If you refresh the page in the browser now, you'll see that clicking one of the thumbnail links in the carousel loads up the corresponding image in the slideshow. One image fades out while the next image fades in, in a nice smooth manner. Next, we'll get those next and previous buttons working so that we can use them to easily flip from one image to the next.

What just happened?

Phew! I hope you're still with me because this is a pretty awesome way to present a slideshow of images to your site visitors. I hope that you're starting to see that sometimes a plugin can be simply a beginning — you can get creative and invent your own functionality to layer on top of the default plugin behavior.

Next and previous buttons

We're definitely making some nice progress. Clicking the thumbnails loads up the full-size version of the image in the slideshow, and we can use the carousel controls to scroll through the thumbnails and see them all. Now, let's get the next and previous image buttons working.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Time for action — adding the slideshow

Create new playlist

Sign In

Sign Up

Time for action — adding the slideshow

Table of Contents for
Time for action — adding the slideshow