Team:BNU-China/js/jquery.aw-showcase.js

From 2014.igem.org

(Difference between revisions)
(Created page with "/* Awkward Showcase - jQuery plugin http://www.jquery.com http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin http://demo.awkwardgroup.com/showcase Versi...")
Line 1: Line 1:
-
/*
 
-
 
-
Awkward Showcase - jQuery plugin
 
-
http://www.jquery.com
 
-
http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin
 
-
http://demo.awkwardgroup.com/showcase
 
-
Version: 1.1.1
 
-
 
-
Copyright (C) 2011 Awkward Group (http://www.awkwardgroup.com)
 
-
Licensed under Attribution-ShareAlike 3.0 Unported
 
-
http://creativecommons.org/licenses/by-sa/3.0/
 
-
 
-
Markup example for jQuery("#showcase").awShowcase();
 
-
 
-
<div id="showcase" class="showcase">
 
-
<!-- Each child div in #showcase represents a slide -->
 
-
<div class="showcase-slide">
 
-
<!-- Put the slide content in a div with the class .showcase-content -->
 
-
<div class="showcase-content">
 
-
<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper.
 
-
We usually wrap even if there is only one element, because it looks better. :-) -->
 
-
<div class="showcase-content-wrapper">
 
-
<img src="images/01.jpg" alt="01" />
 
-
</div>
 
-
</div>
 
-
<!-- Put the caption content in a div with the class .showcase-caption -->
 
-
<div class="showcase-caption">
 
-
The Caption
 
-
</div>
 
-
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
 
-
<div class="showcase-tooltips">
 
-
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
 
-
<a href="http://www.awkward.se" coords="634,130">
 
-
<!-- The content of the anchor-tag is displayed in the tooltip. -->
 
-
This is a tooltip that displays the anchor html in a nice way.
 
-
</a>
 
-
<a href="http://www.awkward.se" coords="356, 172">
 
-
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
 
-
<img src="images/glasses.png" />
 
-
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
 
-
White Glasses: 500$
 
-
</span>
 
-
</a>
 
-
</div>
 
-
</div>
 
-
<div class="showcase-slide">
 
-
<div class="showcase-content">
 
-
<div class="showcase-content-wrapper">
 
-
Content...
 
-
</div>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
 
-
*/
 
-
 
(function(jQuery) {
(function(jQuery) {
jQuery.fn.awShowcase = function(options) {
jQuery.fn.awShowcase = function(options) {
-
 
-
// Default configuration properties
 
var defaults =
var defaults =
{
{
Line 78: Line 20:
btn_numbers: false,
btn_numbers: false,
keybord_keys: false,
keybord_keys: false,
-
mousetrace: false, /* Trace x and y coordinates for the mouse */
+
mousetrace: false,  
pauseonover: true,
pauseonover: true,
stoponclick: true,
stoponclick: true,
-
transition: 'hslide', /* hslide / vslide / fade */
+
transition: 'hslide',
transition_delay: 300,
transition_delay: 300,
transition_speed: 500,
transition_speed: 500,
-
show_caption: 'onload', /* onload / onhover / show */
+
show_caption: 'onload',  
thumbnails: false,
thumbnails: false,
-
thumbnails_position: 'outside-last', /* outside-last / outside-first / inside-last / inside-first */
+
thumbnails_position: 'outside-last',  
-
thumbnails_direction: 'vertical', /* vertical / horizontal */
+
thumbnails_direction: 'vertical',
-
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
+
thumbnails_slidex: 0,  
-
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
+
dynamic_height: false,  
-
speed_change: false, /* This prevents user from swithing more then one slide at once */
+
speed_change: false,  
-
viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
+
viewline: false,  
fullscreen_width_x: 15,
fullscreen_width_x: 15,
custom_function: null
custom_function: null
};
};
-
// *****************
 
-
// SET UP THE PLUGIN
 
-
// *****************
 
-
 
-
// Declare and set up some important variables
 
options = jQuery.extend(defaults, options);
options = jQuery.extend(defaults, options);
var current_id = 0;
var current_id = 0;
Line 110: Line 47:
var showcase_width = options.content_width;
var showcase_width = options.content_width;
var animating = false;
var animating = false;
-
// Viewline specific variables
+
var content_viewline_width = 10000;
var content_viewline_width = 10000;
var animation_distance = 0;
var animation_distance = 0;
var old_animation_distance = 0;
var old_animation_distance = 0;
var remaining_width = 0;
var remaining_width = 0;
-
+
 
-
// Set up the content wrapper
+
var content_container = jQuery(document.createElement('div'))
var content_container = jQuery(document.createElement('div'))
.css('overflow', 'hidden')
.css('overflow', 'hidden')
Line 122: Line 58:
.addClass('showcase-content-container')
.addClass('showcase-content-container')
.prependTo(showcase);
.prependTo(showcase);
-
+
 
-
// Set up the showcase for hundred percent width
+
if (options.fit_to_parent)
if (options.fit_to_parent)
{
{
showcase_width = jQuery(showcase).width() + options.fullscreen_width_x;
showcase_width = jQuery(showcase).width() + options.fullscreen_width_x;
}
}
-
+
 
-
// Set up the showcase for Viewline Mayhem
+
if (options.viewline)
if (options.viewline)
{
{
Line 139: Line 73:
}
}
-
// Set up content and create the content and thumbnail array
 
var contentArray = [];
var contentArray = [];
var thumbnailArray = [];
var thumbnailArray = [];
Line 145: Line 78:
showcase.children('.showcase-slide').each(function()
showcase.children('.showcase-slide').each(function()
{
{
-
// Get content
 
var object = jQuery(this);
var object = jQuery(this);
content_count++;
content_count++;
-
// If thumbnails are activated
 
if (options.thumbnails)
if (options.thumbnails)
{
{
-
// Get thumbnail and put in array
 
var thumb = object.find('.showcase-thumbnail');
var thumb = object.find('.showcase-thumbnail');
thumbnailArray.push(thumb);
thumbnailArray.push(thumb);
thumb.remove();
thumb.remove();
}
}
-
+
-
// Set content width and height
+
var object_width = object.find('.showcase-content').children().width();
var object_width = object.find('.showcase-content').children().width();
var object_height = object.find('.showcase-content').children().height();
var object_height = object.find('.showcase-content').children().height();
-
// Add content html in array and remove it from DOM
 
contentArray.push(object.html());
contentArray.push(object.html());
object.remove();
object.remove();
-
 
-
// Get correct content
 
var new_object = getContent(content_count-1);
var new_object = getContent(content_count-1);
if (options.viewline || content_count === 1) { content_container.append(new_object); }  
if (options.viewline || content_count === 1) { content_container.append(new_object); }  
-
// Viewline setup
 
if (options.viewline)
if (options.viewline)
{
{
Line 178: Line 103:
}
}
-
// Set content and content container load height
 
if (options.dynamic_height)
if (options.dynamic_height)
{
{
Line 201: Line 125:
}
}
});
});
-
 
-
// Declare and set up the thumbnail wrapper
 
var thumb_wrapper;
var thumb_wrapper;
var thumbnailStretch = 0;
var thumbnailStretch = 0;
Line 208: Line 130:
if (options.thumbnails)
if (options.thumbnails)
{
{
-
// Create wrapper
 
thumb_container = jQuery('<div />');
thumb_container = jQuery('<div />');
thumb_restriction = jQuery('<div />');
thumb_restriction = jQuery('<div />');
thumb_wrapper = jQuery('<div />');
thumb_wrapper = jQuery('<div />');
-
 
-
// Add content to thumbnail wrapper
 
for (i = thumbnailArray.length-1; i >= 0; --i)
for (i = thumbnailArray.length-1; i >= 0; --i)
{
{
Line 221: Line 140:
thumbnail.click(function(a, b)
thumbnail.click(function(a, b)
{
{
-
// This function is used to extract the correct i value on click
 
return function()
return function()
{
{
-
// Disable auto change on click
 
if (myInterval) { pause_loop = true; clearInterval(myInterval); }
if (myInterval) { pause_loop = true; clearInterval(myInterval); }
changeContent(a, b);
changeContent(a, b);
Line 232: Line 149:
}
}
-
// Style and position thumbnail container and content wrapper
 
-
// + insert thumbnail container
 
if (options.thumbnails_position === 'outside-first' || options.thumbnails_position === 'outside-last')
if (options.thumbnails_position === 'outside-first' || options.thumbnails_position === 'outside-last')
{
{
if (options.thumbnails_direction !== 'horizontal')
if (options.thumbnails_direction !== 'horizontal')
{
{
-
/* outside & vertical */
+
content_container.css('float', 'left');
content_container.css('float', 'left');
content_container.css('width', options.content_width);
content_container.css('width', options.content_width);
Line 246: Line 161:
else
else
{
{
-
/* outside & horizontal */
+
jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
-
//jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));
+
}
}
if (options.thumbnails_position === 'outside-last')
if (options.thumbnails_position === 'outside-last')
{
{
-
/* outside-last */
+
showcase.append(thumb_container);
showcase.append(thumb_container);
if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
Line 259: Line 174:
else
else
{
{
-
/* outside-first */
+
showcase.prepend(thumb_container);
showcase.prepend(thumb_container);
if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
Line 269: Line 184:
if (options.thumbnails_direction === 'horizontal')  
if (options.thumbnails_direction === 'horizontal')  
{
{
-
/* inside & horizontal */
+
thumb_container.css({'left' : 0, 'right' : 0});
thumb_container.css({'left' : 0, 'right' : 0});
jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));
jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));
-
/* inside first */
+
if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); }
if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); }
-
/* inside last */
+
else { thumb_container.css('bottom', 0); }
else { thumb_container.css('bottom', 0); }
}
}
else  
else  
{
{
-
/* inside & vertical */
+
 
thumb_container.css({'top' : 0, 'bottom' : 0});
thumb_container.css({'top' : 0, 'bottom' : 0});
-
/* inside first */
 
if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); }
if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); }
-
/* inside last */
 
else { thumb_container.css('right', 0); }
else { thumb_container.css('right', 0); }
}
}
content_container.prepend(thumb_container);
content_container.prepend(thumb_container);
}
}
-
 
-
// Add class and style to thumbnail container
 
thumb_container.addClass('showcase-thumbnail-container');
thumb_container.addClass('showcase-thumbnail-container');
thumb_container.css('overflow', 'hidden');
thumb_container.css('overflow', 'hidden');
-
 
-
// Add class and style to thumbnail restriction
 
thumb_restriction.addClass('showcase-thumbnail-restriction');
thumb_restriction.addClass('showcase-thumbnail-restriction');
thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'});
thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'});
if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); }
if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); }
-
 
-
// Add class and style to thumbnail wrapper
 
thumb_wrapper.addClass('showcase-thumbnail-wrapper');
thumb_wrapper.addClass('showcase-thumbnail-wrapper');
if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); }
if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); }
else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); }
else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); }
thumb_wrapper.css('position', 'relative');
thumb_wrapper.css('position', 'relative');
-
 
