Home
Hello, I'm French, so it's not easy for me. So I use Google Translation :)
In fact, I started with this tutorial: http://cssglobe.com/lab/easyslider/02.html
Everything is given, code, demo etc. ... But since I have to adapt, and that's exactly what I'm looking, I must make some changes. [list]
[*] An animation automatically scroll every x seconds.
[*] When you get to the last frame, it returns to the first and vice versa.
[*] Therefore, the two arrows are always visible regardless of the current image. (Currently, if one is to the first image, "Previous" is hidden, ditto for "Next" when you're at the end). [/ list]
I've managed to replace text with images of arrows. I found a few rows to be deleted to reveal the arrows, but it works only in the beginning when we return to an image, it disappears ...
I leave you my code:
Someone can help me to make what I want ? I don't know Javascript... Thanks so much for your help ;)
In fact, I started with this tutorial: http://cssglobe.com/lab/easyslider/02.html
Everything is given, code, demo etc. ... But since I have to adapt, and that's exactly what I'm looking, I must make some changes. [list]
[*] An animation automatically scroll every x seconds.
[*] When you get to the last frame, it returns to the first and vice versa.
[*] Therefore, the two arrows are always visible regardless of the current image. (Currently, if one is to the first image, "Previous" is hidden, ditto for "Next" when you're at the end). [/ list]
I've managed to replace text with images of arrows. I found a few rows to be deleted to reveal the arrows, but it works only in the beginning when we return to an image, it disappears ...
I leave you my code:
- HTML:
- Code:
<div id="slider">
<ul>
<li><img src="img/img1.png" /></li>
<li><img src="img/img2.png" /></li>
<li><img src="img/img3.png" /></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#slider").easySlider({
orientation:'vertical'
});
});
</script>
- CSS:
- Code:
#slider {
position: absolute;
top: 30%;
left: 5%;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li {
width:228px;
height:331px;
overflow:hidden;
}
- Javascript:
- Code:
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '<img src="img/flecheh.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 10%"/>',
nextId: 'nextBtn',
nextText: '<img src="img/flecheb.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 13%"/>',
orientation: '', // 'vertical' is optional;
speed: 2000
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var s = $("li", obj).length;
var w = obj.width();
var h = obj.height();
var ts = s-1;
var t = 0;
var vertical = (options.orientation == 'vertical');
$("ul", obj).css('width',s*w);
if(!vertical) $("li", obj).css('float','left');
$(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
$("a","#"+options.prevId).hide();
$("a","#"+options.nextId).hide();
$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});
function animate(dir){
if(dir == "next"){
t = (t>=ts) ? ts : t+1;
} else {
t = (t<=0) ? 0 : t-1;
};
if(!vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
options.speed
);
}
};
if(s>1) $("a","#"+options.nextId).fadeIn();
});
};
})(jQuery);
Someone can help me to make what I want ? I don't know Javascript... Thanks so much for your help ;)
