Follow these steps to set a fixed width and height for the Colorbox:
Open up your
scripts.jsfile. We're going to make a few changes to our code to set a fixedwidthandheightfor 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.
We set the width and height settings to percentage values. This is a really helpful option if you have large photos that could potentially be larger than your site visitor's browser window. Setting the width and height to percentage values ensures that in this case, the Colorbox will be 90% of the width and...