-
// Append wrapper and restriction
 
thumb_restriction.append(thumb_wrapper);
thumb_restriction.append(thumb_wrapper);
thumb_container.append(thumb_restriction);
thumb_container.append(thumb_restriction);
-
 
-
// Add backward button
 
var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />');
var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />');
if (options.thumbnails_direction !== 'horizontal')
if (options.thumbnails_direction !== 'horizontal')
Line 323: Line 226:
buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); });
buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); });
thumb_container.prepend(buttonBackward);
thumb_container.prepend(buttonBackward);
-
 
-
// Add forward button
 
var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />');
var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />');
if (options.thumbnails_direction !== 'horizontal')
if (options.thumbnails_direction !== 'horizontal')
Line 337: Line 238:
buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); });
buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); });
thumb_container.append(buttonForward);
thumb_container.append(buttonForward);
-
 
-
// Set the number of thumbnails per page.
 
var thumbnailVisibleStretch = 0;
var thumbnailVisibleStretch = 0;
if (options.thumbnails_direction !== 'horizontal')
if (options.thumbnails_direction !== 'horizontal')
Line 361: Line 260:
}
}
}
}
-
 
-
// Hide buttons if they're not necessary
 
if (thumbnailsPerPage+1 > thumbnailArray.length)
if (thumbnailsPerPage+1 > thumbnailArray.length)
{
{
Line 376: Line 273:
buttonForward.hide();
buttonForward.hide();
}
}
-
 
-
// Set thumbnail restriction height or width
 
if (options.thumbnails_direction !== 'horizontal')
if (options.thumbnails_direction !== 'horizontal')
{
{
Line 388: Line 283:
thumb_restriction.css('width',  showcase_width-buttonsWidth);
thumb_restriction.css('width',  showcase_width-buttonsWidth);
}
}
-
 
-
// Set thumbnail wrapper width
 
if (options.thumbnails_direction === 'horizontal')
if (options.thumbnails_direction === 'horizontal')
{
{
Line 397: Line 290:
else { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); }
else { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); }
}
}
-
 
-
// Set showcase width and height
 
if (options.thumbnails && options.thumbnails_position.indexOf("outside") !== -1 && options.thumbnails_direction !== 'horizontal' && !options.viewline)
if (options.thumbnails && options.thumbnails_position.indexOf("outside") !== -1 && options.thumbnails_direction !== 'horizontal' && !options.viewline)
{
{
Line 404: Line 295:
}
}
else if  (!options.fit_to_parent) { showcase.css('width', showcase_width); }
else if  (!options.fit_to_parent) { showcase.css('width', showcase_width); }
-
 
