jQuery slideViewerPro : A “pro” jQuery image slider

Osman Erdoğan — Sat, 14 Nov 2009 08:57:04 +0000

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts. Each gallery generates a user-defined number of thumbnails which can slide automatically.

Setup

slideViewerPro requires jquery-1.3 or greater and its CSS file.

To create your gallery just copy-and-paste the above markup. Each gallery must be written inside a DIV with an unique ID and CLASS swvp. Then adjust the path for your images and include the jQuery framework, slideViewerPro.1.0.js and the CSS file inside the -here- head tags of your page; then you can initialize the gallery (copy-and-paste the code below). The jQuery(window).bind(”load”) function ensures that ALL the images are loaded before calling the script and also it makes the built-in preloader to work.

Did you know? You don’t need to specify the width and height of your images but all the images within a single gallery must have the same width/height; slideViewerPro automatically checks for the size and renders accordingly. Of course if you specify or force your images size, slideViewerPro will use such image property.

$(window).bind("load", function() {
    $("div#my-folio-of-works").slideViewerPro({
        thumbs: 6,
        autoslide: true,
        asTimer: 3500,
        typo: true,
        galBorderWidth: 0,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        buttonsWidth: 40,
        thumbsActiveBorderOpacity: 0.8,
        thumbsActiveBorderColor: "aqua",
        shuffle: true
    });
});

Settings and Dependencies

// slideViewerPro options (defaults)
galBorderWidth: 6,  // the border width around the main images
thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images
thumbsRightMargin: 3, // the distance of each thumnail respect to the next one
thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around
buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails
galBorderColor: "#ff0000", // the border color around the main images
thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one
thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail
buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner
thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
easeTime: 750, // the time it takes a slide to move to its position
asTimer: 4000, // if autoslide is true, this is the interval between each slide
thumbs: 5, // the number of visible thumbnails
thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original
thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible
leftButtonInner: "-", //could be an image "" or an escaped char as "&larr";
rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin
typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed
typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.
shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

Usage 1 – Default Mode:

In its simplest form, slideViewerPro can be used without specifying any option.

$(window).bind("load", function() {
    $("div#basic").slideViewerPro();
});

Usage 2 : autoslide, typographic info, custom buttons images, custom thumbnails size

$("div#fewoptions").slideViewerPro({
        thumbs: 3,
        thumbsPercentReduction: 20,
        galBorderWidth: 0,
        galBorderColor: "aqua",
        thumbsTopMargin: 10,
        thumbsRightMargin: 10,
        thumbsBorderWidth: 5,
        thumbsActiveBorderColor: "gold",
        thumbsActiveBorderOpacity: 0.8,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        leftButtonInner: "",
        rightButtonInner: "",
        autoslide: true,
        typo: true
        });

Usage 3 : autoslide, shuffled list, without user interface

$("div#noui").slideViewerPro({
        galBorderWidth: 0,
        autoslide: true,
        thumbsVis: false,
        shuffle: true
        });

CSS Code :

.svwp {width: 50px; height: 20px; background: #fff;} /*preloader stuff. do not modify!*/
.svwp ul{position: relative; left: -999em;}/*preloader stuff. do not modify!*/
.slideViewer { /*this is the gallery container*/
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background: #fff;
}
.slideViewer ul {  /*this is your list of images*/
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
margin: 0;
padding: 0;
}
.slideViewer ul li { /*each LI item is floated; the whole list is now displayed as if its in one row*/
float:left;
} 

/*typographic info*/
.slideViewer span.typo{
padding: 6px; /* do not modify padding (yet)*/
background: #fff;
color: #000;
font: normal 10px Verdana;
} 

.thumbSlider { /*the thumbnails slider contanier*/
overflow: hidden;
width: 1%;
background: #fff;
}
.thumbSlider ul { /*the thumbnails list of images*/
list-style-type: none;
margin: 0;
padding: 0;
}
.thumbSlider ul li{
float:left;
margin: 0;
}
.thumbSlider a{ /*the link wrapped around each thumbnail. dynamically.*/
color: #fff;
text-decoration: none;
}
.thumbSlider a img{
border: 0;
display: block;
padding: 0;
}
.thumbSlider p.tmbrdr { /* the border above -not around- each thumb */
/* width, height and top values are dynamically added by the script. Do not modify. */
position:relative;
left: 0;
font-size: 0.01em;
left: 0;
margin: 0;
padding: 0;
} 

a.left, a.right { /*the left and right buttons (links)*/
background: transparent; /* could be any color  */
color: #ff0000;
font: bold 16px Arial;
overflow: hidden;
}
a.left span, a.right span{ 

}
a.left img, a.right img{
border: 0;
}
a.l_dis, a.r_dis {
background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
cursor: default;
}
a.l_dis span, a.r_dis span {
display: none;
}
a:focus {outline:none;}

Preloader:

slideViewerPro and slideViewer share the same ‘preloading‘ technique.

It is an idea i had while developing the slideViewer plugin, when i was searching for a technique to preload the images; here’s how it works and what to remember when installing your own slideViewerPro: I used the two built-in ready(fn) and load(fn) event handlers to create a CSS-based preloader: the first event is fired as soon the page DOM is ready; that means we can read the className .svwp and use the method prepend() to insert inside that DIV a ‘loader image’ (.gif). The tricky part here, is to hide the list of images during this preload period: this is accomplished by shifting to the left (’very’ left: -999em) of the page (see .svwp ul in the stylesheet) the whole list. As soon as the DOM is ready, that class shifts the list outside of the window (setting display: none won’t work in Opera) and insert an animated gif to show that ‘it is loading’. Then, i used the second event handler – wich waits the page to be fully loaded, including graphics – to fire the initialization of the gallery; the gif is removed and the list is shifted back on the screen (left: 0). What to remember: when using your own copy of slideViewerPro, look at line 26. There you’ll find the path of my preloader image (images/svwloader.gif); be sure to modify that line so that it points to your own preloader gif in your folder of images.

At line 26 of the jquery.slideViewerPro.1.0.js file, adjust the path of the preloader image:

jQuery(function(){
   jQuery("div.svwp").prepend("");
});

Downloads
jquery.slideViewerPro.1.0.js
svwp_style.css
the preloader image

Website

s3Slider jQuery Plugin & Tutorial

Osman Erdoğan — Tue, 10 Nov 2009 14:47:16 +0000

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

Usage:

HTML:


   
      
          
          Your text comes here
      
      
          
          Your text comes here

Sample CSS:

#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}

Inside in HTML:

$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});

timeOut: values in miliseconds…

Example – Website

Download

Full version (with examples) (size: 574kb)
Uncompressed version (size: 4.12kb)
Compressed version (size: 1.66kb)

jQuery Tutorials & Plugins » image slider

jQuery slideViewerPro : A “pro” jQuery image slider

s3Slider jQuery Plugin & Tutorial