Card Deck Slideshow
Description: This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each slide to show the next, similar to a stacked pile of cards. At the heart of it all, however, is a versatile slideshow that supports both auto and manual mode, persistence of the last viewed slide, inline or ajax content, and more. The "unhinge" effect works in all browsers that support CSS3 transform, namely, IE10, all modern versions of FF, Chrome, and Safari, including their mobile versions. In non supporting browsers (such as IE9), a standard slide down effect is employed instead. Lets list the essential features of this script now:
- Contents of the slideshow can be defined inline on the page as regular HTML markup, or inside an external file and fetched via Ajax.
- Contents of slideshow can be dynamically refreshed using Ajax, such as by loading a new content file every x minutes.
- Supports two different display modes- "auto" and "manual." In auto mode, slideshow pauses when the mouse rolls over the slideshow, and also, can be set to automatically stop after x cycles. In manual mode, custom controls can be created to dynamically move between slides, including play/ pause it.
- Supports persistence of last viewed slide within a browser session, so reloading the page recalls that slide.
- Customize the "unhinge" animation to either drop from the left or right side, or any origin relative to the slideshow for that matter. For browsers that don't support CSS3 animation (IE9 and below predominantly), a simpler "slide down" animation is used instead.
- An "
onunhinge
" event handler allows you to run custom code whenever a slide is unveiled.
Demos (responds to left/right arrow keys):
Default example:
Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. The clear liquid coconut water within is a refreshing drink.
Woodland is a low-density forest forming open habitats with plenty of sunlight and limited shade. Woodlands may support an understory of shrubs and herbaceous plants including grasses. Woodland may form a transition to shrubland under drier conditions.
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
|
|
Example 2:
|
|
Example 3:
|
|
Step 1: Insert the following code in the HEAD section of your page
The code above references one CSS file plus two external .js files, which you need to download below (right click/ select "Save As"):
- carddeckslideshow.js
- carddeckslideshow.css
- stackedcontents.txt (sample external file used in the demo)
By default, upload these three files to the same directory as where your webpage resides.
Step 2: Insert the below sample code into the BODY section of your page:
It contains the HTML for the three demos you see above. That's it for installation! Lets move on to understanding how everything works.
HTML Markup of slideshow
To set up a card deck slideshow, first, define the HTML markup for it, which looks like the following:
<div id="demo1"
class="stackcontainer">
<div class="inner">
<div>
Your content here 1
</div>
</div>
<div class="inner">
<img src="coconut.jpg" />
</div>
<div class="inner">
<div>
Your content here 2
</div>
</div>
<div class="inner">
Your content here 3
</div>
</div>
It should consist of a master DIV container with an arbitrary
but unique ID and a CSS class name of "stackcontainer
". Then,
for each piece of content inside your slideshow, wrap it around with a inner DIV
of CSS class "inner" (this class shouldn't be modified). Now, by default
any content inside the ".inner" class will appear flush right up against
its border, with no padding. To apply some padding, one way is to add another
DIV container inside the ".inner" DIV:
<div class="inner">
<div>
Your content here 2
</div>
</div>
Per the CSS defined inside carddeckslideshow.css, this will supply a padding of 8px to the content defined inside this DIV. If your content is simply an image, you probably don't want any padding around it, and hence should remove the DIV in red.
Now, if you wish to define the slideshow contents inside an
external file (and fetched via Ajax by the script), you still need to define the
outermost "stackcontainer
" DIV literally on your page where you
wish the slideshow to appear. However, for all the "inner
" content
DIVs, move them to an external file:
<div id="demo1"
class="stackcontainer">
<!-- Contents of slideshow defined inside an external file -->
</div>
The contents are then defined inside an external file, and pointed to inside the corresponding initialization code (see below).
Calling the initialization code
Moving on, you now need to call the initialization function
carddeckslideshow(options)
to jump start your card deck slideshow.
The format is:
<script type="text/javascript">
var demo1 = new carddeckslideshow({
id: 'demo1',
autoplay: true,
cycles: 2,
persist: false
})
</script>
Notice the variable name in red (ie: demo1)- when initializing your slideshow, you should assign the result to an unique but arbitrary variable name for each instance of card deck slideshow on your page. This way you can then use this variable as the starting point to further manipulating the slideshow, by calling one of its methods.
Available Options for carddeckslideshow()
Lets look in detail now all the supported options at y our
disposal when invoking carddeckslideshow()
:
option | Description |
hingepoint: string defaults to "top left" |
The point within the slideshow container where each slide "unhinges" to reveal the next one. Accepts any valid "x-axis y-axis" string value that CSS's transform-origin property accepts, such as "bottom left", "top right", "40% 50%" etc. |
autplay: Boolean defaults to false |
Boolean on whether slideshow should
auto play when the page loads. If set to true, also configure "cycles "
option below. |
cycles: int defaults to 2 |
When autoplay is set to
true, sets the number of complete cycles before the slideshow stops
auto rotating. Set this option to 0 to have it run perpetually. |
pause: int defaults to 3000 |
When autoplay is set to
true, sets the pause in milliseconds between slide changes. |
persist: Boolean defaults to 3000 |
Boolean on whether slideshow should persist within a browser session the last slide shown when the page is reloaded or navigated away from, and recall that slide to show upon return. |
fxduration: int defaults to 1200 |
Sets the duration in milliseconds of the "unhinge" effect. |
source: "string" defaults to "inline" |
Dictates the source of the contents for
the slideshow. If set to "inline" (default), they should be defined
inline inside the slideshow container. Otherwise, set this option to
the full path to the external file on your server (relative to the
current page) where the same contents are defined inside:
var demo3 = new carddeckslideshow({ Regardless of where your contents are defined, they should
consist of a series of HTML each wrapped around a |
activeclass: "string" defaults to "hinge" |
A CSS class that's added to the
currently "unhinging" slide. Use it to add additional CSS styling to
the presently swapped out slide, such as add a CSS shadow to give it
a raised effect. See inside
carddeckslideshow.css for the style currently added to the "hinge "
class. |
onunhinge: function() |
A callback function invoked at the end
of each slide's unveiling to reveal a new slide, including when the
very first slide is shown when the page first loads (with no
animation). Use this function to add custom code to be called
whenever a slide is shown. It is automatically passed the following
two parameters for your convenience:
For example, the following makes use of the onunhinge:function(curindex, previndex){ As you can see then, the jQuery method |
Method | |
userplay() |
Plays the slideshow (so it rotates automatically). |
userpause() |
Stops/ pauses a slideshow that's currently playing. |
navigate(keyword) |
Lets you increment/ decrement or jump
to a particular slide on demand. keyword can consist of one of the
following:
If the slideshow is currently auto playing, calling |
getajaxcontent(url) |
Replaces whatever contents the
slideshow is currently showing with those inside the external file
as dictated by the url parameter. Reinitializes the slideshow and
shows the newly fetched contents. For example: <script type="text/javascript"> |