Search:


Wisdom.SlideShow

Recent Changes
Printable View
Page History
Edit Page

NOTE:

This module, while reasonably mature and stable, is quite old and does not fit in well with the current design ethic of the Wisdom library (it uses a global bootup function rather than instance-specific constructor-based initialization of it's attendant Javascript objects and makes much use of the global wisdom.implementation namespace rather than being more self-contained). The module will be slowly morphed over time into something more in-line with current practice.

module: wisdom.ui

module global attributes:

NOTE: Most of these values are internal and not required to be manually specified in your HTML page or Javascript. Please see the tutorial reference further down for help on setting up a Slideshow.

  • wisdom.implementation.slideshow.shows : Array[SlideShow]
    • an array of slideshows found on the page. This value is initialized during the global slideshow initAll() function.
  • wisdom.implementation.slideshow.indicators : Array[Element]
    • an array of elements used as slideshow indicators/navigation controls. This value is initialized during the global slideshow initAll() function.
  • wisdom.implementation.slideshow.alertOnError : Boolean
    • whether or not to pop up an alert box on an internal error'. This value is initialized during the global slideshow initAll() function.
  • wisdom.implementation.slideshow.imageDelayTimer : Timeout
    • a timeout object used to control the pauses between image transitions. This object is initialized during the global slideshow initAll() function.
  • wisdom.implementation.slideshow.imageDelay : Number
    • the number of milliseconds to pause between images. This value is initialized during the global slideshow initAll() function. The default value of 4 seconds can be controlled via the wisdomConfiguration object used to set up wisdom's configuration defaults. This hack won't be here forever, and will be replaced/augmented with a new slideshow with independent timers.
  • wisdom.implementation.slideshow.fadeInterval : Interval
    • An internal timer object used to trigger updates to images as they transition (fade from one to another)
  • wisdom.implementation.slideshow.fadeFrameRate : Number
    • the number of milliseconds between each update "tick" of the fading image transitions
  • wisdom.implementation.slideshow.fadeIncrement : Number
    • the amount that a image fades in or out each update. A delta for the image's opacity.
  • wisdom.implementation.slideshow.fadeIncrementIE : Number
    • the amount that a image fades in or out each update on Internet Explorer. A delta for the image's opacity. Used for optimization
  • wisdom.implementation.slideshow.inIE : Boolean
    • is the slideshow running on an Internet Explorer browser. used to switch fading behaviour.
  • wisdom.implementation.slideshow.previousIndicatorBackground : String
    • a string used to keep track of the previous value of the indicator background sprite.

module functions:

event handling functions

class: wisdom.ui.Slideshow

  • images []: Array - collection of images in the slideshow
  • imagesAlpha[] : Array - collection of numeric values containing opacity values for the associated images in the images'' array.
  • currentImageIndex: Integer - the image currently being viewed and visible
  • nextImageIndex: Integer or null if no user override - if not null, a user-input specified target index

Transparency cross-browser

  filter: alpha(opacity=0);  //internet explorer 
  opacity: 0.0;           //fx, safari, opera, chrome 
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; // IE8

Detailed Information

The Wisdom Slideshow module enables the placement of multiple image slideshows on a page, which can transition from displaying one image to another using fading animations. It is also possible for one of the slideshows on a page (the largest, or primary one for example) to be controlled using an external UI, such as small graphical buttons or indicators. Clicking on or hovering over these indicators with the mouse or pointer can force a change in the image.

A slideshow is built up using a combination of HTML, CSS and Javascript. Currently very little javascript is required on the page: if the Wisdom library has been included, the function wisdom.implementation.slideshow.initAll() must be called (at the point at which the entire page's DOM has been loaded and parsed, such as during the onload event or in a <script> tag at the tail-end of the HTML document). This function will seek through the DOM, finding elements appropriately labelled as Wisdom Slideshows using specific element class names. The function will build an internal object model of the slideshows, their associated image lists and metadata required to maintain the machinery. Timers will be started that alternately update the opacity of the images, fading them in and out, moving in sequence, or pause for a period so that a particular image can be viewed, before starting up the fading process again.

Example

Fixed-size HTML slideshow:

This example shows a fixed size slideshow, where all images are the same size, and the slideshow does not resize dynamically with the page. 

<!-- list of images to be used in the slideshow, any number of images can be used -->
<!-- remember to specify the correct height for your slideshow in both your html and css -->

<div class ="WisdomSlideshow" style="width:960px;">
   <a class="WisdomSlideshowImageStart"  href="products/overview.htm">
     <img src="images/slideshows/ProductSlideshow2013/1.jpg" width="960px" height="298px">
   </a>
   <a class="WisdomSlideshowImage" href="products/product1.htm">
    <img src="images/slideshows/ProductSlideshow2013/2.jpg" width="960px" height="298px">
   </a>
   <a class="WisdomSlideshowImage" href="products/product2.htm">
     <img src="images/slideshows/ProductSlideshow2013/3.jpg" width="960px" height="298px">
   </a>
   <a class="WisdomSlideshowImage" href="products/product3.htm">
     <img src="images/slideshows/ProductSlideshow2013/4.jpg" width="960px" height="298px">
   </a>
</div>

<div class="SlideshowFooter">
	<div id="mainSlideshowIndicator" class="WisdomSlideshowIndicator">
		<div id="indicator0" class="SlideIndicator"></div>
		<div id="indicator1" class="SlideIndicator"></div>
		<div id="indicator2" class="SlideIndicator"></div>
		<div id="indicator3" class="SlideIndicator"></div>
	</div>
</div>

<script type="text/javascript">
	// presumes the wisdom library has been included above
	wisdom.implementation.slideshow.initAll();
</script>

<!-- ==End of Slideshow== -->

Some requirements, observations and tips:

  • Provide at least a width for your slideshow container.
  • Your images SHOULD be explicitly sized using width and height attributes.
  • Remember to provide alt attributes for your images.
  • You can force the start image using the class "WisdomSlideshowImageStart" on the selected image.
  • Make sure your style overrides are set up nicely

Automatically-resizing HTML slideshow

This example shows a responsive slideshow, in which each image size is specified in width only, set to 100%, and height left to be automatic. This slideshow layout can resize dynamically with the container or viewport. 

<!-- list of images to be used in the slideshow, any number of images can be used -->

<div class ="WisdomSlideshow" style="width:100%;">
   <a class="WisdomSlideshowImageStart"  href="products/overview.htm">
     <img src="images/slideshows/ProductSlideshow2013/1.jpg" width="100%" alt="image 1">
   </a>
   <a class="WisdomSlideshowImage" href="products/product1.htm">
    <img src="images/slideshows/ProductSlideshow2013/2.jpg" width="100%" alt="image 2">
   </a>
   <a class="WisdomSlideshowImage" href="products/product2.htm">
     <img src="images/slideshows/ProductSlideshow2013/3.jpg" width="100%" alt="image 3">
   </a>
   <a class="WisdomSlideshowImage" href="products/product3.htm">
     <img src="images/slideshows/ProductSlideshow2013/4.jpg" width="100%" alt="image 4">
   </a>
</div>

<div class="SlideshowFooter">
	<div id="mainSlideshowIndicator" class="WisdomSlideshowIndicator">
		<div id="indicator0" class="SlideIndicator"></div>
		<div id="indicator1" class="SlideIndicator"></div>
		<div id="indicator2" class="SlideIndicator"></div>
		<div id="indicator3" class="SlideIndicator"></div>
	</div>
</div>

<script type="text/javascript">
	// presumes the wisdom library has been included above
	wisdom.implementation.slideshow.initAll();
</script>

<!-- ==End of Slideshow== -->

This is part of the Reference Documentation for the Wisdom Javascript Library? (or wisdom.js)