slideViewer (a jQuery image slider built on a single unordered list) 1.2


Download slideViewer 1.2 (last updated july 9 2010)

What's this? slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:

<div id="mygalleryinpost10.12.2006" class="svw">
	<ul>
		<li><img src="picts/10.jpg" alt="my description for this image" /></li>		
		<li><img src="picts/08.jpg" alt="this is my dog..." /></li>		
		<li><img src="picts/03.jpg" alt="my dog eating the cat" /></li>		
		<li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li>		
		<!--eccetera-->
	</ul>
</div>

slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture).

You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips.

You can choose where to put the user interface (the numbered links); it can be above or below your set of images.

You don't need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) because slideViewer automatically checks for the size and renders accordingly. But if you can't live without declaring your images size, slideViewer will use your declared dimensions. Pretty flexible.

How many galleries per page? As much as you like. slideViewer will instantly create a gallery for each list of images you wish to render as a gallery. This may be useful to instantly create a gallery within one or more posts in a blog.

Installation is preatty easy. slideViewer requires jQuery 1.4.1 and the jQuery easing.1.2 plugin to work:

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.2.js" type="text/javascript"></script>
<script src="jquery.slideviewer.1.2.js" type="text/javascript"></script>

Optional enhanced toolTips: adding fancy toolTips to your galleries is pretty easy, just add toolTip: true as illustrated below.

slideViewer's basic CSS:

/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff;}
.svw ul {position: relative; left: -999em;}

/*core classes*/
.stripViewer { 
position: relative;
overflow: hidden; 
border: 5px solid #ff0000;  
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li { 
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #ff0000;
color: #fff;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover, a.current{
background: #fff;
color: #ff0000;
}

/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff;
color: #000;
border: 5px solid #dedede;
}

Setup: create a DIV with an unique ID and class="svw" and inside that DIV, create a list of images (an unordered list):

<div id="mygalone" class="svw">
	<ul>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/01.jpg" /></li>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/02.jpg" /></li>		
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/03.jpg" /></li>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/04.jpg" /></li>
		<!-- eccetera -->
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/15.jpg" /></li>
	</ul>
</div>	

Ready to fly in 10 seconds! Now that we have our list ready, let's make it slide!

<script type="text/javascript">
	$(window).bind("load", function() {
	$("div#mygalone").slideView()
});
</script>

Add fancy tooltips (and optionally set their opacity)?

<script type="text/javascript">
	$(window).bind("load", function() {
	$("div#mygalone").slideView({toolTip: true, ttOpacity: 0.5}) // ttOpacity can be 0.1 to 1.0
});
</script>

Custom easing functions: you can customize the kind of animation and its duration; time is expressed in milliseconds eg: 1700.

<script type="text/javascript">
	$(window).bind("load", function() {
	$("div#myInstantGallery").slideView({
	easeFunc: "easeInOutBack",
	easeTime: 1200
}); 
});
</script>

Supported browsers: slideViewer have been tested with IE6, IE7, IE8, FF3.5, Opera 9, Chrome 2.0

Usecase 1 width and height have not been declared, nor the kind of easing function and its duration; this is the simplest use


Did you know? if your galleries are made of a large number of images, probably you'll get two or more rows of links. Don't worry, they'll never go further your gallery right border.


HTML
<div id="mygalone" class="svw">
	<ul>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/01.jpg" /></li>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/02.jpg" /></li>		
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/03.jpg" /></li>
		<li><img alt="abc defrg thysu ooip jkifbtg fff"  src="picts/04.jpg" /></li>
		<!-- eccetera -->
	</ul>
</div>	
JS
<script type="text/javascript">
	$(window).bind("load", function() {
	$("div#mygalone").slideView()
});
</script>

Usecase 2 width and height have been declared: the script will use that values; also the kind of easing function and duration of the effect have been customized (easeFunc: "easeInOutBack", easeTime: 2200)


HTML
<div id="mygaltwo" class="svw">
	<ul>
		<li><img width="350" height="200" alt="abc"  src="picts/03.jpg" /></li>
		<li><img width="350" height="200" alt="defrg"  src="picts/04.jpg" /></li>		
		<!-- eccetera -->
	</ul>
</div>
JS
<script type="text/javascript">
	$(window).bind("load", function() {
	$("div#mygaltwo").slideView({
	easeFunc: "easeInOutBack",
	easeTime: 2200
}); 
});
</script>

easeInOutSine, toolTips, UI on top? (easeFunc: "easeInOutSine",easeTime: 500, uiBefore: true, ttOpacity: 0.5, toolTip: true)

  • description for this first image
  • second picture and second description
  • my third picture in da gallery!
  • makin my gallery is easy!

toolTips! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

Dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in.

The 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


HTML
<div id="mygalthree" class="svw">
	<ul>
		<li><img alt="abc" src="picts/10.jpg" /></li>		
		<li><img alt="abc" src="picts/08.jpg" /></li>		
		<li><img alt="abc" src="picts/05.jpg" /></li>
		<!--eccetera-->
	</ul>
</div>
JS
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalthree").slideView({
easeFunc: "easeInOutSine",
easeTime: 500,
uiBefore: true, //you can optionally draw the ui before the slider's images
ttOpacity: 0.5,
toolTip: true
});
});
</script>

updates:
venerdi 7 luglio 2010: Clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture.
lunedi 14 giugno 2010: Added the option uiBefore wich if set to true, places the ui bofore the slider's images. See the last example.
mercoledi 17 febbraio 2010: due to the incompatibility between jQuery release 1.4 and Jörn Zaefferer's toolTip plugin, this new version includes a built-in tooltip script. You don't need anymore an extra-plugin to activate the tooltips.
mercoledi 14 gennaio 2009: slideViewer now slides forward by clicking on the images (i received lots of emails requiring that functionality. and here it is.)
lunedi 26 novembre 2007: no more IE6 crashes! Removed the overflow:hidden; statement in the CSS preload class (.svw) that was causing IE6 to crash. Thanks to Ark Kuciak.
sabato 6 ottobre 2007: jQuery 1.2 compliant
mercoledi 27 giugno 2007: slideViewer now works *optionally* with the jQuery toolTip plugin!
martedi 26 giugno 2007: added a tricky preloader! now works in IE7!
lunedi 25 giugno 2007: auto-selection of current element (navigation links)
lunedi 25 giugno 2007: added a "title" tag to the links (grabbed from the "alt" tag of the images)

New! jQuery slideViewerPro 1.0

Thanks: Credits go to George Smith for his "inspiring" easing plugin and to Jörn Zaefferer for his toolTip plugin. Thanks to the jQuery discussion list participants, to John Resig and the team behind jQuery.

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