Site index
Templates
Forum
Software
Links
Contact
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?
