Carousel

From Web Developer Network Wiki
Jump to: navigation, search

The carousel allows you to add slideshow galleries of photos to your web page. In order to do this, you will need to add the following HTML (which houses your images and the captions):

<script type="text/javascript">
WDN.initializePlugin('carousel');
</script>
 <div id="wdn_Carousel">
	<ul class="slides">
                <li>
                	<img alt="Photo of cheerleaders" src="/wdn/templates_3.0/examples/samplecontent/carouselCheerleaders.jpg" width="690" height="460" /><p>The Husker Spirit Squad showed their tough side as they posed for photos by spectators Sunday afternoon. 2010 Big Red Road Show at Omaha Qwest Center on February 8, 2010.<span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span></p>
                </li>
                <li>
                	<img alt="Graduation photo" src="/wdn/templates_3.0/examples/samplecontent/carouselGraduation.jpg" width="690" height="460" /><p>Nina Lorincz of Omaha made her mortar board into a special message for her parents Saturday. December 2009 Undergraduate Commencement in Bob Devaney Sports Center.<span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span></p>
                </li>
                <li>
                	<img alt="December snowstorm" src="/wdn/templates_3.0/examples/samplecontent/carouselSnow.jpg" width="690" height="460" /><p>A December snowstorm caused the University to close at noon on December 8, 2009.<span style="font-size:0.6em;font-style:italic">Photo by Greg Nathan / University Communications</span></p>
                </li>
                <li>
                	<img alt="Husker Football" src="/wdn/templates_3.0/examples/samplecontent/carouselFootball.jpg" width="690" height="460" /><p>Ndamukong Suh and Larry Asante sandwich Kansas State quarterback Grant Gregory. University of Nebraska–Lincoln vs. Kansas State Wildcats football.<span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span></p>
                </li>
            </ul>
 </div>

You can use any size of photo, however all photos in any carousel must be the same size. A width of 690 px allows for the carousel to be placed inside a zenbox inside a three column width layout:
Carousel.png

Captions

Captions must be in the <p> tag immediately following the image. Inside the paragraph tag, you can add a <span> with inline styling to allow for formatting:

<span style="font-size:0.6em;font-style:italic">Photo by Greg Nathan / University Communications</span>

For a working example, visit the WDN examples

Extending

At least two items are required to make the carousel perform correctly. When dealing with large images, it may be best to use less items in order to decrease the page load time. However, a desire may exist to showcase many images, and therefore extensions have been created to allow a JSON file to house references to the other items.

The carousel allows you to pass a few extra parameters to customize:

Option What it does Default Implementation
supportJSON Include extra items for the carousel not in the original DOM. When using this, the JSON file must utilize the same function and variable names as the sample. Only the references can be customized. See example below. At this time, using the JSON extension will randomize the items. false WDN.carousel.supportJSON = 'scripts/carouselJSON.js';
numberToDisplay When using supportJSON, this will determine how many of the items to display. It must not be more than the total amount of items in the original DOM + the items in the JSON file. 5 WDN.carousel.numberToDisplay = 6;
displayThumbnails Turn on the display of thumbnails. true WDN.carousel.displayThumbnails = false;
textholderHeight The height of the caption box. .15 WDN.carousel.textholderHeight = .2;


An example of the JSON file:

/*

Create a JSON object for all the carousel files

Put all the images and their associated data in this file. Do not include the default image used on the page (unless you want it repeated).

*/
WDN.carousel.buildFoundation(
	[
		{ 
			"img" : "images/02.jpg",
			"link" : "http://www.unl.edu//",
			"linktext" : "This is my link text 02",
			"title" : "This is my testing title 02"
		},
		{ 
			"img" : "images/03.jpg",
			"link" : "http://www.unl.edu/",
			"linktext" : "This is my link text 03",
			"title" : "This is my testing title 03"
		}
     ]
)

An example of modifying textholderHeight, which would apply as well to any of the parameters in this extending section:

<script type="text/javascript">
WDN.initializePlugin('carousel',function(){WDN.carousel.textholderHeight = 0.07;WDN.carousel.initialize();});
</script>
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox