jQuery for Designers Beginner's Guide

Time for action – setting a fixed size

Follow these steps to set a fixed width and height for the Colorbox:

1. Open up your scripts.js file. We're going to make a few changes to our code to set a fixed width and height for the Colorbox:

   $('a[rel="ireland"]').colorbox({
          transition: 'none',
          width:	'90%',
          height: '60%'
   });

   Now if you refresh the page in the browser, you'll see that the Colorbox remains the same size. No matter what size the images or the browser window is, the Colorbox will always fill 90% of the width and 60% of the height of the browser window. The images inside resize proportionally to fit into the available space if they are too large.

What just happened?

We set the width and height settings to percentage values. This is a really helpful ...