Thursday, December 30, 2010

[JQ] Sleek image slider. T4D SLIDER 1.0

2 comments
I haven't posted for a while because I've started working on a MMO browser game. The first thing that I "developed" is this jQeury slider . I'll use this slider in the game's shop, so the player will easily navigate through the items he can buy.


See the DEMO HERE. :)

How to use the slider:
1.In the page <header> you must include these:
<link href="http://piataterenuri.info/t4d/slider/styles/shop.css" rel="stylesheet" type="text/css" > 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 
<script type="text/javascript" src="http://piataterenuri.info/t4d/slider/scripts/shop.js"></script> 
<script type="text/javascript" src="http://piataterenuri.info/t4d/slider/scripts/disableselect.js"></script> 

2. In the body, where you want the slider to be place this code:
<div id="items"> 
<div id="ihold">        
<div class="item"> 
<img src="thesrclink.com" alt="This is a sample alt text!"/> 
<a href="buton-anchor-link" target="_blank"><div class="alink">Buton Text</div></a> 
</div>                 
</div> 
<div id="left" class="button"><img src="http://piataterenuri.info/t4d/slider/imagini/shop/arl.png"/></div> 
<div id="right" class="button"><img src="http://piataterenuri.info/t4d/slider/imagini/shop/arr.png"/></div> 
<div id="bgl"><img src="http://piataterenuri.info/t4d/slider/imagini/shop/bgl.png"></div> 
<div id="bgr"><img src="http://piataterenuri.info/t4d/slider/imagini/shop/bgr.png"></div> 
<div id="my-alt"></div>
</div>

--->
To add a new element to the slideshow, simply create a new <div class="item"> </div> inside the ihold area.
--->

That's all. If you want to change colors,buttons,paddings,images, etc, you must look through the shop.css file.
Note that this is the version 1.0 of the slider, and I may improve it in the future. :)
Soon, I'll also create some other nice-looking backgrounds for the slider .

Features:
->slides divs, so can be used to slide anything from images to videos,flash games, etc...
->slider accelerates as long as you hold the button pressed, so you can easily slide through a large number of divs
->images inside the slided elements have a customizable looking alt-text.

Feedback is wellcomed :D

2 comments:

  1. not working in Internet Explorere specially with the IE7 and IE9. Small problem with IE8 too!

    ReplyDelete
  2. Thanks for your comment. This is an old post of mine, if you're intrested just tell me and I'll create a new,better,cross-browser image slider :)

    ReplyDelete