needed
scriptaculous :
You needed prototypejs and scriptaculous.
For an easy integration of this script, i advise you to read my article : load ajax with google.
Now write this code :<script src='path_to_your_js/class.horinaja.scriptaculous.pro.js' type='text/javascript'></script>
<link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" /><script src='path_to_your_js/class.horinaja.jquery.pro.js' type='text/javascript'></script>
<link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />integration
Horinaja needed a class "horinaja" associate to a div, and a ul li liste :<div id="demo" class="horinaja">
<ul>
<li><!-- content 1 --></li>
<li><!-- content 2 --></li>
...
</ul>
</div>
scriptaculous
Init Horinaja :<script>
document.observe("dom:loaded", function() {
new Horinaja('demo',0.3,4,true,true,10);
});
</script>jQuery
Init Horinaja :<script> $(document).ready(function(){
$('#id').Horinaja({capture:'id',delai:0.5,duree:3,leftright:true,distanceLR:150,pagination:true});
});
</script>option
You can use option :
scriptaculous
new Horinaja(id,delay,duration,pagination,leftright,distance);- id is the name of your slider (a div, add to this div class="horinaja")
- dela y is time to slide next (second)
- duration is delay for go to next (second)
- pagination is if you want pagination (true or false)
- leftright is if you want left and right button navigation (true or false)
- distance is a distance at button to captured div (in pixel, don't use negative value)
jQuery
$(div#id).Horinaja({capture:id,delai:0.3,duree:4,pagination:true});- id is the name of your slider (a div, add to this div class="horinaja")
- delai is time to slide next (second) (default : 0.3)
- duree is delai for go to next (second) (defaut : 4)
- leftright is if you want left and right button navigation (true or false)(defaut : true)
- distanceLR is a distance at button to captured div (in pixel, don't use negative value)(default : 10)
- pagination is if you want pagination (true or false) (default : true)
- if you are ok with default value you can write this :
$(document).ready(function(){
$('#demo').Horinaja({capture:'demo'});
});
ps: i'm sorry for my bad english :/, if you see a language bug, help me, send me a mail (davidmassianirennes@gmail.com).CSS
access :
access to left and right button :
important : don't use left, top, and position/* for the left button : */
.horinaja .horinaja_leftright span.horinaja_left a{}
/* for the right button : */
.horinaja .horinaja_leftright span.horinaja_right a{}
access to captured div;.horinaja .capture{}access to your list :.horinaja .horinaja_moved{}you can use a specific class for every all <li> if you want.horinaja .horinaja_moved li{}access to pagination :.horinaja .horinaja_pagination{}access to pagination's button.horinaja .horinaja_pagination li a{}access to active button of pagination :.horinaja .horinaja_pagination li.active a{}work on left and right button :
important : you must define width for span left right button !!!!.horinaja .horinaja_leftright span{width:50px;margin-top: 250px;}
© Massiani David 2009
horinaja by david massiani is licensed under a Creative Commons Attribution-No Derivative Works 3.0 United States License.
Based on a work at www.davidmassiani.com. prototype scriptaculous jQuery
horinaja by david massiani is licensed under a Creative Commons Attribution-No Derivative Works 3.0 United States License.
Based on a work at www.davidmassiani.com. prototype scriptaculous jQuery