(function($){//conflict-prevention wrapper, should prevent conflicts with other js libraries
//---Make this into a plug-in with optional parameters--//
$.fn.smfJqslideshow = function (xmlFile, options){
var settings = $.extend({
playInterval: 5000,
playerBgColor: '#f7d0ff',
thumbsBorderColor: '#883598',
slideHeight: 300,
slideWidth: 300,
controlBgColor: '#883598',
controlHeight: 24,
controlImg: 'controls.gif',
prevBgWidth: 117,
prevBtnWidth: 45,
playWidth: 67,
nextBgWidth: 117,
nextBtnWidth: 67
},options||{});
//turn a few strings into integers so we can do math with them
var ulThumbsHeight = settings.slideHeight/3-2;
var imgThumbsHeight = settings.slideHeight/3-10;
var imgThumbsWidth = settings.slideWidth/3-10;
var capInitPos = settings.slideHeight+1;
var capWidth = settings.slideWidth-8;
var nextBgPos = settings.prevBgWidth+settings.playWidth;
var controlHeightOffset = settings.controlHeight+1
//---set up some functions so I don't have to keep repeating the same code
var parent = $(this).attr('id');//get the container as a variable to use in building css; allows us to have multiple instances of slideshow on the page by using parent->element rather than id's.
//shows captions, when they exist
function loadCaps(thumb){
var caption = thumb.attr('alt');
//This if else statement says to show the caption box if captions exist, hide it if they don't
if (caption) {
$('#'+parent+' .caption').text(caption).css('opacity',.6).height('auto').css('background','#fff');
}
else {
$('#'+parent+' .caption').text('').css('background','none');
}
//Move p.caption to the bottom of the main slide (p.caption is absolutely positioned).
var cap_ht = parseInt($('#'+parent+' .caption').height());
$('#'+parent+' .caption').css('top',capInitPos-cap_ht); //(height of slide) - (height of p.caption) = correct position for p.caption
}//end loadCaps
//Loads the active thumbnail, whether by clicking on it or by advancing the thumbnail strip, into the main slide
function thumbToMain(slide) {
var slideSrc = slide.attr('src');
$('#'+parent+' .slide').animate({opacity: 0.0},'','',function(){
$('#'+parent+' .slide').attr('src',slideSrc).animate({opacity: 1.0});
});
}//end thumbToMain
function thumbsLeft(currslide) {
$('#'+parent+' .thumbs').animate({marginLeft:-168},'','',function(){
$('#'+parent+' .thumbs').append(currslide).css('margin-left',0);
return false;
});
}//end thumbsLeft
//---Now the code that makes the slideshow run--//
//First, create the slideshow containers.
//CSS is inline for two reasons: 1) avoid an extra stylesheet and 2)some css properties need to be calculated via script. Not sure if there's a cleaner way to code this...
$(this).css({'float':'left','position':'absolute','overflow':'hidden','background':settings.playerBgColor,'margin':'0','width':settings.slideWidth+2}).html('![]()
');
//Next, use ajax to read the xml and populate the slideshow with images.
$.get(xmlFile,{},function(xml){
var mainimg = new Array();
var a = 0;//need to set up a loop because that's the only way IE can parse XML in jquery.
$('slides',xml).each(function(i){
var img = $(this).find('image').text();
var imgcaption = $(this).find('caption').text();
mainimg[a] = $(this).find('image').text();
$('#'+parent+' .thumbs').append('
');
a++;
});
$('#'+parent+' .slide').attr('src', 'slideshow/'+mainimg[1]);
});//end get xml
//Load thumbnails into main slide on click
$('#'+parent+' .thumbs img').live('click', function(){//we use the jquery live feature to ensure the click is always bound to thumbnails, even if they're generated after page load via ajax. Otherwise events only bind to elements that exist on page load.
loadCaps($(this));
thumbToMain($(this));
});//end thumbs click
//The 'Next' button advances thumbnails and main slide
$('#'+parent+' .next a').click(function(){
thumbsLeft($('#'+parent+' .thumbs li:first'));
loadCaps($('#'+parent+' .thumbs li:eq(2) img'));
thumbToMain($('#'+parent+' .thumbs li:eq(2) img'));
return false;//stop link from passing # to the browser
});//end next button actions
//Prev button goes back a slide
$('#'+parent+' .prev a').click(function(){
//assign the current last thumbnail to a variable
lastslide = $('#'+parent+' .thumbs li:last');
//slide thumbnails right
lastslide.remove();
$('#'+parent+' .thumbs').prepend(lastslide).css('margin-left',-167);
$('#'+parent+' .thumbs').animate({marginLeft:0});//end slide right
loadCaps($('#'+parent+' .thumbs li:eq(1) img'));
thumbToMain($('#'+parent+' .thumbs li:eq(1) img'));
return false;//stop link from passing # to the browser
});//end prev button actions
};//end plug-in wrapper
})(jQuery);//end conflict-prevention wrapper