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:
e qeusta è la parte che sta nel pagina html: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);
grazia tutti!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>

Rispondi quotando