<!DOCTYPE html PUBliC "-//W3C//DTD html 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>SliderViewer</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.slideviewer.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalone").slideView()
});
</script>
<style>
/*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;
}
</style>
</head>
<body>
<div id="mygalone" class="svw">
<ul>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="01.jpg" width="300px" height="300px"/></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="02.jpg" width="300px" height="300px"/></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="03.jpg" width="300px" height="300px"/></li>
<li><img alt="abc defrg thysu ooip jkifbtg fff" src="04.jpg" width="300px" height="300px"/></li>
</ul>
</div>
</body>
</html>
