Registreren

[Topdancer]

Beste mede webmasters

Url: http://www.steven-solutions.nl/test/

op bovenstaande url vind je de website waar ik mee bezig ben.
De slider doet het zeer goed, alleen als je gaat kijken in FF dan zie je dat hij op een gegevend moment terug slide naar de eerste voorbeeld, in IE doet hij dit niet (je kunt dus zelf even testen).

jquery-1.3.2.js (code is te lang dus download als je wilt)

Code: Alles selecteren

http://www.steven-solutions.nl/test/js/jquery-1.3.2.js


http://www.steven-solutions.nl/test/js/xmlSlider.js (downloaden of de code hier onder bekijken)

Code: Alles selecteren

(function($){
   $.fn.xmlSlider = function(options) {
      var
        defaults = {xmlFile:'',
                   width:500,
                   height:375,
                   speed:3000,
                   timeout:5000,
                   toggleBtn:false,
                   navBtn:false,
                   play:'Play',
                   pause:'Pause',
                   backward:'Backward',
                   forward:'Forward',
                   imageFail:''
                   },
        settings = $.extend({}, defaults, options),
        $this = this;       
        //get XML
      $.ajax({
      type: "GET",
      url: settings.xmlFile,
      dataType: "xml",
      async : false,
      error: function(){
         if(typeof(console) !== 'undefined' && console != null)
            console.log("Error: XML file URL is not valid!");
      },
      success: function(xml){
         //append divs

         $this.append("<div id='xsBg'></div><div id='xsCaptions'><ul></ul></div>").find('ul');
         $this.append("<div id='xsImages'><ul></ul></div>").find('ul');   
           //retrive info
           var xsUrl,xsLink,xsTitle,xsDesc;
         $(xml).find('info').each(function(){
            xsUrl  =  $(this).find('img').text();
            xsLink  =  $(this).find('link').text();
            xsTitle  =  $(this).find('title').text();
            xsDesc =  $(this).find('desc').text();
            $("#xsImages ul").append("<li><a href='"+xsLink+"' target='_blank'><img src='"+xsUrl+"' alt='"+xsTitle+"' /></a></li>");
            $("#xsCaptions ul").append("<li><a href='"+xsLink+"' target='_blank'><h1>"+xsTitle+"</h1></a><p>"+xsDesc+"</p></li>");
         });
         //begin
         var xsCount = $(xml).find('info').size();
         if($(xml).find('info').size() > 0){
            //declare some vars & bind events
            var   calcImg = settings.width*(xsCount-1)*-1,
               calcInfoHeight = $('#xsCaptions').height(),
               calcInfo = calcInfoHeight*(xsCount-1)*-1,
               RE = /^\d*$/,
               mouseOut = true,
               play = true;   
            //mouse events
            $this.mouseover(function(){mouseOut = false;});
            $this.mouseout(function(){mouseOut = true;});
            //decalre toggle
            if(settings.toggleBtn){
               $this.append('<div id="xsToggle">'+settings.pause+'</div>');
               $('#xsToggle').click(function(){
                  if(play){
                     play = false;
                     $('#xsToggle').html(settings.play);
                  }else{
                     play = true;
                     $('#xsToggle').html(settings.pause);
                  }
               });
            }
            //decalre left and right mav
            if(settings.navBtn){
               $this.append('<div id="xsLeft">'+settings.backward+'</div><div id="xsRight">'+settings.forward+'</div>');
               $('#xsLeft').html(settings.backward).click(function(){
                  play = false;
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == 0 ) ? calcImg : "+="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == 0  ) ? calcInfo : "+="+calcInfoHeight }, settings.speed,function(){
                     play = true;
                  });
               });
               $('#xsRight').html(settings.forward).click(function(){
                  play = false;
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed,function(){
                     play = true;
                  });
               });
            }
            //dress them up

            $('#xsCaptions,#xsBg').css({'top':(settings.height-calcInfoHeight)});
               $('#xsCaptions li,#xsBg').css({'height':calcInfoHeight});
               $('#xsImages ul').css({'width': settings.width*xsCount});
            //Determine the speed
            if(!RE.test(settings.timeout))
               settings.timeout = 3000;
            //movment
            var slideTheme = function(){               
               if(mouseOut && play){            
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed ,
                     function(){
                        setTimeout(slideTheme, settings.timeout);
                  });   
               }else
                  setTimeout(slideTheme, settings.timeout);
            };
            //just at the 1st time
            imgCount = 0;
            $("#xsImages img").load(function(){
              imgCount++;
              if (imgCount == xsCount)
                setTimeout(slideTheme, settings.timeout);
            }).error(function(){
               this.attr('src',settings.imageFail);
            });   
         }else
            if(typeof(console) !== 'undefined' && console != null)
               console.log("Error: XML file is not valid!");
      }
      });
   };
})(jQuery);


en in de index roep ik hem dus zo aan:

Code: Alles selecteren

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/xmlSlider.js" type="text/javascript"></script>


en in de <head> en </head> zet ik dit:

Code: Alles selecteren

<script type="text/javascript">
$(document).ready(function() {
   $("#slider").xmlSlider({'xmlFile':"sample.xml", 'width':890,'height':275 ,
                     'toggleBtn':false,
                     'navBtn':false,
                     'play':"<img src='images/play.png' alt='play'/>",
                     'pause':"<img src='images/pause.png' alt='pause'/>",
                     'backward':"<img src='images/backward.png' alt='backward'/>",
                     'forward':"<img src='images/forward.png' alt='forward'/>"
                    });
});
</script>


hij word dus in de div slider gezet.
Alles werkt verder ook met FF alleen in IE draait hij na het laatste plaatje dus niet terug naar begin, de tekst er onder wel maar de plaatjes niet.
Wie weet waar dit aan ligt?

[Topdancer]

Inmiddels opgelost door gewoon een ander slider te nemen.
Beetje raar gedoe, we hebben 1000 dingen geprobeerd en nog geen resultaat.

Linkjes werken dus ook niet meer.

[Theo]

Het is altijd frustrerend als een bestaand script niet zo werkt als je wilt.

De code is vaak ook te gecompliceerd om te kunnen zien waar het in zit. Elke scripter heeft zo zijn eigen werkwijze.