S3 Slider Demo

• Posted by miketeye on July 2, 2009
• 3 comments

If you are viewing this post in the post list (or home page), you will not see the animation. Click the title of the post to be taken to the actual page where you will see the animation.

JQuery S3Slider Plugin Demo

Recently I stumbled on the S3Slider JQuery plugin and liked the look and feel of the transition animations and the behaviour of the overlayed text.

So I set out to try an implementation of the S3Slider slide show in blogengine. The good news is that there is a very good JQuery Extension for blogengine by John Callaway of http://www.internetblu.com.

This extension in my opinion provided a very good approach to deploying jQuery on BlogEngine and had done 99% of the job, In the sense that once installed you are able to load jQuery plus any other jQuery plugin on Posts and Pages.

The 1% involved calling JQuery functions or Plugin functions after the DOM has been loaded. In keeping with the BlogEngine tradition of doing add-on tasks via Extensions and widgets rather than modifying the core .aspx files, I decided to write two Extensions to help solve the 1% left to achieve the objective.

EXTENSION 1: Add Header File

The Add Header File Extension does what it says, It allows you to load a .css style sheet or a javascript file with full or partial path into a post or page.

The syntax is of the form:
[--AddHeaderFile:filename.css|filename.js;SCRIPTID]. Without the double dashes (--). The SCRIPTID parameter is used to prevent duplication of the script if there

is an attempt to load the same script again onto the page. 

EXTENSION 2: Add Script

The add script extension allows you to call JQuery and plugin functions from within the post or page. The Syntax is of the form:

[--AddScript:javascriptcode]

Without the double dashes (--)

With the above 2 Extensions and the JQuery Extension for blog Engine, I was able to achieve the S3Slider plugin effect in BlogEngine with the Code segment below:

[--AddHeaderFile:http://www.levitical.org/themes/nonzero/s3sliderMain.css;SLIDERCSS]
[--AddScript:$j=jQuery.noConflict();$j(document).ready(function(){$j('#slider').s3Slider({timeOut: 3000}); });]

  Alone by the sea
cloudy evenning by the sea 
  Clouds
The Clouds are gathering, lower layers and higher layers 
  Country Sunset
Country sunset sky with clouds 
  Sunset by the Mountains
Sunset against the backdrop of an arc of mountains 
  A Awarm Sunset
Good place to be when you want to ponder and retreat 
 

E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Post RSS