Using colorbox

  1. Copy the "colorbox" folder from V:\distrib\CADD32710 to the root of your site.


     
  2. Copy the following text into the <head> section of your document:

    <link rel="stylesheet" href="colorbox/colorbox.css" />
    <script src="colorbox/jquery.min.js"></script>
    <script src="colorbox/jquery.colorbox.js"></script>

    <script>
    $(document).ready(function(){

    //Colorbox events (group classes for colorbox) will be added below this line.

     

    });
    </script>

     

  3. Create colorbox events such as the following:

    $(".group1").colorbox({rel:'group1'});

    where group1 is the name of the class you will be assigning to a group links pointing to images.

    Place these events in the script you created in step 2, under the comment line.

  4. Place your thumbnails on your page and create links to the larger images. To each link (<a> element) add the class as shown highlighted below.

    <a href="images/extbird2.jpg" class="group1"><img src="images/th-extbird2.jpg" width="240" height="180" alt="Ackerberg Residence - Bird's Eye view" /></a>

  5. (Optional) If you wish to add a title to the image when it is displayed in colorbox, add the title as shown highlighted below.

    <a href="images/extbird2.jpg" class="group1" title="Ackerberg Residence - Bird's Eye view"><img src="images/th-extbird2.jpg" width="240" height="180" alt="Ackerberg Residence - Bird's Eye view" /></a>

  6.  Assign all images that are to open together in a group the same class.
     
  7. If you need to create a different group (for example five images from a Revit project to be grouped separately), create a new colorbox event (step 3) for this new group:

    8. $(".revit1").colorbox({rel:'revit1'});

    Assign the revit project links this new revit1 class.

Options:

Add a transition:
$(".group2").colorbox({rel:'group2', transition:"fade"});

Set the colorbox to be always a certain size relative to the browser window:
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});

Let the images show as a slideshow:
$(".group4").colorbox({rel:'group4', slideshow:true});

Display an external web page (the link on the <a> element) in a colorbox window:
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

For more options and settings, visit the colorbox site: http://www.jacklmoore.com/colorbox/.