swaminadhan
Joined: 14 Sep 2009
Posts: 84
|
 Posted: Thu Jul 01, 2010 1:44 pm Post subject: Image scrolling using jquery |
 |
|
Hi friends !
Normally we do have some instances to scroll multiple images. here is one way to keep the scrolling options of images using jquery.
In views add
<script>
<script src="/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/javascripts/jquery.slideviewer.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function()
{ $("div#mygaltwo").slideView({ easeFunc: "easeInOutBack", easeTime: 1200 }); });
</script>
From the above script we need to provide the div(mygaltwo) of the images and the slideview is the method presented in the above js files.
<style type="text/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; }
</style>
The above script is the our style of the div. Here we can write styles according to our requirement.But in the above beside the preload classes we need to provide the class name which is supposed to be invoked.
In the above example the "svw " is the class name
<div id="mygaltwo" class="svw">
<ul> <li><img width="350" height="200" alt="abc" src="/images/sarma_images/3.jpg" /></li>
<li><img width="350" height="200" alt="defrg" src="/images/sarma_images/4.jpg" /></li>
<!-- eccetera --> </ul>
</div>
Note: If any problem occured, then once disable the "defaults.js" and check it once
Thank you
swaminadhan. |
|