-
// Turn on/off auto slide
 
if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); }
if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); }
-
 
-
// Pause auto on mouse over
 
if (options.auto && options.pauseonover)
if (options.auto && options.pauseonover)
{
{
Line 420: Line 307:
});
});
}
}
-
 
-
// Adding navigation buttons
 
if (options.buttons && content_count > 1)
if (options.buttons && content_count > 1)
{
{
-
// Create button wrapper
 
jQuery(document.createElement('div'))
jQuery(document.createElement('div'))
.css('clear', 'both')
.css('clear', 'both')
Line 430: Line 314:
.appendTo(showcase);
.appendTo(showcase);
i = 0;
i = 0;
-
// Add button for each content
 
while (i < content_count)
while (i < content_count)
{
{
Line 436: Line 319:
.attr('id', 'showcase-navigation-button-' + i)
.attr('id', 'showcase-navigation-button-' + i)
.addClass((i === 0) ? 'active' : '')
.addClass((i === 0) ? 'active' : '')
-
// Add numbers or unicode
 
.html((options.btn_numbers) ? parseInt(i)+1 : '&#9679;')
.html((options.btn_numbers) ? parseInt(i)+1 : '&#9679;')
.click(function(a, b)
.click(function(a, b)
{
{
-
// This function is used to extract the correct i value on click
 
return function()
return function()
{
{
-
// Disable auto change on click
 
if (myInterval)
if (myInterval)
{
{
Line 455: Line 335:
i++;
i++;
}
}
-
 
-
// Adding navigation arrows
 
if (options.arrows && content_count > 1)
if (options.arrows && content_count > 1)
{
{
Line 464: Line 342:
var bm = wb - wbi;
var bm = wb - wbi;
var posR = posL + (content_count * wb);
var posR = posL + (content_count * wb);
-
// Left arrow
 
jQuery(document.createElement('div'))
jQuery(document.createElement('div'))
.addClass('showcase-arrow-previous')
.addClass('showcase-arrow-previous')
.prependTo('.showcase-button-wrapper', showcase)
.prependTo('.showcase-button-wrapper', showcase)
.click(function() {
.click(function() {
-
// Disable auto change on click
 
if (myInterval)
if (myInterval)
{
{
Line 477: Line 353:
changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
});
});
-
// Calc arrow position
 
var wa = $('.showcase-arrow-previous').width();
var wa = $('.showcase-arrow-previous').width();
var ha = $('.showcase-arrow-previous').height();
var ha = $('.showcase-arrow-previous').height();
jQuery('.showcase-arrow-previous', showcase).css({left: (posL - bm - wa)+'px', marginTop: -(ha/2)+'px'});
jQuery('.showcase-arrow-previous', showcase).css({left: (posL - bm - wa)+'px', marginTop: -(ha/2)+'px'});
-
 
-
// Right arrow
 
jQuery(document.createElement('div'))
jQuery(document.createElement('div'))
.addClass('showcase-arrow-next')
.addClass('showcase-arrow-next')
Line 488: Line 361:
.css({left: posR+'px', marginTop: -(ha/2)+'px'})
.css({left: posR+'px', marginTop: -(ha/2)+'px'})
.click(function() {
.click(function() {
-
// Disable auto change on click
 
if (myInterval)
if (myInterval)
{
{
Line 499: Line 371:
}
}
}
}
-
 
-
// Activating the keybord arrow keys
 
if (options.keybord_keys)
if (options.keybord_keys)
{
{
jQuery(document).keydown(function(e)
jQuery(document).keydown(function(e)
{
{
-
// Disable auto change on click
 
if (options.stoponclick) { pause_loop = true; }
if (options.stoponclick) { pause_loop = true; }
if (myInterval) clearInterval(myInterval);
if (myInterval) clearInterval(myInterval);
-
+
 
-
// Left arrow
+
if (e.keyCode === 37) {
if (e.keyCode === 37) {
changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
}
}
-
 
-
// Right arrow
 
if (e.keyCode === 39) {
if (e.keyCode === 39) {
changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next');
changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next');
Line 521: Line 387:
}
}
-
 
-
// *************
 
-
// THE FUNCTIONS
 
-
// *************
 
-
 
-
// Returns the specified content (by array id)
 
function getContent(id) {
function getContent(id) {
Line 536: Line 396:
.html(contentArray[id]);
.html(contentArray[id]);
-
// Set content width
 
if (!options.viewline) { new_content.css('width', options.content_width); }
if (!options.viewline) { new_content.css('width', options.content_width); }
-
 
-
// Position the content wrapper if showcase width is set to hundred percent
 
if (options.fit_to_parent && !options.viewline) { new_content.css('left', (showcase_width/2)-options.content_width/2); }
if (options.fit_to_parent && !options.viewline) { new_content.css('left', (showcase_width/2)-options.content_width/2); }
Line 545: Line 402:
}
}
-
// Function that runs when content is set to change automatically
 
function autoChange() {
function autoChange() {
-
// Set next content id
 
var nextID = parseInt(current_id)+1;
var nextID = parseInt(current_id)+1;
-
// If the next id is outside the array and continuous is set to true set the id to 0
 
if (nextID === content_count && options.continuous) { nextID = 0; }
if (nextID === content_count && options.continuous) { nextID = 0; }
-
// If continuous is set to false break the auto change
 
else if (nextID === content_count && !options.continuous) { break_loop = true; clearInterval(myInterval); }
else if (nextID === content_count && !options.continuous) { break_loop = true; clearInterval(myInterval); }
-
// Don't change the content if the auto change is broken
 
if (!break_loop) { changeContent(nextID, 'next'); }
if (!break_loop) { changeContent(nextID, 'next'); }
}
}
-
 
-
// Changes the content (no explanation/comments needed :)
 
function changeContent(id, direction) {
function changeContent(id, direction) {
-
 
-
// If the next content isn't the current content
 
if (current_id !== id && !animating) {
if (current_id !== id && !animating) {
-
 
var obj;
var obj;
var obj2;
var obj2;
var delay = 0;
var delay = 0;
var i;
var i;
-
 
-
// Set left/right position if showcase is set to full width
 
var lrpos = (options.fit_to_parent) ? (showcase_width/2)-(options.content_width/2) : 0;
var lrpos = (options.fit_to_parent) ? (showcase_width/2)-(options.content_width/2) : 0;
-
 
-
// If we want to display the next content
 
if ((id > current_id && direction !== 'previous') || direction === 'next') {
if ((id > current_id && direction !== 'previous') || direction === 'next') {
Line 578: Line 421:
if (current_id < content_count-1) {
if (current_id < content_count-1) {
-
+
 
-
// Prevent uggly transitions
+
if (!options.speed_change) { animating = true; }
if (!options.speed_change) { animating = true; }
-
+
 
-
// BugFix
+
updateContentViewlineWidth();
updateContentViewlineWidth();
-
 
-
// Pause Autoplay
 
if (options.pauseonover) { window.clearInterval(myInterval); }
if (options.pauseonover) { window.clearInterval(myInterval); }
-
 
-
// First we check if the content will fill the screen after animation.
 
remaining_width = 0;
remaining_width = 0;
-
 
-
// Loop trough the content array to find out
 
-
// the total width for the content that remains.
 
for (i=current_id+1, len=content_count; i<len; ++i)
for (i=current_id+1, len=content_count; i<len; ++i)
{
{
Line 598: Line 432:
remaining_width += obj.find('.showcase-content').children().width();
remaining_width += obj.find('.showcase-content').children().width();
}
}
-
 
-
// If the remaining width is wider than the browser window.
 
if (remaining_width > showcase_width)
if (remaining_width > showcase_width)
{
{
Line 614: Line 446:
content_container.animate({left: animation_distance + 'px'}, options.transition_speed, function() { animating = false; });
content_container.animate({left: animation_distance + 'px'}, options.transition_speed, function() { animating = false; });
-
// Change current content id (if content is finished)
 
if ($('.showcase-arrow-next').is(':visible')) { current_id++; }
if ($('.showcase-arrow-next').is(':visible')) { current_id++; }
Line 621: Line 452:
}
}
else {
else {
-
 
-
// Prevent uggly transitions
 
if (!options.speed_change) { animating = true; }
if (!options.speed_change) { animating = true; }
-
 
-
// Get current and next content element
 
obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
obj2 = getContent(id);
obj2 = getContent(id);
-
 
-
// Append next element and set height
 
content_container.append(obj2);
content_container.append(obj2);
if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); }
if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); }
else { obj2.css('height', options.content_height); }
else { obj2.css('height', options.content_height); }
-
 
-
// Animate height first if next content is not as high
 
if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {
if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {
Line 640: Line 463:
delay = 100;
delay = 100;
}
}
-
 
-
// Animate current element
 
if (options.transition === 'hslide') {
if (options.transition === 'hslide') {
Line 654: Line 475:
jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { obj.remove(); });
jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { obj.remove(); });
}
}
-
 
-
// This will hide them, not display them :)
 
displayAnchors(obj, true);
displayAnchors(obj, true);
displayCaption(obj, true);
displayCaption(obj, true);
-
 
-
// Animate next element
 
if (options.transition === 'hslide') {
if (options.transition === 'hslide') {
Line 694: Line 511:
}
}
}
}
-
// If we want to display the previous content
 
else if (id < current_id || direction === 'previous') {
else if (id < current_id || direction === 'previous') {
-
 
if (options.viewline) {
if (options.viewline) {
-
 
if (current_id !== 0) {
if (current_id !== 0) {
-
 
-
// Prevent uggly transitions
 
if (!options.speed_change) { animating = true; }
if (!options.speed_change) { animating = true; }
-
 
-
// BugFix
 
updateContentViewlineWidth();
updateContentViewlineWidth();
-
 
-
// Pause Autoplay
 
if (options.pauseonover) { window.clearInterval(myInterval); }
if (options.pauseonover) { window.clearInterval(myInterval); }
-
 
content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; });
content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; });
-
 
-
// Set animation distance
 
animation_distance = old_animation_distance;
animation_distance = old_animation_distance;
-
 
-
// Change current content id
 
current_id--;
current_id--;
-
 
if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); }
if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); }
-
 
-
// Set old distance
 
old_id = current_id - 1;
old_id = current_id - 1;
sub_width = jQuery(addedContentArray[old_id]).width();
sub_width = jQuery(addedContentArray[old_id]).width();
Line 729: Line 529:
}
}
else {
else {
-
 
-
// Prevent uggly transitions
 
if (!options.speed_change) { animating = true; }
if (!options.speed_change) { animating = true; }
-
 
-
// Get current and next content element
 
obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
obj2 = getContent(id);
obj2 = getContent(id);
-
 
-
// Append next element and set height
 
content_container.append(obj2);
content_container.append(obj2);
if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); }
if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); }
else { obj2.css('height', options.content_height); }
else { obj2.css('height', options.content_height); }
-
 
-
// Animate height first if next content is not as high
 
if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {
if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {
Line 748: Line 540:
delay = 100;
delay = 100;
}
}
-
 
-
// Animate current element
 
if (options.transition === 'hslide') {
if (options.transition === 'hslide') {
Line 778: Line 568:
});
});
}
}
-
 
-
// Animate next element
 
if (options.transition === 'hslide')
if (options.transition === 'hslide')
{
{
Line 818: Line 606:
if(!options.viewline)
if(!options.viewline)
{
{
-
// Change previous and current content id
 
previous_id = current_id;
previous_id = current_id;
current_id = id;
current_id = id;
-
 
-
// Slide thumbnail wrapper
 
if (options.thumbnails)
if (options.thumbnails)
{
{
Line 834: Line 619:
}
}
}
}
-
 
-
// Change click handlers for arrows
 
if (options.arrows)
if (options.arrows)
{
{
Line 859: Line 642:
});
});
}
}
-
 
-
// Change active class for thumbnails
 
if (options.thumbnails)
if (options.thumbnails)
{
{
Line 872: Line 653:
});
});
}
}
-
 
-
// If caption is set to 'show'
 
if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); }
if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); }
}
}
-
 
-
// Change active class for buttons
 
if (options.buttons)
if (options.buttons)
{
{
Line 889: Line 666:
});
});
}
}
-
 
