Skip Navigation
Angelo State University
Web Services

Search Site

Information for:

Slideshows

You can easily add a slideshow to any page using the Shadowbox Javascript. All of the necessary script code is already included in the template. This will create a nice pop-up style image with an optional caption, previous, next, play, pause, print and close buttons, and a list of the total number of images in the show. To create the slideshow:

  • Place any number of small “thumbnail” images on your page.
  • Then create a link around each one to its larger version.
<a href="/sights_&_sounds/images/Large/Administration-Building.jpg">
        <img src="/sights_&_sounds/images/Small/Administration-Building.jpg" alt="Mathematics-Computer Science Building"/>
</a>
<a href="/sights_&_sounds/images/Large/Academic-Building-Courtyard.jpg">
        <img src="/sights_&_sounds/images/Small/Academic-Building-Courtyard.jpg" alt="Texan Hall"/>
</a>
<p>Clicking these images now will take you to the full-size version.</p>
Mathematics-Computer Science Building Texan Hall

Clicking these images now will take you to the full-size version.

  • Then add the relationship attribute to each anchor tag with the value of “shadowbox”.
<a rel="shadowbox" href="/sights_&_sounds/images/Large/Administration-Building.jpg">
        <img src="/sights_&_sounds/images/Small/Administration-Building.jpg" alt="Mathematics-Computer Science Building"/>
</a>
<a rel="shadowbox" href="/sights_&_sounds/images/Large/Academic-Building-Courtyard.jpg">
        <img src="/sights_&_sounds/images/Small/Academic-Building-Courtyard.jpg" alt="Texan Hall"/>
</a>
<p>Clicking these images now will invoke the script, but each image opens a separate show with no way to navigate between images, and there is no caption yet.</p>
Mathematics-Computer Science Building Texan Hall

Clicking these images now will invoke the script, but each image opens a separate show with no way to navigate between images, and there is no caption yet.

  • If you want the images to be grouped into one show, add brackets and a group name immediately following “shadowbox” in the rel attribute. The group name can be anything you choose. You can create multiple slideshows per page by using different group names.
  • To add a caption to the slideshow image, add a title attribute to the <a> element.
<a rel="shadowbox[group1]" href="/sights_&_sounds/images/Large/Administration-Building.jpg" title="Mathematics-Computer Science Building">
        <img src="/sights_&_sounds/images/Small/Administration-Building.jpg" alt="Mathematics-Computer Science Building"/>
</a>
<a rel="shadowbox[group1]" href="/sights_&_sounds/images/Large/Academic-Building-Courtyard.jpg" title="Texan Hall">
        <img src="/sights_&_sounds/images/Small/Academic-Building-Courtyard.jpg" alt="Texan Hall"/>
</a>
<p>Now, the slides are grouped. The show will automatically start playing when you click on the first slide, and you can navigate between the slides using the arrows. Additionally, a caption now appears below each image.</p>
Mathematics-Computer Science Building Texan Hall

Now, the slides are grouped. The show will automatically start playing when you click on the first slide, and you can navigate between the slides using the arrows. Additionally, a caption now appears below each image.

Other Uses

There are many other uses for the Shadowbox script. You can also link to Flash content, movies, HTML elements, and even other web pages. For examples of these types of effects, visit the Shadowbox site. For assistance with setting up a slideshow or help with other uses of the script, please contact us.