Page tree
Skip to end of metadata
Go to start of metadata

jQuery plugin which cycles the content of a defined page element. Rather than show/hiding different elements within the page it loads new content from external files as requires it. Allows you to set the time for a transition (automatic and manual) and the time for a cycle. Can specify forward / backward controls. Cycling pauses if you hover the mouse over the cycling element.

Code can currently be found in the external website repository:

https://vcs.bath.ac.uk/svn/externalwebsite/trunk/homepage/js/jquery.element.cycle.1.0.js

In the CMS it is at this URL:

http://www.bath.ac.uk/common/js/jquery.element.cycle.1.0.js

Usage

It requires jQuery. Developed with v1.3.2. Tested (briefly) with v1.4.2.

$(document).cycle();

Configuration options (defaults in brackets):

  • transitionTime - time (in ms) to move from one element to the next on auto cycle (4000)
  • clickTransitionTime - time (in ms) to move from one element to the next on manual cycle (500)
  • cycleTime - pause (in ms) between auto transitions (6000)
  • elementsFile - name of file with elements (features/feature.html)
  • elementContainer - identified for element container (#features)
  • elementIdentifier - identified for element to cycle (.feature)
  • forwardButton - identified for manual forward cycle button (#nextFeature)
  • backButton - identified for manual back cycle button (#prevFeature)

Requirements

Page markup

The element to be cycled needs to be in a container. For example, from the homepage:

<div id="features">
    <div class="feature">
        <div>
            <h3><a href="/study/ug/courses/placements/">60% of our undergraduates spend a year on placement</a></h3>
            <p><a href="/study/ug/courses/placements/">We offer outstanding opportunities for our undergraduates to spend a year on an industrial or business placement at leading UK and international companies.</a></p>
        </div>
        <a href="/study/ug/courses/placements/"><img src="images/features/2.jpg" alt="feature image" /></a>
    </div><!-- /feature -->
</div><!-- /features -->

Here the element to be cycled is contained within div#features. Each time it changes, div.feature is removed and replaced with another div.feature.

The cycled element (in this case div.feature) must be positioned absolutely.

Elements file

Needs to be a list of links to the elements to be cycled, thus:

<ul>
    <li><a href="features/feature7.html"></a></li>
    <li><a href="features/feature1.html"></a></li>
    <li><a href="features/feature6.html"></a></li>
</ul>

Each file contains an HTML snippet which is the element identified by elementIdentifier:

    <div class="feature">
        <div>
            <h3><a href="/study/ug/courses/placements/">60% of our undergraduates spend a year on placement</a></h3>
            <p><a href="/study/ug/courses/placements/">We offer outstanding opportunities for our undergraduates to spend a year on an industrial or business placement at leading UK and international companies.</a></p>
        </div>
        <a href="/study/ug/courses/placements/"><img src="images/features/2.jpg" alt="feature image" /></a>
    </div><!-- /feature -->

The first element in the cycle is the one in the page. The elements in this list are the rest of those to be cycled.

An example of this in action can be found on the homepage.