-
// A function that runs on content change, if it exists.
 
if (typeof options.custom_function == 'function')
if (typeof options.custom_function == 'function')
{
{
Line 903: Line 678:
animating = false;
animating = false;
}
}
-
 
-
// Slide thumbnail wrapper
 
var thumbnailSlidePosition = 0;
var thumbnailSlidePosition = 0;
function slideThumbnailWrapper(direction, check, backwardforward)
function slideThumbnailWrapper(direction, check, backwardforward)
Line 915: Line 688:
}
}
var multiplySlidePosition = 1;
var multiplySlidePosition = 1;
-
 
-
// Set slide x
 
if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; }
if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; }
-
 
-
// Check if we need to do the slide
 
if (check)
if (check)
{
{
Line 939: Line 708:
var firstVisible = thumbnailsScrolled;
var firstVisible = thumbnailsScrolled;
var lastVisible = thumbnailsPerPage + thumbnailsScrolled -1;
var lastVisible = thumbnailsPerPage + thumbnailsScrolled -1;
-
 
-
// Check if the next active thumbnail is outside the visible area
 
if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; }
if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; }
-
 
-
// If the next active thumbnail is far away..
 
var distance;
var distance;
if ((current_id - lastVisible) > options.thumbnails_slidex)
if ((current_id - lastVisible) > options.thumbnails_slidex)
Line 1,003: Line 768:
}
}
}
}
-
 
