ALC211K - Advanced Digital Portfolio


Shadowbox Image Gallery

  1. Copy all of the full-size version of the images you want to include in the gallery into a folder within the images folder (can be simply named "photos").

  2. Create thumbnails for all of the images. We recommend creating square thumbnails by using the crop tool and holding down shift while selecting the area to crop (in Photoshop) or by selecting "Fixed: Aspect ratio" and entering 1:1 (in Gimp). This will keep your gallery thumbnails looking regular. Resize the images down to an appropriate size (75px or 100px square is usually sufficient, though larger may look better if you have only a few images) and save them for web in yet another subfolder inside of the photos folder named something like "thumbnails".

  3. Go to the Shadowbox-JS homepage and click on download. On the download page, choose all of the items besides QuickTime and Windows Media Player and download the zip file. Unzip the zip file and copy the entire folder into your include folder. Rename the folder to shadowbox (may be named something like shadowbox-3.0.3).

  4. Copy and paste the following CSS into the appropriate file in your site (probably _head.php). Change the colors to match your layout. The height specified in the CSS should be the same height as your tallest image plus 6 pixels to account for padding and border.

    #gallery a {
	margin:0 10px 10px 0;
	display:block;
	float:left;
	height:206px; /* should be the height of your largest thumbnails plus padding and border */
}

#gallery a img {
	padding:2px;
	border:1px #F00 solid; /* color should be changed - currently red */
}

#gallery a:hover img {
	border:1px #00F solid; /* color should be changed - currently blue */
}

  5. Copy and paste the following Shadowbox setup after the <title> tag in your image gallery page (something like gallery.php or photos.php).

    <link rel="stylesheet" type="text/css" href="/include/shadowbox/shadowbox.css">

<script type="text/javascript" src="/include/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
	language: 'en',
	players: ['img', 'html', 'iframe','swf'],
	continuous: true
	});
</script>

  6. Copy and paste the following HTML into the content area of your page. Edit each link to reflect the images in the gallery folder, deleting or adding links as necessary.

    <div id="gallery">

<a rel="shadowbox[gallery]" title="Caption for image" href="images/photos/1.jpg"><img src="images/photos/thumbnails/1.jpg" alt="Descriptive text" /></a>
<a rel="shadowbox[gallery]" title="Caption for image" href="images/photos/2.jpg"><img src="images/photos/thumbnails/2.jpg" alt="Descriptive text" /></a>
<a rel="shadowbox[gallery]" title="Caption for image" href="images/photos/3.jpg"><img src="images/photos/thumbnails/3.jpg" alt="Descriptive text" /></a>
    
</div>

  7. Save, upload, and refresh to view!