Time for action — creating a one-page web gallery

Follow these steps to create a one-page web gallery:

  1. We'll get started by setting up a basic HTML file and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Inside the body of our HTML document, we'll create a list of links to the sites we want to include in our design gallery:
    <h3>One-Page Web Design Gallery</h3>
<ul>
<li><a href="http://packtpub.com" rel="gallery">Packt Publishing</a></li>
<li><a href="http://nataliemac.com" rel="gallery">NatalieMac</a></li>
<li><a href="http://google.com" rel="gallery">Google</a></li>
</ul>

    Note that I've added a rel attribute equal to gallery to each link.

  2. Now, just as with the other Colorbox examples, choose a style and attach the stylesheet in the header of the document, make all the necessary images available to your page, update the path to the images in the CSS if necessary, and attach the Colorbox plugin at the bottom of the page.
  3. Next, we'll open our scripts.js file and add our document ready statement:
    $(document).ready(function(){
});
  4. Next, we'll select all links with the rel attribute equal to gallery and call the colorbox() method:
    $(document).ready(function(){
$('a[rel="gallery"]').colorbox();
});
  5. Just as we did with the video example, we'll set the iframe key to true since we're loading in content from other domains. I'm also going to set the width and height of the ColorBox to 90%, so that it takes up nearly the entire browser window. I'm also going to adjust the pagination indicator text to read Web Site instead of Image:
    $('a[rel="gallery"]').colorbox({
iframe: true,
width: '90%',
height: '90%',
current: 'Web Site {current} of {total}'
});

    Now, if you refresh the page in the browser, you can see that clicking one of the links opens a Colorbox and loads that website into the Colorbox. A site visitor can interact with the loaded website just as they would if they had loaded it into a separate browser window, browsing through pages, and so on. When finished with one site, they can click the next arrow to visit the next website in the list and then hit the Esc key on the keyboard or click the close button or anywhere outside the Colorbox to close the Colorbox when they're finished.

Note

Note that it is possible for website owners to block your ability to load their sites into an iframe. If you have set up a local server using MAMP or WAMP, then you might notice that the Google example won't load into your page. It will, however, load if you upload your code to an external server. Be sure to test all the sites you want to use in your web gallery to ensure that they work as expected.

What just happened?

We used much of what we learned creating a Colorbox video player to display external websites inside a Colorbox. This allows our site visitor to browse a collection of websites without ever leaving our page. We once again told Colorbox to load our content into an iframe to work around cross-domain Ajax restrictions. We customized the pagination indicator text, and set a width and height for our Colorbox.

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

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