-
// Displays the caption
 
function displayCaption(container, fadeOut)
function displayCaption(container, fadeOut)
{
{
Line 1,026: Line 789:
else { caption.stop(true, true).fadeOut(300); }
else { caption.stop(true, true).fadeOut(300); }
}
}
-
 
-
// Displays the anchors in the current slide
 
function displayAnchors(container, fadeOut)
function displayAnchors(container, fadeOut)
{
{
-
// Get each anchor tooltip
 
container.find('.showcase-tooltips a').each(function()
container.find('.showcase-tooltips a').each(function()
{
{
if (!fadeOut)
if (!fadeOut)
{
{
-
// Get coordinates
 
var coords = jQuery(this).attr('coords');
var coords = jQuery(this).attr('coords');
coords = coords.split(',');
coords = coords.split(',');
-
 
-
// Style and position anchor
 
jQuery(this).addClass('showcase-plus-anchor');
jQuery(this).addClass('showcase-plus-anchor');
jQuery(this).css('position', 'absolute');
jQuery(this).css('position', 'absolute');
Line 1,065: Line 822:
});
});
}
}
-
 
-
// Controls the animation for the tooltips
 
var tooltip = null;
var tooltip = null;
function animateTooltip(container, x, y, content)
function animateTooltip(container, x, y, content)
{
{
-
// if tooltip is null (doesn't exsist)
 
if (tooltip === null)
if (tooltip === null)
{
{
-
// Create the tooltip
 
tooltip = jQuery(document.createElement('div'))
tooltip = jQuery(document.createElement('div'))
.addClass('showcase-tooltip')
.addClass('showcase-tooltip')
Line 1,081: Line 834:
.html(content);
.html(content);
container.append(tooltip);
container.append(tooltip);
-
 
-
// Position the tooltip (this is where we try not to display the tooltip outside the content wrapper)
 
var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2;
var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2;
var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2;
var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2;
Line 1,105: Line 856:
tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy)));
tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy)));
}
}
-
 
-
// Fade in the tooltip
 
tooltip.fadeIn(400);
tooltip.fadeIn(400);
}
}
else
else
{
{
-
// Fade out the tooltip
 
tooltip.fadeOut(400);
tooltip.fadeOut(400);
-
// Remove it from the DOM
 
tooltip.remove();
tooltip.remove();
-
// And set the variable to null
 
tooltip = null;
tooltip = null;
}
}
}
}
-
 
-
/* Returns the correct height for the element, including padding and borders. */
 
function getElementHeight(el, incHeight, incMargin, incPadding, incBorders)
function getElementHeight(el, incHeight, incMargin, incPadding, incBorders)
{
{
Line 1,134: Line 878:
return elHeight;
return elHeight;
}
}
-
 
-
/* Returns the correct width for the element, including width, margin, padding and borders. */
 
function getElementWidth(el, incWidth, incMargin, incPadding, incBorders)
function getElementWidth(el, incWidth, incMargin, incPadding, incBorders)
{
{
Line 1,149: Line 891:
return elWidth;
return elWidth;
}
}
-
 
-
// Traces the mouse position (used for positioning anchors)
 
if (options.mousetrace)
if (options.mousetrace)
{
{
-
// Create the div tha displays the coordinates
 
var mousetrace = jQuery(document.createElement('div'))
var mousetrace = jQuery(document.createElement('div'))
.css('position', 'absolute')
.css('position', 'absolute')
Line 1,164: Line 903:
showcase.append(mousetrace);
showcase.append(mousetrace);
var offset = showcase.offset();
var offset = showcase.offset();
-
 
-
// Print the coordinates
 
content_container.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left)  + ' Y: ' + (e.pageY - offset.top)); });
content_container.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left)  + ' Y: ' + (e.pageY - offset.top)); });
}
}
-
 
-
// Show all content on one page
 
$('#awOnePageButton').click(function showInOnePage()
$('#awOnePageButton').click(function showInOnePage()
{
{
Line 1,177: Line 912:
temp_container.addClass('showcase-onepage');
temp_container.addClass('showcase-onepage');
showcase.before(temp_container);
showcase.before(temp_container);
-
 
-
// Disable auto change on click
 
if (myInterval) { pause_loop = true; clearInterval(myInterval); }
if (myInterval) { pause_loop = true; clearInterval(myInterval); }
Line 1,213: Line 946:
});
});
-
// The correct width is returned when all content is fully loaded.
 
var addedContentArray = [];
var addedContentArray = [];
function updateContentViewlineWidth()
function updateContentViewlineWidth()
Line 1,225: Line 957:
}
}
-
// Remove loading class
 
showcase.removeClass('showcase-load');
showcase.removeClass('showcase-load');
};
};
})(jQuery);
})(jQuery);

Revision as of 10:08, 16 July 2014

