Time for action — activating the Next and Previous Buttons

Next up, we'll get those next and previous buttons around the image working so that the site visitor can easily flip through all the images.

  1. Just like when we hooked up external controls to the carousel in the last example, we'll get started by setting up a callback function for the carousel. We'll call the function nextPrev and set it up as follows:
    function nextPrev(carousel) {
}
thumbs.jcarousel({
scroll: 6,
wrap: 'circular',
initCallback: nextPrev
});

    Now the nextPrev function will be called when the carousel is initialized.

  2. Inside the nextPrev() function, we'll select the previous button and bind a function to the click event:
    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
//Click code will go here
});
}
  3. When a site visitor clicks the previous button, we want to show the previous image in the slideshow. As usual with JavaScript, there's more than one way to go about that. Since we've already got a nice slide switch set up to happen when one of the thumbnails in the carousel is clicked, let's just go ahead and re-use that.

    When our site visitor clicks the previous button, we'll find the previous thumbnail in the carousel and click it. That will kick off the image transition and allow us to re-use the code we've already written.

    So our first order of business is to find the currently selected thumbnail. However, we haven't made it easy to find the current thumbnail. So let's go back inside our slideshowInit() function and add a line of code to add a class to the current thumbnail: 

    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(){
var index = $(this).data('index'),
$(this).parents('li').addClass('current').siblings('.current').removeClass('current'),
var nextImage = stage.find('img:eq(' + index + ')'),
stage.find('img.active').fadeOut().removeClass('.active'),
nextImage.fadeIn().addClass('active'),
return false;
})
}

    Here, we're adding a class of current to the <li> tag that contains the clicked thumbnail. Then we're checking all the siblings to remove the current class if it exists somewhere else. This ensures that only one item in the carousel will have the current class at any given time.

  4. Now, if you'll humor me for a minute, we'll take a sidetrip to the CSS. Since we're adding a class to the current thumbnail, we can make use of that for CSS purposes to style the current thumbnail differently than the rest. Let's reduce the opacity of the thumbnails and make the current one 100 percent opaque to make it stand out. Open up styles.css and add some styles for this as follows:
    #thumb-carousel img { opacity:.5; }
#thumb-carousel .current img { opacity:1; }
  5. Back to the JavaScript! Now that we've got an easy way to select the current thumbnail, we just have to find the one with the current class. Inside the prevNext() function, we can get the current link this way:
    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
});
}
  6. Since this is the function attached to the previous button, we'll need to find the previous thumbnail in the list. I'll use jQuery's prev() method to find the previous thumbnail in the carousel:
    currentSlide.prev();

    However, if the current slide is the first one, there isn't a previous slide to go to. In this case, if the site visitor is on the first slide and clicks the previous button, I want them to go to the last slide in the list so that it continues seamlessly. So, I'll first check to see if there is a previous slide as follows: 

    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length ? currentSlide.prev() : thumbs.find('li:last'),
});
}

    There are a couple of things to explain here. First, this line, translated into English from JavaScript, says Is there a thumbnail before this one? If there is, then that's where we're going. If there's not, then we're heading over to the last thumbnail. 

    var prevSlide;
if (currentSlide.prev().length) {
prevSlide = currentSlide.prev();
} else {
prevSlide = thumbs.find('li:last'),
}

    Here's how a ternary operator works: 

    condition to check ? value if true : value if false

    It starts with the condition that we're checking which is followed by a ?. After that, we have the value if that condition is true followed by a :, and the value if the condition is false.

  7. Now that we've found the previous slide, all that's left to do is click the link inside as follows:
    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length? currentSlide.prev() : thumbs.find('li:last'),
prevSlide.find('a').click();
});
}

    This will fire off the function we've written to change the slide in the browser. If you reload the page in the browser at this point and click the previous button a few times, you'll see that the image switches just as we'd expect.

    However, there's not much going on with the carousel. It's just sitting there. And right away the currently selected thumbnail is out of view. If I click the previous button once, then scroll the carousel, I can finally see the highlighted thumbnail. Ideally, the carousel would update itself to be sure that the current thumbnail was always visible.

  8. The jCarousel plugin makes it easy for us to scroll to any slide in the carousel. We only have to know which one we want to show. A part of the jCarousel's setup script also assigns a jcarouselindex attribute to each list item in the carousel. We can get that number and use it for scrolling purposes. First, let's figure out what jcarouselindex of the prevSlide is, since that's where we want to scroll.
    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length? currentSlide.prev() : thumbs.find('li:last'),
var index = parseInt(prevSlide.attr('jcarouselindex'));
prevSlide.find('a').click();
});
}

    I'm using parseInt() to make sure that I get a number instead of a string. If I get a string back, it can mess up the scrolling in the carousel.

    Now, all that's left to do is scroll to the right thumbnail: 

    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length? currentSlide.prev() : thumbs.find('li:last'),
var index = parseInt(prevSlide.attr('jcarouselindex'));
prevSlide.find('a').click();
carousel.scroll(index);
});
}

    Now if you refresh the page in the browser, you'll see that clicking the previous button updates the carousel—the carousel will scroll so that the currently highlighted slide is the first one in the carousel. However, what if I decide I want the currently highlighted slide to appear in the middle? Easy! I've got seven slides showing. If the highlighted slide is in the middle, that means there will be three slides before it (and three slides after it). All I have to do is tell the carousel to make the slide three before the highlighted slide the first slide visible as follows: 

    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length? currentSlide.prev() : thumbs.find('li:last'),
var index = parseInt(prevSlide.attr('jcarouselindex')) - 3;
prevSlide.find('a').click();
carousel.scroll(index);
});
}

    Now, for example, when I click the previous button, if the next slide is slide number 5, slide number 2 will be shown first in the carousel, which means slide number 5 will be right in the middle of the carousel. Refresh the page in the browser and give it a try. Nice, right?

  9. All that's left to do is get the next button working as well as the previous one. The function is almost identical with a few tweaks made.
    function nextPrev(carousel) {
$('#slideshow-prev').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var prevSlide = currentSlide.prev().length? currentSlide.prev() : thumbs.find('li:last'),
var index = parseInt(prevSlide.attr('jcarouselindex')) - 3;
prevSlide.find('a').click();
carousel.scroll(index);
});
$('#slideshow-next').bind('click', function() {
var currentSlide = thumbs.find('li.current'),
var nextSlide = currentSlide.next().length ? currentSlide.next() : thumbs.find('li:first'),
var index = parseInt(nextSlide.attr('jcarouselindex')) - 3;
nextSlide.find('a').click();
carousel.scroll(index);
});
}

    I'm using the next() method instead of the prev() method to get the next slide rather than the previous one. Aside from that, the function is the same.

Now if you refresh the page in the browser, you'll see that the next and previous image buttons both work — they show the correct image in the slideshow and scroll the carousel so that the current image is highlighted right in the middle of the carousel.

What just happened?

We combined some external carousel controls with a slideshow to create a robust slideshow/carousel combination. The slideshow can be controlled from the carousel — clicking a thumbnail in the carousel will load up the full-size version of the image in the slideshow stage. And clicking the next and previous buttons in the stage will update the carousel, scrolling it so that the currently highlighted thumbnail appears in the middle of the carousel's viewable area.

We started with some basic HTML, wrote a custom CSS skin for the carousel, and called the jcarousel() method to get the carousel working. Next, we wrote a function to dynamically create the slideshow stage and buttons. Finally, we made it all work together with some fancy jQuery footwork.

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

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