Follow these steps to change the default transition between images:
- For this example, we'll take a look at how to use the
fadetransition. Open yourscripts.jsfile. All we have to do is pass thefadevalue 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
transitionand 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 images, you'll see that the Colorbox fades out and then back in between each image.
- What if we decided we'd rather get rid of the transitions altogether? We'd simply have to change the value for the
transitionkey to'none':$(document).ready(function(){ $('a[rel="ireland"]').colorbox({transition:'none'}); });Now if you refresh the page in the browser, you'll see that the images change without any transition effect between them.
What just happened?
We saw how to take advantage of one of the available settings with the Colorbox plugin and modified the transition between images as our site visitor moves through them.
Fixed size
In a case where the photos you're loading into the Colorbox are of widely varying different sizes, you might decide that all the resizing is distracting to the site visitors and that you want to set a fixed size for the Colorbox. That's easy to do as well, by passing in a couple more key/value pairs. Looking through the documentation, you'll see that there are lots of settings for controlling the width and height of the Colorbox. To keep things simple, we're going to use width and height.