(function(jQuery) {

jQuery.fn.awShowcase = function(options) { var defaults = { content_width: 700, content_height: 470, fit_to_parent: false, auto: false, interval: 3000, continuous: false, loading: true, tooltip_width: 200, tooltip_icon_width: 32, tooltip_icon_height: 32, tooltip_offsetx: 18, tooltip_offsety: 0, arrows: true, buttons: true, btn_numbers: false, keybord_keys: false, mousetrace: false, pauseonover: true, stoponclick: true, transition: 'hslide', transition_delay: 300, transition_speed: 500, show_caption: 'onload', thumbnails: false, thumbnails_position: 'outside-last', thumbnails_direction: 'vertical', thumbnails_slidex: 0, dynamic_height: false, speed_change: false, viewline: false, fullscreen_width_x: 15, custom_function: null };

options = jQuery.extend(defaults, options); var current_id = 0; var previous_id = 0; var break_loop = false; var pause_loop = false; var myInterval = null; var showcase = jQuery(this); var showcase_width = options.content_width; var animating = false;

var content_viewline_width = 10000; var animation_distance = 0; var old_animation_distance = 0; var remaining_width = 0;

var content_container = jQuery(document.createElement('div')) .css('overflow', 'hidden') .css('position', 'relative') .addClass('showcase-content-container') .prependTo(showcase);

if (options.fit_to_parent) { showcase_width = jQuery(showcase).width() + options.fullscreen_width_x; }

if (options.viewline) { options.thumbnails = false; options.dynamic_height = false; content_container.css('width', content_viewline_width); showcase.css('overflow', 'hidden'); $('.showcase-arrow-previous').hide(); }

var contentArray = []; var thumbnailArray = []; var content_count = 0; showcase.children('.showcase-slide').each(function() { var object = jQuery(this); content_count++;

if (options.thumbnails) { var thumb = object.find('.showcase-thumbnail'); thumbnailArray.push(thumb); thumb.remove(); }

var object_width = object.find('.showcase-content').children().width(); var object_height = object.find('.showcase-content').children().height();

contentArray.push(object.html()); object.remove(); var new_object = getContent(content_count-1); if (options.viewline || content_count === 1) { content_container.append(new_object); }

if (options.viewline) { new_object.css('position', 'relative'); new_object.css('float', 'left'); new_object.css('width', object_width); }

if (options.dynamic_height) { new_object.css('height', object_height); if (content_count === 1) { content_container.css('height', object_height); } } else { new_object.css('height', options.content_height); if (content_count === 1) { content_container.css('height', options.content_height); } }

if (options.viewline || content_count === 1) { displayAnchors(new_object); displayCaption(new_object);

if (options.show_caption === 'show') { jQuery(new_object).find('.showcase-caption').show(); } } }); var thumb_wrapper; var thumbnailStretch = 0; var thumbnailsPerPage = 0; if (options.thumbnails) { thumb_container = jQuery('<div />'); thumb_restriction = jQuery('<div />'); thumb_wrapper = jQuery('<div />'); for (i = thumbnailArray.length-1; i >= 0; --i) { var thumbnail = jQuery(thumbnailArray[i]).css({'overflow' : 'hidden'}); thumbnail.attr('id', 'showcase-thumbnail-' + i); thumbnail.addClass((i === 0) ? 'active' : ); thumbnail.click(function(a, b) { return function() { if (myInterval) { pause_loop = true; clearInterval(myInterval); } changeContent(a, b); }; }(i, )); thumb_wrapper.prepend(thumbnail); }

if (options.thumbnails_position === 'outside-first' || options.thumbnails_position === 'outside-last') { if (options.thumbnails_direction !== 'horizontal') {

content_container.css('float', 'left'); content_container.css('width', options.content_width); thumb_container.css('float', 'left'); thumb_container.css('height', options.content_height); } else {

jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');

}

if (options.thumbnails_position === 'outside-last') {

showcase.append(thumb_container); if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } } else {

showcase.prepend(thumb_container); if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } } } else { thumb_container.css({'position' : 'absolute', 'z-index' : 20}); if (options.thumbnails_direction === 'horizontal') {

thumb_container.css({'left' : 0, 'right' : 0}); jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));


if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); }

else { thumb_container.css('bottom', 0); } } else {

thumb_container.css({'top' : 0, 'bottom' : 0}); if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); } else { thumb_container.css('right', 0); } } content_container.prepend(thumb_container); } thumb_container.addClass('showcase-thumbnail-container'); thumb_container.css('overflow', 'hidden'); thumb_restriction.addClass('showcase-thumbnail-restriction'); thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'}); if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); } thumb_wrapper.addClass('showcase-thumbnail-wrapper'); if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); } else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); } thumb_wrapper.css('position', 'relative'); thumb_restriction.append(thumb_wrapper); thumb_container.append(thumb_restriction); var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />'); if (options.thumbnails_direction !== 'horizontal') { buttonBackward.html('Up'); } else { buttonBackward.css({'float' : 'left'}); buttonBackward.html('Left'); } buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); }); thumb_container.prepend(buttonBackward); var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />'); if (options.thumbnails_direction !== 'horizontal') { buttonForward.html('Down'); } else { buttonForward.css({'float' : 'left'}); buttonForward.html('Right'); } buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); }); thumb_container.append(buttonForward); var thumbnailVisibleStretch = 0; if (options.thumbnails_direction !== 'horizontal') { thumbnailVisibleStretch = getElementHeight(thumb_wrapper, false); thumbnailVisibleStretch += (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward)); while (thumbnailVisibleStretch < options.content_height) { thumbnailVisibleStretch += getElementHeight(jQuery(thumbnailArray[0])); thumbnailsPerPage++; } } else { thumbnailVisibleStretch = getElementWidth(thumb_wrapper, false); thumbnailVisibleStretch += (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward));

while (thumbnailVisibleStretch < showcase_width) { thumbnailVisibleStretch += getElementWidth(jQuery(thumbnailArray[0])); thumbnailsPerPage++; } } if (thumbnailsPerPage+1 > thumbnailArray.length) { if (options.thumbnails_direction !== 'horizontal') { thumb_restriction.css('margin-top', getElementHeight(buttonBackward)); } else { thumb_restriction.css('margin-left', getElementWidth(buttonBackward)); } buttonBackward.hide(); buttonForward.hide(); } if (options.thumbnails_direction !== 'horizontal') { var buttonsHeight = (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward)); thumb_restriction.css('height', options.content_height - buttonsHeight); } else { var buttonsWidth = (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward)); thumb_restriction.css('width', showcase_width-buttonsWidth); } if (options.thumbnails_direction === 'horizontal') { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementWidth(jQuery(this)); }); thumb_wrapper.css('width', thumbnailStretch); } else { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); } } if (options.thumbnails && options.thumbnails_position.indexOf("outside") !== -1 && options.thumbnails_direction !== 'horizontal' && !options.viewline) { showcase.css('width', showcase_width + getElementWidth(thumb_wrapper, true, false)); } else if (!options.fit_to_parent) { showcase.css('width', showcase_width); } if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); } if (options.auto && options.pauseonover) { showcase.mouseenter(function() { break_loop = true; clearInterval(myInterval); }); showcase.mouseleave(function() { if (!pause_loop) { break_loop = false; myInterval = window.setInterval(autoChange, options.interval); } }); } if (options.buttons && content_count > 1) { jQuery(document.createElement('div')) .css('clear', 'both') .addClass('showcase-button-wrapper') .appendTo(showcase); i = 0; while (i < content_count) { jQuery(document.createElement('span')) .attr('id', 'showcase-navigation-button-' + i) .addClass((i === 0) ? 'active' : ) .html((options.btn_numbers) ? parseInt(i)+1 : '●') .click(function(a, b) { return function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(a, b); }; }(i, )) .appendTo(jQuery(showcase).find('.showcase-button-wrapper')); i++; } if (options.arrows && content_count > 1) { var posL = $('#showcase-navigation-button-0').position().left; var wb = $('.showcase-button-wrapper span').outerWidth(true); var wbi = $('.showcase-button-wrapper span').outerWidth(); var bm = wb - wbi; var posR = posL + (content_count * wb); jQuery(document.createElement('div')) .addClass('showcase-arrow-previous') .prependTo('.showcase-button-wrapper', showcase) .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }); var wa = $('.showcase-arrow-previous').width(); var ha = $('.showcase-arrow-previous').height(); jQuery('.showcase-arrow-previous', showcase).css({left: (posL - bm - wa)+'px', marginTop: -(ha/2)+'px'}); jQuery(document.createElement('div')) .addClass('showcase-arrow-next') .prependTo('.showcase-button-wrapper', showcase) .css({left: posR+'px', marginTop: -(ha/2)+'px'}) .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(current_id+1, 'next'); }); if (options.viewline) { $('.showcase-arrow-previous').hide(); } } } if (options.keybord_keys) { jQuery(document).keydown(function(e) { if (options.stoponclick) { pause_loop = true; } if (myInterval) clearInterval(myInterval);

if (e.keyCode === 37) { changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); } if (e.keyCode === 39) { changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); } }); }

