CHSSWeb Help
College of Humanities and Social Sciences

Embedding an In Page Slider

Currently the system supports the creating of an in-page slider with the assistance of the HTML widget in the WYSIWYG as seen here:


 

Upon opening the dialog you will enter the following code at the point where you would like your slider to appear:

<ul class="bxslider">
<li><img src="http://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" /></li>
<li><img src="http://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" /></li>
<li><img src="http://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" /></li>
<li><img src="http://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" /></li>
</ul>

Which will create a slider like this:

 

If you would prefer the images to have labels simply add in a title to each like below:

<ul class="bxslider">
<li><img src="http://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" title="Vicious Himalayan Mountain Corgi's" /></li>
<li><img src="http://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" title="The Noble and Majestic Bulldog" /></li>
<li><img src="http://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" title="Not sure what this is...A Rat?" /></li>
<li><img src="http://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" title="The Rarely Seen and Oft Misunderstood Floor Dog" /></li>
</ul>

This will create the slider like the one below:

 

To add a link to the image so it links to a page or another site, add the bolded text below or copy and paste this and change the links:

<ul class="bxslider">
<li><a href="http://www.cnn.com"><img src="http://www.thatcutesite.com/uploads/2010/11/two_corgi_puppies.jpg" title="Vicious Himalayan Mountain Corgi's" /></a></li>
<li><a href="http://www.washingtonpost.com"><img src="http://s3-media2.ak.yelpcdn.com/bphoto/8oBu66rizt0LDNuT28atyg/l.jpg" title="The Noble and Majestic Bulldog" /></a></li>
<li><a href="http://www.espn.com"><img src="http://s3-media3.ak.yelpcdn.com/bphoto/J9HsOdo3vX3fXhay0L66QQ/l.jpg" title="Not sure what this is...A Rat?" /></a></li>
<li><a href="http://www.eonline.com"><img src="http://grza.net/gis/Animals/Puppy%20Lying%20on%20Wood%20Floor.jpg" title="The Rarely Seen and Oft Misunderstood Floor Dog" /></a></li>
</ul>

 

To Upload Images for use in the Slider

  1. Click on the Image tool in the left-hand navigation.
  2. Click the Upload Image button on the right side of the page.
  3. Give the image a title, select the picture to be uploaded then hit Save.
  4. Find the image in the image list and select it.
  5. Select the size of the image and click the clipboard icon to copy the image link to paste into the slider information.
  6. Paste that in and you're done.

 

Print Friendly and PDF