Skip to main content

System Status: 

  1. Home
  2. Technology
  3. Websites & Mobile
  4. CMS Training
  5. Advanced Topics
  6. Image Rotators
  7. Image Slideshow

Image Slideshow

Last Updated: December 6, 2022 1:46:56 PM PST
Give feedback

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 following code:

<!--#protect
<link type="text/css" rel="stylesheet" href="http://cwo.ucsd.edu/_resources/shadowbox/shadowbox-3.0.3/shadowbox.css" />
<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>
#protect-->

Step 2

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 3

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 4

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>