$(document).ready(function() {
//
//// SET UP THUMBNAIL CAROUSEL
//
// Dynamically set the width of the carousel panel (the sliding container),
// based on the number of 'pages' of thumbnails there are for the selected album.
$('.carousel .carousel-panel').width($('.carousel .thumbnails').width() * $('.carousel .thumbnails').length);
// Assign these elements to variables, just for convenience (multiple use).
var $prev = $('.carousel .carousel-previous');
var $next = $('.carousel .carousel-next');
// Set up the carousel scroller.
$('.carousel').serialScroll({
target:'.carousel-viewport',
items:'ul', //selector to the items ( relative to the matched elements, '.carousel' in this case )
prev:'a.carousel-previous',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
next:'a.carousel-next',//selector to the 'next' button (absolute too)
event:'click',//on which event to react (click is the default, you probably won't need to specify it)
duration:500,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
start: 0, //on which element (index) to begin ( 0 is the default, redundant in this case )
force:true, //force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
cycle:false,//cycle endlessly ( constant velocity, true is the default )
jump:false, //if true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
lazy:false,//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
constant:true,
onBefore:function( e, elem, $pane, $items, pos ){
// This handles updates of the carousel 'status' information,
// paging and previous/next controls.
$('.carousel .carousel-page').text(pos + 1);
if (pos == 0) {
$prev.addClass("disabled");
} else {
$prev.removeClass("disabled");
}
if (pos + 1 == $items.length) {
$next.addClass("disabled");
} else {
$next.removeClass("disabled");
}
}
});
});
$(document).ready(function() {
//
//// COSMETICS
//
// Add a faux rollover class to each thumbnail LI element.
$('.thumbnails li')
.hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
//
//// SET UP THUMBNAIL PREVIEW POPUPS
//
var $container = $("#album-navigation");
$container.append('');
var $previews = $container.children('.previews');
var $preview;
$('.thumbnails li')
.each(function(i){
$(this).hover(
function() {
// Retrieve the thumbnail image info, from the link's rel attribute.
var img = $(this).children("a").attr("rel");
img = img.split("|");
// Set up the preview container.
//$container.append('');
$previews.html('');
$preview = $previews.children(".preview");
// Insert and display the preview image.
$preview.append('
');
// Following is a cheap hack; Firefox seems to have display issues
// when using animated fade in over Flash content.
// Needed to shorten the reveal duration.
if (navigator.userAgent.indexOf("Firefox") != -1) {
$preview.fadeIn(10);
}
else {
$preview.fadeIn(500);
}
},
function() {
// Tear it all down.
$previews.empty();
}
);// end .hover()
$(this).click(function(){
// Tear it all down.
$previews.empty();
});
$(this).mousemove(function(event) {
// Add the mouse handler, to position the preview 'tooltip' fashion, off the mouse pointer.
var gap = 12;
var offset = $container.offset();
var $preview = $previews.children(".preview"); // this shouldn't be required, but prevents an IE6 JS error (probably due to event ordering).
var left = event.pageX - $preview.width() - gap;
var top = event.pageY + gap;
$preview.css({left: left - offset.left, top: top - offset.top});
});// end .mousemove()
});
});
//
//// SET UP INTERACTION WITH SLIDESHOWPRO
//
/**
* Toggle ssp the display mode (auto/manual playback).
*/
function sspToggleDisplayMode() {
var mode = thisMovie("album_ssp").sspToggleDisplayMode();
$('#ssp-autoplay span').text(mode);
if (mode =="Auto" || mode == "auto") {
$('#ssp-autoplay').addClass("auto");
$('#ssp-autoplay').removeClass("manual");
}
else {
$('#ssp-autoplay').addClass("manual");
$('#ssp-autoplay').removeClass("auto");
}
}
function sspUpdateDisplayMode() {
var mode = thisMovie("album_ssp").sspDisplayMode();
$('#ssp-autoplay span').text(mode);
if (mode =="Auto" || mode == "auto") {
$('#ssp-autoplay').addClass("auto");
$('#ssp-autoplay').removeClass("manual");
}
else {
$('#ssp-autoplay').addClass("manual");
$('#ssp-autoplay').removeClass("auto");
}
}
/**
* Notification, from flash ssp, that image has been changed.
*/
function sspImageUpdated(number) {
$("*").trigger('sspImageSelected', [number - 1]);
}
/**
* Load specified image.
*/
function sspLoadImage(index) {
thisMovie("album_ssp").sspLoadImage(index);
}
/**
* Load previous image.
*/
function sspPreviousImage() {
thisMovie("album_ssp").sspPreviousImage();
}
/**
* Load next image.
*/
function sspNextImage() {
thisMovie("album_ssp").sspNextImage();
}
/**
* Utility function to retrieve specified 'movie' object, by css id.
*/
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
function initSlideShow(path) {
// Setup Flash, using SWFObject.
var so = new SWFObject("/ssp/album.swf", "album_ssp", "440", "440", "9");
so.addVariable("xmlfile", path);
so.addParam("wmode", "transparent");
so.useExpressInstall("/swfobject/expressinstall.swf");
so.write("album-display");
// swfobject.embedSWF("/ssp/album.swf", "album-display", "440", "440", "9", "/swfobject/expressInstall.swf", {xmlfile:"{exp:ssp_director:album_xml album='{segment_3}'}"}, {wmode:"transparent"});
// Initialise slideshow-related behaviour of thumbnail links
// This *ONLY* sets up the click- and response-based behaviour
// as relates to the interaction with the ssp component.
$("ul.thumbnails li a")
// Remove hardcoded link behaviour on all thumbnail links.
.attr("href", "#")
.each(function(i) {
// Set new onclick action on each link to load image.
$(this).bind("click", {index: i}, function(event) {
//event.preventDefault();
sspLoadImage(event.data.index);
//return false;
});
// Set up each link to respond to changes in ssp display.
$(this).bind('sspImageSelected', {index: i}, function(event, index) {
$(this).parent().removeClass('active');
if (event.data.index == index) {
$(this).parent().addClass('active');
}
});
});
// Updates the auto-playback toggle switch.
$('#ssp-autoplay')
.bind('sspImageSelected', sspUpdateDisplayMode);
// Updates the current image information display.
$('#ssp-image')
.bind('sspImageSelected', function(event, index) {
$(this).text(index + 1);
});
}
/*
$(document).ready(function() {
// Setup Flash, using SWFObject.
var so = new SWFObject("/ssp/album.swf", "album_ssp", "440", "440", "9");
so.addVariable("xmlfile", "{exp:ssp_director:album_xml album='{segment_3}'}");
so.addParam("wmode", "transparent");
so.useExpressInstall("/swfobject/expressinstall.swf");
so.write("album-display");
// swfobject.embedSWF("/ssp/album.swf", "album-display", "440", "440", "9", "/swfobject/expressInstall.swf", {xmlfile:"{exp:ssp_director:album_xml album='{segment_3}'}"}, {wmode:"transparent"});
// Initialise slideshow-related behaviour of thumbnail links
// This *ONLY* sets up the click- and response-based behaviour
// as relates to the interaction with the ssp component.
$("ul.thumbnails li a")
// Remove hardcoded link behaviour on all thumbnail links.
.attr("href", "#")
.each(function(i) {
// Set new onclick action on each link to load image.
$(this).bind("click", {index: i}, function(event) {
//event.preventDefault();
sspLoadImage(event.data.index);
//return false;
});
// Set up each link to respond to changes in ssp display.
$(this).bind('sspImageSelected', {index: i}, function(event, index) {
$(this).parent().removeClass('active');
if (event.data.index == index) {
$(this).parent().addClass('active');
}
});
});
// Updates the auto-playback toggle switch.
$('#ssp-autoplay')
.bind('sspImageSelected', sspUpdateDisplayMode);
// Updates the current image information display.
$('#ssp-image')
.bind('sspImageSelected', function(event, index) {
$(this).text(index + 1);
});
});
*/