Book Image

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
Book Image

jQuery for Designers Beginner's Guide Second Edition

By: Natalie Maclees

Overview of this book

Table of Contents (21 chapters)
jQuery for Designers Beginner's Guide Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – connecting the carousel and the slider


Follow these steps to connect the carousel and the slider:

  1. We've done a lot so far with Cycle2 without writing much jQuery to make it all happen. We've finally found something we want to do with Cycle2 that will require us to write a few lines of jQuery. We want to load the full-size image in the slideshow when our site visitor clicks on the thumbnail in the carousel. So we'll get started with scripts.js by selecting all the slides in the carousel. Add the code to select those inside the document ready method, after the bit of code that we're using to change the <body> class:

    $(document).ready(function(){
      $('body').removeClass('jsOff').addClass('jsOn');
    
      $('#carousel .cycle-slide');
    });

    This little bit of code won't change anything on our page, but now we've got all the thumbnails in the carousel and we can work with them. The cycle-slide class is added to each individual slide in a slideshow by the Cycle2 plugin.

  2. We want the...