/**-----------------------------------
Title: Simple Javascript XML Slideshow
Description: This file is created for use with the this product hosted on codecanyon.net
Version: 1.1
Last Updated: July 28, 2010
Author: Israel Jernigan
Author URI: http://israeljernigan.com/
Usage: This file is only authorized to be used in accordance with the licensing agreements setup on the Envato Networks websites. These licensing options can be found here, http://codecanyon.net/wiki/support/legal-terms/licensing-terms/ Any other use is not permitted unless otherwise stated by direct permission of the author or this specific file has been purchased for use.
How To Buy A License: http://codecanyon.net/wiki/buying/howto-buying/licensing/
-----------------------------------*/
//
-SETTINGS
At the bottom of this file are the default options that can be used for this file, you can change the global variables there.
And there are brief descriptions of what they do next to each. The xml file has more expnaded descriptions and examples.
Example of how to change the settings with html:
$('.SliderContainer').simple_js_xml_slideshow({
container: ".sjxs_sliding_content",
xml_url: "js/simple_jxs/simplexmlslideshow.xml",
transition_time: 3,
transition_speed: 750,
transition: 'fadeIn',
show_loading: 'true',
random_start: 'false',
stop_on_click: 'true',
include_prev_next: 'true',
picket_fence_cnt: '15',
prev_button: '<',
next_button: '>'
});
If there are settings in the xml file, they will take presidence over the javascript settings in all cases. It goes like this:
1. XML
2. Javascript
3. Defaults
--------------------------------------**/
/**-----------------------------------
XML SETUP
Instructions for how to change the effects, speed, duration of the images is documented in the xml file itself.
simplexmlslideshow.xml
If you want to use php to dynamically create your xml file, I've included a script that easily does this for you.
All you have to do is include it in a folder of images you want to use.
Just follow the instructions in the included simplexmlslideshow.xml.php file.
--------------------------------------**/
/**-----------------------------------
Coming Features
- Prev and Next button options
- Pause slideshow/timer on rollover
- Better integration of text with the images (Like titles or descriptions on top of the images.)
- More easing transitions
--------------------------------------**/
/**-----------------------------------
NO NEED TO EDIT BELOW THIS LINE
--------------------------------------**/
simple_js_xml_slideshow: function(options) {
this.sjxs_xml;
this.sjxs_object = new Array();
var self = this;
this.width;
this.height;
this.slideTotCount = 0;
this.curSlideNum = 0;
var nextSlideNum = 1;
this.slideStart = false;
var $t = $(this);
this.daddy = $t.attr('class');
this.settings = $.extend({}, $.fn.simple_js_xml_slideshow.defaults, options);
this.startTimer = new Timer();
var clickOn = true;
var buttonClicked = '';
this.sjxs_init = function(){
//Set width
this.width = $t.find(this.settings.container).width();
//Set height
this.height = $t.find(this.settings.container).height();
//insert html needed
this.loadHtml();
//display load animation
this.loadingImage();
//get xml file
$.ajax({
type: "GET",
url: this.settings.xml_url,
dataType: "xml",
success: function(xml) {
this.sjxs_xml = xml;
$(this.sjxs_xml).find('image').each(function(i,val) {
var image = $(this);
var content = {
'content':image.text()
};
if(typeof(image.attr('href')) != 'undefined'){
content.href = image.attr('href');
}
if(typeof(image.attr('title')) != 'undefined'){
content.title = image.attr('title');
}else{
content.title = ''; //will never be false, just empty
}
self.sjxs_object.push(content);
});
var gal = $(this.sjxs_xml).find('gallery');
if(typeof(gal.attr('transition_time')) != 'undefined'){
self.settings.transition_time = parseInt(gal.attr('transition_time'));
}
self.settings.transition_time = (parseInt(self.settings.transition_time)*1000);//convert to milliseconds
if(typeof(gal.attr('transition')) != 'undefined'){
self.settings.transition = gal.attr('transition');
}
self.settings.transition_speed = parseInt(self.settings.transition_speed);
if(typeof(gal.attr('transition_speed')) != 'undefined'){
self.settings.transition_speed = (parseInt(gal.attr('transition_speed')));
}
if(typeof(gal.attr('show_loading')) != 'undefined'){
self.settings.show_loading = gal.attr('show_loading');
}
if(typeof(gal.attr('random_start')) != 'undefined'){
self.settings.random_start = gal.attr('random_start');
}
if(typeof(gal.attr('include_prev_next')) != 'undefined'){
self.settings.include_prev_next = gal.attr('include_prev_next');
}
if(typeof(gal.attr('prev_button')) != 'undefined'){
self.settings.prev_button = gal.attr('prev_button');
}
if(typeof(gal.attr('next_button')) != 'undefined'){
self.settings.next_button = gal.attr('next_button');
}
if(typeof(gal.attr('picket_fence_cnt')) != 'undefined'){
self.settings.picket_fence_cnt = gal.attr('picket_fence_cnt');
}
if(self.settings.transition_time > 0){
self.startTimer.interval(self.settings.transition_time).addCallback(self.timerControl);
}
//file loaded
//remove load animation, then trigger starting function
self.loadingImage();
self.slideTotCount = self.sjxs_object.length;
if(self.settings.random_start == 'true'){
self.curSlideNum = Math.floor(Math.random()*self.slideTotCount-1);
if(self.curSlideNum<0){ this.curSlideNum = self.slideTotCount-1; nextSlideNum = 0;}
}
self.sjxs_run_setup();
}
}); //close $.ajax(
};
this.loadingImage = function(){
//$(".sjxs_group_container").append('');
//$(".sjxs_status").removeClass('sjxs_hide');
if(self.settings.show_loading == 'false'){
$t.find(self.settings.container+" .sjxs_status").addClass('sjxs_hide');
return;
}
if($t.find(self.settings.container+" .sjxs_status").hasClass('sjxs_hide')){
$t.find(self.settings.container+" .sjxs_status").removeClass('sjxs_hide');
}else{
$t.find(self.settings.container+" .sjxs_status").addClass('sjxs_hide');
}
};
/*
Setup html needed
*/
this.loadHtml = function(){
if(self.settings.include_prev_next == 'false'){
$t.find(self.settings.container).append('');
}else{
$t.find(self.settings.container).append(''+self.settings.prev_button+''+self.settings.next_button+'');
$t.find(self.settings.container + ' .sjxs_prev').click(function(){
self.clickPrev();
});
$t.find(self.settings.container + ' .sjxs_next').click(function(){
self.clickNext();
});
}
};
this.sjxs_init();
/*
This is triggered once xml file is loaded
It initializes/starts the slideshow process
*/
this.sjxs_run_setup = function(){
$t.find(self.settings.container+" .sjxs_group_container").append('');
//cycle through slides
self.slideNext();
};
/*
Controls the prev and next buttons
*/
this.clickNext = function(){
if(clickOn){
buttonClicked = 'next';
self.curSlideNum = self.curSlideNum;
//cycle through slides
self.timerControl();
if(self.settings.stop_on_click == 'true'){
self.startTimer.stop();
}
}
};
this.clickPrev = function(){
if(clickOn){
buttonClicked = 'prev';
if(self.curSlideNum == 0){
self.curSlideNum = self.slideTotCount-2;
}else{
self.curSlideNum = self.curSlideNum-2;
}
//cycle through slides
self.timerControl();
if(self.settings.stop_on_click == 'true'){
self.startTimer.stop();
}
}
};
this.slideNext = function(){
if(!self.slideStart){//first one
var slideHtml = '![]()
![]()
![]()
![]()
