oSlide v0.9.2


View Source

oSlide is a Javascript object oriented Slideshow plug-in for Jquery

Main Features:

  • Preloads every image indifidualy before starting the animation to show them
  • Diferent options to enable/disable navigation contols, navigation bar, captions and mouseover pause.
  • Customizable through settings and CSS
  • Resizes the images to fit to the containing Div
  • Public methods to switch images
In this sample you can see this modifications:

  • We disabled the navigation controls using the options interface.
  • We added a outgoing link to the url: "www.andresbott.com" on the first picture
  • We disabled the caption in some pictures, just by don't defining them.
  • We changed the position and style of the navigation buttons only using a few css.
  • We putted some buttons in on the bottom (ouside the slide Div) to demonstrate the functionality of the public methods : SlideNext(); SlidePrew(); and SlideToImg(imageID).

View Source

Here are Some buttons

View Source

Usage
To use oSlide you have to:

  1. Include Jquery in your header:
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  2. Inlcude oSlide Plug in in your header:
    <script type="text/javascript" src="oSlide/jquery.oSlide-0.9-min.js"></script>
  3. Inlcude oSlide's css file in your header:
    <link rel= "stylesheet" type= "text/css" href= "./oSlide/oSlide.css" media= "screen" />

  4. Now in your body: define a div with width and height, inslide this div define a array with the pictures to show and launch the script:

    <div id="oSlide2" class="oSlide" style="width:760px; height:300px; >
    <script>
    var Photos2=[
    {"url":"photo01.jpg" , "desc":"define caption" , "link":"http://www.google.es" } ,
    {"url":"photo02.jpg" , "desc":"define caption" } ,
    {"url":"photo03.jpg" }
    ]

    $(document).ready(function(){
    $("#oSlide2").oSlide({
    // here goes the options
    images: Photos2,
    'enableCaptions':true,
    'fade_color':"#C82C63"
    });
    })
    <script>
    </div>

Available options
You can pass options as key/value object to oSlide() when starting it.

Key Default value Description
thumbnailsDIV false Alternatively to iamges, you can define a div with thumbnails to be image source
NOT IMPLEMENTED YET!
mouseOverStopSlide true Pauses the slide when mouse over the picture
enableCaptions true If false even if a caption is defined it will be NOT printed
enableNavigationBar true If true will print the navigation Bar
enableNavigationControls true If True will print the navigations controls
animation "fade" Type of picture transition, in this version only fade is pressent
fade_color "white" If using animation fade, the picture will fade to this color and then fade to the next picture
sleep 5000 Time in ms before it slidedes to the next image
fade_time Duration in ms of the transition fade
divFadeColorBackround "oSlideFadeColorBackround" The Class that defines the image background div witch is the fade color.
divCaptionId "oSlideCaption" The id defined to the caption div
divNavigationBarId "oSlideNavigation" The id defined to the navigation bar div
divNavigationNextId "oSlideNextNavigation" The id defined to the navigation control for next image
divNavigationPrewtId "oSlidePrewNavigation" The id defined to the navigation control for previous image
debug false If true, will send debug information to JS console

Public methods
To access a public method, firts you have to save the object in a variable: var myvar = $(".mySlide").data('JsObj');
Then to call a method make: myvar.method

Method Description
SlideToImg( i ) Slides directly to image number i (uses the array index, so the first image is i=0)
SlideNext() Slides to the next image
SlidePrew() Slides to the previous image

FAQ
Since i don't really know this Frequent asqued questions, i will put them here as they come in: meanwhile if you have a question, email me at: contact [ad] andresbott.com

Changelog

  • 0.9.2

    • Changed the fade color property from Jquery options to Css, and added a new css class to handle this.
    • Improvement in the css makin it easier to modify.
    • Deleted the need to define the loaded variable for every picture.
    • Simplified the caption css definition.
    • Solved the problem with the caption position on IE7.

Known bugs:

  • 0.9.2

    • Full image Link not working on IE.

  • 0.9.1

    • Caption does not render proper in IE 7.

Roadmap:

  • 1.0

    • Support for mixed html and images.
    • Add slide and crosfade effect.

  • 1.1

    • Add support for swipe gestures in touch devices on webkit mobile.

Download

In the zip file you will find this samples with documentation, a unminimized version of the code and a minimized version ready to use. Download v0.9.2

Software License: LGPL
Pictures copyright: www.andresbott.com