slideViewer (a jQuery image slider built on a single unordered list) 1.1
Download slideViewer 1.1 (october 6 2007)
What's this? slideViewer is a lightweight (1.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.
You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips.
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.2.1 and the jQuery easing.1.2 plugin to work:
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.2.js" type="text/javascript"></script>
<script src="jquery.slideviewer.1.1.js" type="text/javascript"></script>
* Optional enhanced toolTips: adding fancy toolTips to your galleries is pretty easy, you need the jquery.tooltip.js plugin developed by Jörn Zaefferer http://bassistance.de but please note that the toolTip plugin is NOT essential or a core component of slideViewer: it is just an option and slideViewer works well without. But be sure to import the plugin if you wish to use this option:
<script src="jquery.tooltip.js" type="text/javascript"></script>
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 {
background: #fff;
color: #000;
opacity: 0.85;
border: 5px solid #dedede;
}
#tooltip h3 {
font: normal 10px Verdana;
margin: 0;
padding: 6px 2px;
border: 0;
}
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?
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalone").slideView({toolTip: true})
});
</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, FF2, Opera 9
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>
bounceinout _and_ toolTips? (easeFunc: "easeInOutSine", easeTime: 1500, toolTip: true)
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,
toolTip: true
});
});
</script>
updates:
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)
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.
MMVII Gian Carlo Mingati | design and development for interactive media