function getContent(id) {

var new_content = jQuery(document.createElement('div')) .attr('id', 'showcase-content-' + id) .css('overflow', 'hidden') .css('position', 'absolute') .addClass('showcase-content') .html(contentArray[id]);

if (!options.viewline) { new_content.css('width', options.content_width); } if (options.fit_to_parent && !options.viewline) { new_content.css('left', (showcase_width/2)-options.content_width/2); }

return new_content; }

function autoChange() {

var nextID = parseInt(current_id)+1; if (nextID === content_count && options.continuous) { nextID = 0; } else if (nextID === content_count && !options.continuous) { break_loop = true; clearInterval(myInterval); } if (!break_loop) { changeContent(nextID, 'next'); } } function changeContent(id, direction) { if (current_id !== id && !animating) { var obj; var obj2; var delay = 0; var i; var lrpos = (options.fit_to_parent) ? (showcase_width/2)-(options.content_width/2) : 0; if ((id > current_id && direction !== 'previous') || direction === 'next') {

if (options.viewline) {

if (current_id < content_count-1) {

if (!options.speed_change) { animating = true; }

updateContentViewlineWidth(); if (options.pauseonover) { window.clearInterval(myInterval); } remaining_width = 0; for (i=current_id+1, len=content_count; i<len; ++i) { obj = addedContentArray[i]; remaining_width += obj.find('.showcase-content').children().width(); } if (remaining_width > showcase_width) { old_animation_distance = animation_distance; animation_distance -= addedContentArray[current_id].find('.showcase-content').children().width(); } else if ($('.showcase-arrow-next').is(':visible')) { old_animation_distance = animation_distance; animation_distance = -(content_viewline_width - (remaining_width + (showcase_width - remaining_width))); $('.showcase-arrow-next').fadeOut(300); }

content_container.animate({left: animation_distance + 'px'}, options.transition_speed, function() { animating = false; });

if ($('.showcase-arrow-next').is(':visible')) { current_id++; }

$('.showcase-arrow-previous').fadeIn(300); } } else { if (!options.speed_change) { animating = true; } obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id); content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } else { obj2.css('height', options.content_height); } if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {

content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height() }, 200); delay = 100; } if (options.transition === 'hslide') {

jQuery(obj).delay(delay).animate({ left: -(options.content_width) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); } else if (options.transition === 'vslide') {

jQuery(obj).delay(delay).animate({ top: -(options.content_height) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); } else {

jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { obj.remove(); }); } displayAnchors(obj, true); displayCaption(obj, true); if (options.transition === 'hslide') {

obj2.css('left', showcase_width); jQuery(obj2).delay(delay).animate({ left: lrpos }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } else if (options.transition === 'vslide') {

obj2.css('top', showcase.height()); jQuery(obj2).delay(delay).animate({ top: '0px' }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } else {

obj2.css('left', lrpos); obj2.css('display', 'none'); jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } } } else if (id < current_id || direction === 'previous') { if (options.viewline) { if (current_id !== 0) { if (!options.speed_change) { animating = true; } updateContentViewlineWidth(); if (options.pauseonover) { window.clearInterval(myInterval); } content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; }); animation_distance = old_animation_distance; current_id--; if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); } old_id = current_id - 1; sub_width = jQuery(addedContentArray[old_id]).width(); old_animation_distance = old_animation_distance + sub_width; }

$('.showcase-arrow-next').fadeIn(300); } else { if (!options.speed_change) { animating = true; } obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id); content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } else { obj2.css('height', options.content_height); } if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {

content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height()}, 200); delay = 100; } if (options.transition === 'hslide') {

jQuery(obj).delay(delay).animate({ left: (showcase_width) + 'px' }, options.transition_speed+options.transition_delay, function() { displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); } else if (options.transition === 'vslide') {

jQuery(obj).delay(delay).animate({ top: (options.content_height) + 'px' }, options.transition_speed+options.transition_delay, function(){ displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); } else {

jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); } if (options.transition === 'hslide') { obj2.css('left', '-' + options.content_width + 'px'); jQuery(obj2).delay(delay).animate({ left: lrpos }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } else if (options.transition === 'vslide') { obj2.css('top', '-' + showcase.height() + 'px'); jQuery(obj2).delay(delay).animate({ top: '0px' }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } else { obj2.css('left', lrpos); obj2.css('display', 'none'); jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } content_container.append(obj2); } }

if(!options.viewline) { previous_id = current_id; current_id = id; if (options.thumbnails) { if ((current_id > previous_id && direction !== 'previous') || direction === 'next') { slideThumbnailWrapper('forward', true); } else if (current_id < previous_id || direction === 'previous') { slideThumbnailWrapper('backward', true); } } if (options.arrows) { jQuery(showcase).find('.showcase-arrow-previous') .unbind('click') .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }); jQuery(showcase).find('.showcase-arrow-next') .unbind('click') .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); }); } if (options.thumbnails) { i = 0; showcase.find('.showcase-thumbnail').each(function() { var object = jQuery(this); object.removeClass('active'); if (i === current_id) { object.addClass('active'); } i++; }); } if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); } } if (options.buttons) { i = 0; showcase.find('.showcase-button-wrapper span').each(function() { var object = jQuery(this); object.removeClass('active'); if (i === current_id) { object.addClass('active'); } i++; }); } if (typeof options.custom_function == 'function') { options.custom_function(); } } }

