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 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 60% of the height of the site visitor's browser window, no matter what size the browser window happens to be. That way if the browser window is small, the site visitor will be able to see the complete photo.

Colorbox also provides some other settings for width and height:

innerWidth/innerHeight

These keys provide width and height values for the content inside the Colorbox instead of for the Colorbox itself. This can be helpful in cases where you know the exact width and height of the actual content, for example a video player.

initialWidth/initialHeight

Colorbox is very flexible and can be used for a variety of different content (as we'll see shortly). Setting an intialWidth and initialHeight allow you to control the size of the Colorbox before any content is loaded in. If you load in content via Ajax, it can take a few moments to load into the Colorbox. Setting initialWidth and initialHeight allows you to specify how large the Colorbox should be while you wait for the content to load in.

maxWidth/maxHeight

These keys allow you to set a maximum width and maximum height for the Colorbox. If the content is smaller, then the box will appear smaller on the screen. But when you're loading in larger contents, they won't exceed the maxWidth and maxHeight values you specify. For example, if you wanted to set up a Colorbox for images in a variety of sizes, you could allow the Colorbox to resize with fade or elastic transitions between images, but set a maxWidth and maxHeight to be sure that larger images wouldn't exceed the site visitor's browser window.

Creating a slideshow

Colorbox also provides us with an option to automatically cycle through all the images so the site visitor doesn't have to continually click the next button to see them all.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.59.9.236