/*
.:: P O S S I B L E A D D I T I O N S::.
ħħ Multi-size images ħħ
- Go through main images and see if they are all the same size.
- If not, find the largest
- Loop through all the images and add a margin left and right of equal amounts calculated from
the difference between the width of the (largest and the current image) / 2
- Image Pathing
- Change image root path - store just file name in css, and change background-image in jQuery on init();
*/
(function($) {
$.fn.jShowcase = function(settings) {
// Override default configuration
settings = $.extend({}, $.fn.jShowcase.defaults, settings);
// For each gallery found
return this.each(function(){
//alert("Poop");
$jShowcase = $(this).addClass('jShowcase'); // Set jShowcase class on object,
var handlers = {
thumbs : {
toggle : function(){
settings.thumbs.toggle.click(function(){
if (settings.thumbs.isOpen)
{
functions.thumbs.hide();
}
else
{
functions.thumbs.show();
}
});
},
change : function(){
counter = 0;
jQuery("a", settings.thumbs.inner).each(function(){
jQuery(this)
.css("opacity", "0.7")
.bind('click', { index:counter }, function(event){
jQuery(this).css("opacity", "1");
mouseOutIndex = settings.gotoImg.index;
functions.thumbs.change(this, event);
jQuery("a:eq("+mouseOutIndex+")", settings.thumbs.inner).triggerHandler("mouseout");
})
.bind('mouseover', { index:counter }, function(event){
if (event.data.index != settings.gotoImg.index){
jQuery(this).stop().dequeue().animate({"opacity":1},350);
}
})
.bind('mouseout', { index:counter }, function(event){
if (event.data.index != settings.gotoImg.index){
jQuery(this).stop().dequeue().animate({"opacity":0.7},350);
}
});
counter++;
});
settings.count = counter;
},
left : function(){
jQuery(settings.thumbs.left)
.mouseover(function(){
settings.thumbs.scrollDir = '+=';
settings.thumbs.timer = setInterval(function(){
functions.thumbs.scroll();
}, 20);
})
.mouseout(function(){
functions.thumbs.stop();
})
.mousedown(function(){ settings.thumbs.scrollAmount = 5; })
.mouseup(function(){ settings.thumbs.scrollAmount = 2; });
},
right : function(){
jQuery(settings.thumbs.right)
.mouseover(function(){
settings.thumbs.scrollDir = '-=';
settings.thumbs.timer = setInterval(function(){
functions.thumbs.scroll();
}, 20);
})
.mouseout(function(){
functions.thumbs.stop();
})
.mousedown(function(){ settings.thumbs.scrollAmount = 5; })
.mouseup(function(){ settings.thumbs.scrollAmount = 2; });
},
hover : function(){
}
},
main : {
prev : function(){
settings.main.buttons.prev.click(function(){ functions.main.prev(); });
},
next : function(){
settings.main.buttons.next.click(function(){ functions.main.next(); });
}
},
text : {
toggle : function(){
settings.imageText.toggle.click(function(){
if (settings.imageText.open)
{
functions.text.hide();
}
else
{
functions.text.show();
}
});
}
}
}
/* ******** Functions ******* */
var functions = {
main : {
prev : function(){
disableMe = true;
if (settings.gotoImg.index > 0)
{
disableMe = false;
settings.gotoImg.dir = "+=";
settings.gotoImg.index--;
functions.main.slide();
// If last image, disable button
if (settings.gotoImg.index <= 0){
disableMe = true;
}
// show prev button as enabled
settings.main.buttons.next.css('opacity', 1);
}
if (disableMe){
settings.main.buttons.prev.css('opacity', settings.main.buttons.opacity);
}
},
next : function(){
disableMe = true;
if (settings.gotoImg.index < settings.count-1)
{
disableMe = false;
settings.gotoImg.dir = "-=";
settings.gotoImg.index++;
functions.main.slide();
// If last image, disable button
if (settings.gotoImg.index == settings.count){
disableMe = true;
}
// show prev button as enabled
settings.main.buttons.prev.css('opacity', 1);
}
if (disableMe){
settings.main.buttons.next.css('opacity', settings.main.buttons.opacity);
}
},
slide : function(){
// Highlight new div
functions.thumbs.highlight();
// Hide description
functions.text.hide();
// Set text
functions.text.set();
// animate main image into viewport
settings.main.holder.stop().dequeue().animate(
{ "left": (0-(settings.width*settings.gotoImg.index)) + "px" },
settings.main.speed, settings.main.ease,
function(){
// show imageText if hidden and not disabled
if (!settings.imageText.open && settings.imageText.enabled){
// Re-show text
functions.text.show();
}
}
);
}
},
thumbs : {
scroll : function(){
var allowScroll = true;
if (settings.thumbs.scrollDir == '-=') // mouse on right - move toward end
{
staticParentRight = settings.thumbs.holder.offset().left + settings.thumbs.holder.width();
currLeft = settings.thumbs.inner.offset().left + settings.width;
currLeft += settings.width;
newLeft = currLeft - settings.thumbs.scrollAmount;
if (newLeft < settings.thumbs.holder.offset().left)
{
allowScroll = false;
}
}
else // mouse on left - go towards 0
{
// Not going to be greater than 0
if (parseFloat(settings.thumbs.inner.css("left")) + settings.thumbs.scrollAmount > 0)
{
// don't allow main scroll
allowScroll = false;
// scroll parent to 0 (farthest left pos)
settings.thumbs.inner.animate({
'left' : '0px'
}, 20, jQuery.easing.easeIn);
}
}
if ( allowScroll )
{
// animate scroll normally
settings.thumbs.inner.animate({
'left' : settings.thumbs.scrollDir + settings.thumbs.scrollAmount + 'px'
}, 20, jQuery.easing.easeIn);
}
else
{
functions.thumbs.stop();
}
},
stop : function(){
settings.thumbs.inner.stop().dequeue();
clearInterval(settings.thumbs.timer);
},
change : function(obj, event){
settings.gotoImg.index = event.data.index;
functions.main.slide();
event.preventDefault();
jQuery(obj).blur();
},
highlight : function(){
// Set its dimensions based on current image dimensions and offset
gotoImg = settings.thumbs.inner.find('a:eq(' + settings.gotoImg.index + ')').children('img');
// show buttons as enabled/disabled
settings.main.buttons.prev.css('opacity', 1);
settings.main.buttons.next.css('opacity', 1);
if (settings.gotoImg.index == 0)
{
settings.main.buttons.prev.css('opacity', settings.main.buttons.opacity);
}
else if (settings.gotoImg.index == settings.count-1)
{
settings.main.buttons.next.css('opacity', settings.main.buttons.opacity);
}
// Get offsets
staticParentOffsets = settings.thumbs.holder.offset();
gotoImgOffset = gotoImg.offset();
// Set height and width of highlight div
settings.thumbs.highlight.obj
.height(gotoImg.outerHeight() + settings.thumbs.highlight.spacing.top + settings.thumbs.highlight.spacing.bottom)
.width(gotoImg.outerWidth() + settings.thumbs.highlight.spacing.right + settings.thumbs.highlight.spacing.left);
// Move the highlight div
settings.thumbs.highlight.obj.stop().dequeue().animate({
'top' : (gotoImgOffset.top - staticParentOffsets.top - settings.thumbs.highlight.spacing.top),
'left' : (gotoImgOffset.left - settings.thumbs.inner.offset().left - settings.thumbs.highlight.spacing.left)
}, settings.thumbs.highlight.speed, settings.thumbs.highlight.ease
);
// Scroll container amount
scrollAmount = 0;
if (settings.gotoImg.dir == "-=")
{
rightPosNew = (gotoImgOffset.left + gotoImg.outerWidth() + settings.thumbs.highlight.spacing.right);
if (rightPosNew > (staticParentOffsets.left + settings.width))
{
scrollAmount = (gotoImgOffset.left - settings.thumbs.padding.left) - staticParentOffsets.left;
}
}
else
{
if (gotoImgOffset.left < staticParentOffsets.left)
{
scrollAmount = (staticParentOffsets.left - gotoImgOffset.left) - settings.thumbs.padding.left;
scrollAmount += settings.width - gotoImg.outerWidth();
overSpill = parseFloat(settings.thumbs.inner.css("left")) + scrollAmount;
if ( overSpill > 0)
{
scrollAmount -= overSpill;
}
}
}
// If scroll is required
if (scrollAmount > 0)
{
settings.thumbs.inner.animate({
'left' : settings.gotoImg.dir + scrollAmount + 'px'
}, settings.thumbs.speed, jQuery.easing.easeIn
);
}
},
show : function(){
settings.thumbs.toggle.parent().animate(
{ "top": 0 },
settings.thumbs.speed, settings.thumbs.ease, function(){
jQuery("img", settings.thumbs.toggle)
.attr("src", settings.imgRoot + settings.thumbs.close.src)
.attr("alt", settings.thumbs.close.alt);
settings.thumbs.isOpen = true;
}
);
},
hide : function(){
settings.thumbs.toggle.parent().animate(
{ "top": (settings.thumbs.lip - settings.thumbs.height)},
settings.thumbs.speed, settings.thumbs.ease, function(){
settings.thumbs.toggle.slideUp(200, function(){
jQuery("img", this)
.attr("src", settings.imgRoot + settings.thumbs.open.src)
.attr("alt", settings.thumbs.open.alt)
.parent().slideDown(400);
});
settings.thumbs.isOpen = false;
}
);
}
},
text : {
set : function(){
if(settings.main.holder.children('a:eq('+ settings.gotoImg.index +')').attr('title')){
strapInfo = settings.main.holder.children('a:eq('+ settings.gotoImg.index +')')
.attr('title').split(settings.imageText.seperator);
if (strapInfo.length > 1)
{
settings.imageText.title.text = strapInfo[0];
settings.imageText.desc.text = strapInfo[1];
// set image text to
settings.imageText.enabled = true;
}
else
{
// Only title or desc has been supplied, set the found text to the desc and set the title to be the desc
settings.imageText.title.text = strapInfo[0];
settings.imageText.desc.text = ' ';
// keep image text closed so we only see title
settings.imageText.enabled = false;
}
settings.imageText.title.obj.html(settings.imageText.title.text);
settings.imageText.desc.obj.html(settings.imageText.desc.text);
}
},
show : function(){
// Animate imageText up
settings.imageText.holder.animate(
{ "bottom": 0 },
{ "duration": settings.imageText.speed, "easing": settings.imageText.ease }
);
settings.imageText.open = true;
},
hide : function(){
// Animate imageText down
settings.imageText.holder.animate(
{ "bottom": (settings.imageText.lip - settings.imageText.height) },
{ "duration": settings.imageText.speed, "easing": settings.imageText.ease }
);
settings.imageText.open = false;
},
title : function(){
return 'title';
},
desc : function(){
return 'desc';
}
}
}
// Get static objects
var init = function(){
if (!(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6)){
// Get/Set the width of the container
settings.width = $jShowcase.width();
// Retrive jQuery objects
settings.main.holder = jQuery(settings.main.holder, $jShowcase);
settings.main.buttons.prev = jQuery(settings.main.buttons.prev, $jShowcase);
settings.main.buttons.next = jQuery(settings.main.buttons.next, $jShowcase);
settings.imageText.holder = jQuery(settings.imageText.holder, $jShowcase);
settings.imageText.toggle = jQuery(settings.imageText.toggle, settings.imageText.holder);
settings.imageText.title.obj = jQuery(settings.imageText.title.obj, settings.imageText.holder);
settings.imageText.desc.obj = jQuery(settings.imageText.desc.obj, settings.imageText.holder);
settings.thumbs.holder = jQuery(settings.thumbs.holder);
settings.thumbs.toggle = jQuery(settings.thumbs.toggle, settings.thumbs.holder);
settings.thumbs.inner = jQuery(settings.thumbs.inner, settings.thumbs.holder);
// Calculate padding off inner object - used when scrolling thumbs to correct position
settings.thumbs.padding.left = parseFloat(settings.thumbs.inner.css("padding-left"));
settings.thumbs.padding.right = parseFloat(settings.thumbs.inner.css("padding-right"));
// Get thumbs height;
settings.thumbs.height = settings.thumbs.holder.height();
//alert(settings.thumbs.height);
// Set the additional image toggle button top position to height of additional images
settings.thumbs.toggle.css("top", settings.thumbs.height);
// Add highlight div to thumbs inner container holder
settings.thumbs.inner.prepend("");
// Retrieve jQuery object of highlight div
settings.thumbs.highlight.obj = jQuery('.' + settings.thumbs.highlight.obj, settings.thumbs.holder);
// Wrap thumbs in wrapper - for animating
settings.thumbs.holder.wrapAll("");
//parseFloat(jQuery("img", settings.thumbs.toggle).height())
// Get the image text description height - used for animting bottom position
settings.imageText.height = settings.imageText.desc.obj.outerHeight();
// Set imageText in its "closed" position
settings.imageText.holder.css("bottom", (settings.imageText.lip - settings.imageText.height))
/* **** Set-up handlers for image gallery **** */
handlers.thumbs.toggle();
handlers.thumbs.change();
handlers.thumbs.left();
handlers.thumbs.right();
handlers.main.prev();
handlers.main.next();
handlers.text.toggle();
/* **** Run initial functions **** */
//functions.text.set();
//functions.thumbs.highlight();
jQuery("a:eq(0)", settings.thumbs.inner).triggerHandler("click");
//functions.thumbs.hide();
}
}
init();
}); /* end instance.each */
} /* end jQuery fn extension */
// Default settings
$.fn.jShowcase.defaults = {
imgRoot : 'assets/visual/jShowcase/',
width : 0,
count : 0,
gotoImg : {
index : 0,
dir : '-='
},
main : {
holder : '.main-holder',
count : 0,
speed : 600,
ease : 'easeInQuad',
buttons : {
prev : '.main-shift.prev',
next : '.main-shift.next',
opacity : 0.4
}
},
imageText : {
holder : '.strapline',
toggle : '.toggle',
height : 0,
lip : 2,
seperator : '|',
title : {
obj : '.title',
text: 'Default title'
},
desc : {
obj : '.desc',
text: 'Default desc'
},
speed : 200,
ease : "easeInQuad",
enabled : true,
open : true
},
thumbs : {
holder : '.add-images',
inner : '.images-container',
padding : { left: 0, right: 0 },
toggle : '.toggle',
speed : 300,
ease : jQuery.easing.easeInOut,
isOpen : true,
open : {
alt : 'Show more',
src : 'show-more.png'
},
close : {
alt : 'Hide more',
src : 'hide-more.png'
},
left : '.left',
right : '.right',
scrollDir : '-=',
scrollAmount : 2,
timer : null,
height : 0,
lip : 2,
highlight : {
obj : 'current-image',
spacing : { top: 2, right: 2, left: 2, bottom: 2 },
speed : 400,
ease : "easeInQuad"
}
}
};
})(jQuery);