Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074

    [JQuery] problema con slide

    Ho un Js che mi consente l'avanzamento tra una serie di slide, sia in modo sequenziale, sia in modo diretto, cliccando su una specifica icona.
    Questo è il JS:
    Codice PHP:
    (function($) {
        $.
    fn.loopedSlider = function(options) {
            
        var 
    defaults = {            
            
    container'.container',
            
    slides'.slides',
            
    pagination'.pagination',
            
    containerClickfalse// Click container for next slide
            
    autoStart0// Set to positive number for auto start and interval time
            
    restart0// Set to positive number for restart and restart time
            
    slidespeed300// Speed of slide animation
            
    fadespeed300// Speed of fade animation
            
    autoHeightfalse // Set to positive number for auto height and animation speed
        
    };
            
        
    this.each(function() {
            
            var 
    obj = $(this);
            var 
    = $.extend(defaultsoptions);
            var 
    pagination = $(o.pagination+' li a',obj);
            var 
    0;
            var 
    1;
            var 
    = $(o.slides,obj).children().size();
            var 
    = $(o.slides,obj).children().outerWidth();
            var 
    0;
            var 
    false;
            var 
    0;
            var 
    interval=0;
            var 
    restart=0;
            
            $(
    o.slides,obj).css({width:(s*w)});
            
            $(
    o.slides,obj).children().each(function(){
                $(
    this).css({position:'absolute',left:p,display:'block'});
                
    p=p+w;
            });
            
            $(
    pagination,obj).each(function(){
                
    n=n+1;
                $(
    this).attr('rel',n);
                $(
    pagination.eq(0),obj).parent().addClass('active');
            });
            
            $(
    o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
            
            if (
    s>3) {
                $(
    o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
            }
            
            if(
    o.autoHeight){autoHeight(t);}
            
            $(
    '.next',obj).click(function(){
                if(
    u===false) {
                    
    animate('next',true);
                    if(
    o.autoStart){
                        if (
    o.restart) {autoStart();}
                        else {
    clearInterval(sliderIntervalID);}
                    }
                } return 
    false;
            });
            
            $(
    '.previous',obj).click(function(){
                if(
    u===false) {    
                    
    animate('prev',true);
                    if(
    o.autoStart){
                        if (
    o.restart) {autoStart();}
                        else {
    clearInterval(sliderIntervalID);}
                    }
                } return 
    false;
            });
            
            if (
    o.containerClick) {
                $(
    o.container ,obj).click(function(){
                    if(
    u===false) {
                        
    animate('next',true);
                        if(
    o.autoStart){
                            if (
    o.restart) {autoStart();}
                            else {
    clearInterval(sliderIntervalID);}
                        }
                    } return 
    false;
                });
            }
            
            $(
    pagination,obj).click(function(){
                if ($(
    this).parent().hasClass('active')) {return false;}
                else {
                    
    = $(this).attr('rel');
                    $(
    pagination,obj).parent().siblings().removeClass('active');
                    $(
    this).parent().addClass('active');
                    
    animate('fade',t);
                    if(
    o.autoStart){
                        if (
    o.restart) {autoStart();}
                        else {
    clearInterval(sliderIntervalID);}
                    }
                } return 
    false;
            });
        
            if (
    o.autoStart) {
                
    sliderIntervalID setInterval(function(){
                    if(
    u===false) {animate('next',true);}
                }, 
    o.autoStart);
                function 
    autoStart() {
                    if (
    o.restart) {
                    
    clearInterval(sliderIntervalID);
                    
    clearInterval(interval);
                    
    clearTimeout(restart);
                        
    restart setTimeout(function() {
                            
    interval setInterval(    function(){
                                
    animate('next',true);
                            },
    o.autoStart);
                        },
    o.restart);
                    } else {
                        
    sliderIntervalID setInterval(function(){
                            if(
    u===false) {animate('next',true);}
                        },
    o.autoStart);
                    }
                };
            }
            
            function 
    current(t) {
                if(
    t===s+1){t=1;}
                if(
    t===0){t=s;}
                $(
    pagination,obj).parent().siblings().removeClass('active');
                $(
    pagination+'[rel="' + (t) + '"]',obj).parent().addClass('active');
            };
            
            function 
    autoHeight(t) {
                if(
    t===s+1){t=1;}
                if(
    t===0){t=s;}    
                var 
    getHeight = $(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();
                $(
    o.container,obj).animate({heightgetHeight},o.autoHeight);                    
            };        
            
            function 
    animate(dir,clicked){    
                
    true;    
                switch(
    dir){
                    case 
    'next':
                        
    t+1;
                        
    = (-(t*w-w));
                        
    current(t);
                        if(
    o.autoHeight){autoHeight(t);}
                        if(
    s<3){
                            if (
    t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                            if (
    t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                        }
                        $(
    o.slides,obj).animate({leftm}, o.slidespeed,function(){
                            if (
    t===s+1) {
                                
    1;
                                $(
    o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                            
                                $(
    o.slides,obj).children(':eq(0)').css({left0});
                                $(
    o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                
                            }
                            if (
    t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                            if (
    t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                            
    false;
                        });                    
                        break; 
                    case 
    'prev':
                        
    t-1;
                        
    = (-(t*w-w));
                        
    current(t);
                        if(
    o.autoHeight){autoHeight(t);}
                        if (
    s<3){
                            if(
    t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                            if(
    t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                        }
                        $(
    o.slides,obj).animate({leftm}, o.slidespeed,function(){
                            if (
    t===0) {
                                
    s;
                                $(
    o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                                $(
    o.slides,obj).css({left: -(s*w-w)});
                                $(
    o.slides,obj).children(':eq(0)').css({left:(s*w)});
                            }
                            if (
    t===) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                            if (
    t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                            
    false;
                        });
                        break;
                    case 
    'fade':
                        
    = [t]*1;
                        
    = (-(t*w-w));
                        
    current(t);
                        if(
    o.autoHeight){autoHeight(t);}
                        if (
    s<3){
                            if (
    t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                            if (
    t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                            if (
    t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                            if (
    t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                        }
                        $(
    o.slides,obj).animate({leftm}, o.slidespeed,function(){
                            if (
    t===s+1) {
                                
    1;
                                $(
    o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                            
                                $(
    o.slides,obj).children(':eq(0)').css({left0});
                                $(
    o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                
                            }
                            if (
    t===0) {
                                
    s;
                                $(
    o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                                $(
    o.slides,obj).css({left: -(s*w-w)});
                                $(
    o.slides,obj).children(':eq(0)').css({left:(s*w)});
                            }
                            if (
    t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                            if (
    t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                            if (
    t===) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                            if (
    t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                            
    false;
                        });
                        break; 
                    default:
                        break;
                    }                    
                };
            }); 
        };
    })(
    jQuery); 
    Originariamente, lo script prevedeva che il passaggio da uno slide all'altro avvenisse con un effetto di scroll orizzontale, nel caso dell'avanzamento sequenziale, e con un effetto fade nel caso della selezione diretta. In pratica, cliccando sui pulsanti avanti ed indietro le slide scrollano verso destra o verso sinistra, mentre cliccando sulle icone relative a ciascuna slide il passaggio avveniva con una dissolvenza incrociata.
    A me serviva, invece, che anche in questo caso ci fosse uno scroll.
    Quindi, sono intervenuto sulla parte di codice del case fade.
    Sono in effetti riuscito ad avere l'effetto scroll orizzontale anche utilizzando i link diretti, ma con un limite, che non riesco proprio a valicare: le slide sui cui agisco, sono 9, ma se clicco sull'icona dell'ultima, la slide corrente scompare e non appare nulla, a meno che non lo faccia mentre mi trovo con la slide precedente (8) visualizzata. Stessa cosa, con la 1: se mi trovo sulla 2, la 1 appare, altrimenti no.
    Non riesco proprio a venirne a capo!
    Qualche help?
    metatad
    graphic & web design

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    up?
    metatad
    graphic & web design

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.