function afterAnimation(obj) { if (options.dynamic_height) { content_container.stop(true, true).animate({ height: obj.find('.showcase-content').children().height() }, 200); } animating = false; } var thumbnailSlidePosition = 0; function slideThumbnailWrapper(direction, check, backwardforward) { var doTheSlide = true; var thumbnailHeightOrWidth = getElementHeight(jQuery(thumb_wrapper).find('.showcase-thumbnail')); if (options.thumbnails_direction === 'horizontal') { thumbnailHeightOrWidth = getElementWidth(jQuery(thumb_wrapper).find('.showcase-thumbnail')); } var multiplySlidePosition = 1; if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; } if (check) { var thumbnailSlidePositionCopy = thumbnailSlidePosition; var thumbnailsScrolled = 0; while (thumbnailSlidePositionCopy < 0) { if (options.thumbnails_direction === 'horizontal') { thumbnailSlidePositionCopy += getElementWidth(jQuery(thumbnailArray[0])); } else { thumbnailSlidePositionCopy += getElementHeight(jQuery(thumbnailArray[0])); } thumbnailsScrolled++; }

var firstVisible = thumbnailsScrolled; var lastVisible = thumbnailsPerPage + thumbnailsScrolled -1; if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; } var distance; if ((current_id - lastVisible) > options.thumbnails_slidex) { distance = current_id - lastVisible;

while (distance > options.thumbnails_slidex) { distance -= options.thumbnails_slidex; multiplySlidePosition++; } } else if ((firstVisible - current_id) > options.thumbnails_slidex) { distance = firstVisible - current_id;

while (distance > options.thumbnails_slidex) { distance -= options.thumbnails_slidex; multiplySlidePosition++; } } else { multiplySlidePosition = 1; } }

if (direction === 'forward' && doTheSlide) { if (options.thumbnails_direction === 'vertical' && options.content_height < (thumbnailStretch + thumbnailSlidePosition)) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (options.thumbnails_direction === 'horizontal' && options.content_width < (thumbnailStretch + thumbnailSlidePosition)) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (current_id === 0) { if (!backwardforward) { thumbnailSlidePosition = 0; } } if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } } else if (doTheSlide) { if (thumbnailSlidePosition < 0) { thumbnailSlidePosition += thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (current_id === content_count-1) { if (!backwardforward) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } } else { thumbnailSlidePosition = 0; } if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } } } function displayCaption(container, fadeOut) { var caption = container.find('.showcase-caption'); if (!fadeOut) { if (options.show_caption === 'onload') { caption.fadeIn(300); } else if (options.show_caption === 'onhover') { jQuery(container).mouseenter(function() { caption.fadeIn(300); });

jQuery(container).mouseleave(function() { caption.stop(true, true).fadeOut(100); }); } } else { caption.stop(true, true).fadeOut(300); } } function displayAnchors(container, fadeOut) { container.find('.showcase-tooltips a').each(function() { if (!fadeOut) { var coords = jQuery(this).attr('coords'); coords = coords.split(','); jQuery(this).addClass('showcase-plus-anchor'); jQuery(this).css('position', 'absolute'); jQuery(this).css('display', 'none'); jQuery(this).css('width', options.tooltip_icon_width); jQuery(this).css('height', options.tooltip_icon_height); jQuery(this).css('left', parseInt(coords[0]) - (parseInt(options.tooltip_icon_width)/2)); jQuery(this).css('top', parseInt(coords[1]) - (parseInt(options.tooltip_icon_height)/2)); var content = jQuery(this).html(); jQuery(this).mouseenter(function() { animateTooltip(container, coords[0], coords[1], content); }); jQuery(this).mouseleave(function() { animateTooltip(container, coords[0], coords[1], content); }); jQuery(this).html(); jQuery(this).fadeIn(300); } else { jQuery(this).stop(true, true).fadeOut(300); } }); } var tooltip = null; function animateTooltip(container, x, y, content) { if (tooltip === null) { tooltip = jQuery(document.createElement('div')) .addClass('showcase-tooltip') .css('display', 'none') .css('position', 'absolute') .css('max-width', options.tooltip_width) .html(content); container.append(tooltip); var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2; var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2; lastx = parseInt(x) + tooltip.width() + tooltip_paddingx; lasty = parseInt(y) + tooltip.height() + tooltip_paddingy;

if (lastx < options.content_width) { tooltip.css('left', parseInt(x) + parseInt(options.tooltip_offsetx)); } else { tooltip.css('left', (parseInt(x) - parseInt(options.tooltip_offsetx)) - (parseInt(tooltip.width()) + parseInt(options.tooltip_offsetx))); }

if (lasty < options.content_height) { tooltip.css('top', parseInt(y) + parseInt(options.tooltip_offsety)); } else { tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy))); } tooltip.fadeIn(400); } else { tooltip.fadeOut(400); tooltip.remove(); tooltip = null; } } function getElementHeight(el, incHeight, incMargin, incPadding, incBorders) { incHeight = typeof(incHeight) !== 'undefined' ? incHeight : true; incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; var elHeight = (incHeight) ? jQuery((el)).height() : 0; var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-top')) + parseFloat(jQuery(el).css('margin-bottom')) : 0; var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-top')) + parseFloat(jQuery(el).css('padding-bottom')) : 0; var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-top-width')) + parseFloat(jQuery((el)).css('border-bottom-width')) : 0; elHeight += elMargin + elPadding + elBorder; return elHeight; } function getElementWidth(el, incWidth, incMargin, incPadding, incBorders) { incWidth = typeof(incWidth) !== 'undefined' ? incWidth : true; incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; var elWidth = (incWidth) ? jQuery((el)).width() : 0; var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-left')) + parseFloat(jQuery(el).css('margin-right')) : 0; var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-left')) + parseFloat(jQuery((el)).css('padding-right')) : 0; var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-left-width')) + parseFloat(jQuery((el)).css('border-right-width')) : 0; elWidth += elMargin + elPadding + elBorder; return elWidth; } if (options.mousetrace) { var mousetrace = jQuery(document.createElement('div')) .css('position', 'absolute') .css('top', '0') .css('background-color', '#fff') .css('color', '#000') .css('padding', '3px 5px') .css('x-index', '30') .html('X: 0 Y: 0'); showcase.append(mousetrace); var offset = showcase.offset(); content_container.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left) + ' Y: ' + (e.pageY - offset.top)); }); } $('#awOnePageButton').click(function showInOnePage() { if ($('.view-page').is(':visible')) { var temp_container = jQuery(document.createElement('div')); temp_container.addClass('showcase-onepage'); showcase.before(temp_container); if (myInterval) { pause_loop = true; clearInterval(myInterval); }

$(this).find('.view-page').hide(); $(this).find('.view-slide').show(); showcase.hide();

$.each(contentArray, function(index, value) { obj = getContent(index); obj.css('position', 'relative'); temp_container.append(obj);

displayAnchors(obj); displayCaption(obj);

if (options.dynamic_height) { obj.css('height', obj.find('.showcase-content').children().height()); } else { obj.css('height', options.content_height); } });

var clear = jQuery(document.createElement('div')); clear.addClass('clear'); temp_container.append(clear); } else { $('.showcase-onepage').remove(); $(this).find('.view-page').show(); $(this).find('.view-slide').hide(); showcase.show(); }

return false; });

var addedContentArray = []; function updateContentViewlineWidth() { content_viewline_width = 0; content_container.children('div').each(function() { content_viewline_width += $(this).find('.showcase-content').children().width(); addedContentArray.push($(this)); }); }

showcase.removeClass('showcase-load'); };

})(jQuery);