Ciao, ho tutti, ho scaricato lo script Easy Slider,e l'ho anche caricato sul mio sito internet, però volevo fare una cosa particolare, cioè invece di andare avante nelle foto cliccando su NEXT, volevo farlo cliccando direttamente sulla foto, è possibile? e se si come?? io avevo pensato di associare NEXT al DIV che contiene le foto è fattibile? ecco il codice del javascript:
codice:
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
orientation: '', // 'vertical' is optional;
speed: 800
};
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);
e qeusta è la parte che sta nel pagina html:
codice:
<style>
/* Easy Slider */
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
/*
define width and height of container element and list item (slide)
list items must be the same size as the slider area
*/
width:490px;
height:375px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
</style>
<h1>Foto</h1>
<div id="slider">
<ul>
[*][img]ultimerealizzazioni/01.jpg[/img]</a>
[*][img]ultimerealizzazioni/02.jpg[/img]</a>
[*][img]ultimerealizzazioni/03.jpg[/img]</a>
[*][img]ultimerealizzazioni/04.jpg[/img]</a>
[*][img]ultimerealizzazioni/05.jpg[/img]</a> [*][img]ultimerealizzazioni/06.jpg[/img]</a>
[/list]
</div>
</script>
grazia tutti!