/*
* MSN SlideShow V 1.0
*
* Massive amount of features needed, but working.
*/
/* ------------------------------------ START OF CONFIG ------------------------------------ */
/*
* Should point to images you want to use as buttons (remember to inklude paths eg. images/some_image.png
*/
var playButton = 'images/play.png';
var pauseButton = 'images/pause.png';
var prevButton = 'images/slide_left.gif';
var nextButton = 'images/slide_right.gif';
/*
* Just helpfull texts when hovering the buttons
*/
var playButtonText = 'Start slideshow';
var pauseButtonText = 'Sæt slideshow på pause';
var prevButtonText = 'Forrige billede';
var nextButtonText = 'Næste billede';
var controlsWidth = '150px'; //Width of the controlselement - could be defined with a px or %
//If set to true, all buttons must have a [filename]_hover[.ext] file present, eg button.gif, must have a button_hover.gif
var useHoverOnButton = false;
//Currently there is only design 1, and default, but more to come (changes the layout and design of the controls element)
var controlsLayout = false;
/*
* Options for the slideshow
*
* (Unless otherwise specified, times are in milliseconds)
*
* Effekts could be:
* blindX
* blindY
* blindZ
* cover
* curtainX
* curtainY
* fade
* fadeZoom
* growX
* growY
* none
* scrollUp
* scrollDown
* scrollLeft
* scrollRight
* scrollHorz
* scrollVert
* shuffle
* slideX
* slideY
* toss
* turnUp
* turnDown
* turnLeft
* turnRight
* uncover
* wipe
* zoom
*/
var slideshowImageShowTime = 4000; //speed of slideshow, time the image is shown before effect is applied
var slideshowFadingSpeed = 2500; //speed of effect
var slideshowEffekt = 'fade'; //effekt, se above
var slideshowControlBGColor = '#d3d3d3'; //the bgcolor of the opaque element behind the buttons
/*
* Some data would be nice, so lets define some places to get it from
*
* (NB: Please note that the pager expects the following class in the css: #nav a, #nav a.activeSlide, #nav a:focus)
*/
var xmlFile = 'xml/forside.xml';
var cssFile = 'css/slideshow.css';
/* ------------------------------------ END OF CONFIG ------------------------------------ */
var slideshow; //used to control the slideshow internally, so please dont touch (unless you really want to ? :) )
var containerHeight = 0;
/*
* DEMO - This is how you should use it by default
*
* You could remove the line below, and control when and where you want to start the show yourself in your own script.
* If you just want to use the defaults, then create this in your HTML
*
*
*
* and include this file, and it should all work out-of-the-box
*
* (NB: Be aware that unfortunatly it is still needed for you to fill the height of the div, or the slideshow will not work.)
*/
$(document).ready(function()
{
slideShow('mediacontainer');
});
/*
* Helper function, so it would be easier to change and extend later on
*/
function slideShow(containerElement)
{
//First get the heigth for internal usage.
containerHeight = $("#"+containerElement).height();
createSlideBoard(containerElement);
populateFromXml('slideshow', xmlFile);
if(useHoverOnButton)
{
generateHoverEffekt();
}
startUp();
}
function generateHoverEffekt()
{
$('#controlscontainer .button').each(
function(index, element)
{
$(element).bind("mouseover", function()
{
var oldsrc = $(this).attr("src");
var name = oldsrc.substring(0, oldsrc.length-4);
var ext = oldsrc.substring(oldsrc.length-4);
$(element).attr("src", name+'_hover'+ext);
})
$(element).bind("mouseout", function()
{
var oldsrc = $(this).attr("src");
var original = oldsrc.replace("_hover","");
$(element).attr("src", original);
})
}
)
}
/*
* Funtion for drawing the controlelements (play/pause/next/prev) and the actual container
* for images.
*/
function createSlideBoard(container)
{
if(controlsLayout == 1)
{
var leftRightSpacing = 100;
var controlHtml =
''+
'
'+
'
'+
'
'+
'
'+
' '+
'
'+
'
'+
'';
}
else if(controlsLayout == 2)
{
var leftRightSpacing = 100;
var controlHtml =
''+
'
'+
'';
//make it empty first
//$("#"+container).html('')
}
$("#"+container).append(controlHtml);
}
/*
* Function for actually starting the cycle, this would later on be rewritten for better config
*/
function startUp()
{
/*
* Removed: before: slideChange,
*/
slideshow = $('.slideshow').cycle({
fx: slideshowEffekt,
timeout: slideshowImageShowTime, //hvor længe vises billedet (millisekunder)
speed: slideshowFadingSpeed, //hvor hurtig skal der fades (millisekunder)
pagerClick: pagerClickEvent,
pager: '#nav',
delay: slideshowFadingSpeed
});
}
/*
* For now this is the only way of dynamically population the slideshow, more function could come.
*/
function populateFromXml(slideShowElement, xmlFile)
{
$("#"+slideShowElement).html(''); //make sure its empty first
//Hacking - Finding height - Width
var newHeight = $("#mediacontainer").height();
var newWidth = $("#mediacontainer").width();
var counter = 1;
$.ajax({
type: "GET",
url: xmlFile,
dataType: "xml",
async: false,
cache: false,
success: function(xml)
{
$(xml).find('item').each(function()
{
var path = $(this).find('path').text();
currentStyle = (counter==1) ? 'display:block;' : 'display:none;'
$("#"+slideShowElement).append("");
counter++;
});
}
});
//stuffing the width of the controlsArea, based on the amount of pictures
var dynWidth = (counter * 30)+30;
$("#innerControls").css("width",dynWidth+"px");
}
/*
* Controlfunction for pausing / resuming the slideshow.
*/
function startstopSlideShow(parent)
{
if(controlsLayout==1)
{
}
else
{
var current = parent.attr("id");
if(current == 'play_button')
{
$('#pause_button').show();
$('#play_button').hide();
slideshow.cycle('resume');
}
else
{
$('#pause_button').hide();
$('#play_button').show();
slideshow.cycle('pause');
}
}
}
function pagerClickEvent()
{
if(controlsLayout==1)
{
slideshow.cycle('pause');
}
else
{
}
}
/*
* Controlfunction for changing to the previous image in the slideshow
*/
function prevSlide()
{
if(controlsLayout==1)
{
slideshow.cycle('prev');
slideshow.cycle('toggle');
}
else
{
slideshow.cycle('prev');
}
}
/*
* Controlfunction for changing to the next image in the slideshow
*/
function nextSlide()
{
if(controlsLayout==1)
{
slideshow.cycle('next');
slideshow.cycle('toggle');
}
else
{
slideshow.cycle('next');
}
}
function slideChange(currSlideElement, nextSlideElement, opts)
{
//Tested ok..
var nextOne = opts.nextSlide + 1; //we are not using the zero-based approch :)
if(currSlideElement.id != nextSlideElement.id)
{
$('.slideshow img').each(
function(index, element)
{
var temp = 'slide_' + ($(element).attr("id"));
$("#"+temp).attr("class", "thumbs_unselected");
}
)
//$('#slide_'+nextOne).attr("class","thumbs_selected")
$('#slide_'+nextOne).removeAttr("class");
$('#slide_'+nextOne).attr("class","thumbs_selected")
}
}
'+
' 
'+
' '+
'