Skip to main content
Blink

System Status: 

Image Slideshow

Find out how to implement an image slideshow on your website.

The following allows you to include a slideshow, which allows viewers to shuffle through a series of images. The functionality is provided by Shadowbox.js

Guidelines

  • Use an image or a link on your Web page to initiate the slideshow. 
  • Once triggered, the images will take over the viewers entire screen so it's imporatant to let them know they'll be viewing a slideshow.
  • Images contained in the slideshow will be centered horizontally and vertically on the viewer's screen. 
  • Keep in mind that folks browse with different monitor resolutions. It's best that your pictures do not exceed a width of 1000 pixels and height of 700 pixels.

Example

Start Slideshow

How to Implement

Insert the following code into the HTML Source Editor, launched from the  HTML button button on the WYSIWYG editor.

Step 1

At the top of the HTML Source Editor window insert the reference to the CSS

<link type="text/css" rel="stylesheet" href="http://cwo.ucsd.edu/_resources/shadowbox/shadowbox-3.0.3/shadowbox.css" />

Step 2

Insert the following JavaScript calls into the page.

<script type="text/javascript" src="http://cwo.ucsd.edu/_resources/shadowbox/shadowbox-3.0.3/shadowbox.js"> </script>
<script type="text/javascript"> Shadowbox.init();</script>

Step 3

Upload the images you want to use in the slideshow to your Web site. Generally, images default to the _images directory in the CMS.

Step 4

Call the Slideshow through your HTML. If you are using an image to launch the slideshow, use the a href around the image. For example:

<a href="_images/calit2-hr.jpg" rel="shadowbox[ gallery]" title="Atkinson Hall, home of Calit2 at UCSD.">
<img alt="Start Slideshow" src="/_images/training/slideshow/calit2-hr.jpg" /> </a>

Note the following attributes

  • rel="shadowbox" is required to generate a single picture lightbox
  • rel="shadowbox[gallery] will create a slideshow of images with the 'gallery' rel tag
  • title="Insert text here." is where you would insert text to describe the image

Step 5

Include the links to the rest of the images in the slideshow, keeping in mind the attributes in step 4 above.

<a href="/_images/geisel-hr.jpg" rel="shadowbox[gallery]" title="The iconic Geisel Library"></a>
<a href="/_images/price-east-interior-hr.jpg" rel="shadowbox[gallery]" title="Price Center, East"></a>
<a href="/_images/hillcrest-med-ctr-hr.jpg" rel="shadowbox[gallery]" title="Hillcrest Medical Center"></a>
<a href="/_images/scripps-night-hr.jpg" rel="shadowbox[gallery]" title="Scripps Pier at sunset"></a>