jQuery slideViewerPro 1.5

slideViewerPro 1.5
A 'pro' jQuery image slider built on a single unordered list.

Cool! What's this?

slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

slideViewerPro is the direct descendant of the popular jQuery slideViewer plugin.

Each gallery generates a user-defined number of thumbnails wich can slide automatically (see Settings and Dependencies section); as with slideViewer, everthing is generated by writing just few lines of HTML such as an unordered list of images.

<div id="my-folio-of-works" class="svwp">
	<ul>
		<li><img alt="Meander - P.J. Onori"  src="images/01.jpg" /></li>
		<li><img alt="Flock and Predator - L. Ongaro"  src="images/02.jpg" /></li>
		<li><img alt="Empathy - K. McDonald"  src="images/03.jpg" /></li>
		<li><img alt="DIY 3D Scanner - K. McDonald"  src="images/04.jpg" /></li>
		<!--eccetera-->
	</ul>
</div>

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 <HEAD> -here- </HEAD> 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.

<link rel="stylesheet" href="css/svwp_style.css" type="text/css" media="screen" /> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.slideViewerPro.1.0.js" type="text/javascript"></script>

$(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 main images and thumbnails may slide automatically as in our first example gallery, at the top of this page.

As you can see in the code above, setting to true the value of the autoslide parameter and giving 3500 (milliseconds) as the value of the asTimer parameter makes the slider to start sliding automatically. To achieve such effect we need to include another jQuery plugin: jQuery Timers.

Note: This is not required if you plan to use slideViewerPro always in manual mode; also note that while in autoslide mode, if a user clicks either on a thumbnail or a left/right button, the slider sets itself in manual mode. No, it won't start sliding again automatically for any reason.

<!-- Optional plugins  -->
<script src="js/jquery.timers.js" type="text/javascript"></script>

slideViewerPro is fully customizable, to better fit the color scheme and to define the timing of slide transitions:

// 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 "<img src='images/larw.gif' />" 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

Usecase 1 - default mode

The markup (applies to all usecases)

<div id="basic" class="svwp">
	<ul>
		<li><img width="710" height="290" alt="Anemone - G.C. Mingati"  src="images/05.jpg" /></li>
		<li><img width="710" height="290" alt="House of Cards, 2008 - James Frost, Director of Technology Aaron Koblin"  src="images/12.jpg" /></li>
		<li><img width="710" height="290" alt="Emitter - G.C. Mingati"  src="images/09.jpg" /></li>
		<li><img width="710" height="290" alt="Meander - P.J. Onori"  src="images/01.jpg" /></li>
		<li><img width="710" height="290" alt="Empathy - K. McDonald"  src="images/03.jpg" /></li>
		<li><img width="710" height="290" alt="DIY 3D Scanner - K. McDonald"  src="images/04.jpg" /></li>
		<li><img width="710" height="290" alt="Coronal Loops - G.C. Mingati"  src="images/06.jpg" /></li>
		<!-- eccetera -->
	</ul>
</div>

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

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

Usecase 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: "<img src='/wp-content/uploads/larw.gif' />",
		rightButtonInner: "<img src='/wp-content/uploads/rarw.gif' />",
		autoslide: true, 
		typo: true
		});

Usecase 3 - autoslide, shuffled list, without user interface

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

CSS

slideViewerPro depends on its stylesheet file for proper rendering. The file must be included as shown above (see Setup section)

.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)*/
color: #000;
font: normal 10px Verdana;
}

.thumbSlider { /*the thumbnails slider contanier*/
overflow: hidden;
width: 100%;
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;
width:41px;
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;}

With vertical images (from my Flickr photostream)

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("<img src='my_images_folder/svwloader.gif' class='ldrgif' alt='loading...'/ >");
});

Downloads

Updates

Aug. 2nd, 2011 - slideViewer Pro (v1.5) is now compatible with jQuery 1.6.

All images used in this tutorial are copyrighted material. Credits goes to their respective owners: James Frost, Aaron Koblin, the openprocessing.org members

2007-2011 Gian Carlo Mingati | design and development for interactive media

slideViewerPro 1.5A 'pro' jQuery image slider built on a single unordered list.