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 – using a custom transition


Follow these steps to change the default transition between images:

  1. For this example, we'll take a look at how to use the fade transition. Open your scripts.js file. All we have to do is pass the fade value for transition to the colorbox() method as follows:

    $(document).ready(function(){
      $('a[rel="ireland"]').colorbox({transition:'fade'});
    });

    Note that we've added some curly braces inside the parentheses. Inside these curly braces, we can pass in key/value pairs to customize different aspects of the Colorbox. In this case, the key is transition and the value is 'fade'.

    If you reload the page in the browser, click one of the thumbnails, and then click the next and previous buttons to flip through the images; you'll see that the Colorbox fades out and then back in between each image.

  2. What if we decided that we'd rather get rid of the transitions altogether? We'd simply have to change the value for the transition key to 'none'.

    $(document).ready(function...