Time for action – using a custom transition
Follow these steps to change the default transition between images:
- For this example, we'll take a look at how to use the
fade
transition. Open yourscripts.js
file. All we have to do is pass thefade
value for the transition key to thecolorbox()
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 then click the next and previous buttons to flip through the ...
Get jQuery for Designers Beginner's Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.