"
Team:BNU-China/js/jquery.aw-showcase.js
From 2014.igem.org
(jquery.aw-showcase.js) |
|||
| (2 intermediate revisions not shown) | |||
| 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 20: | Line 78: | ||
btn_numbers: false, | btn_numbers: false, | ||
keybord_keys: false, | keybord_keys: false, | ||
| - | mousetrace: false, | + | mousetrace: false, /* Trace x and y coordinates for the mouse */ |
pauseonover: true, | pauseonover: true, | ||
stoponclick: true, | stoponclick: true, | ||
| - | transition: 'hslide', | + | transition: 'hslide', /* hslide / vslide / fade */ |
transition_delay: 300, | transition_delay: 300, | ||
transition_speed: 500, | transition_speed: 500, | ||
| - | show_caption: 'onload', | + | show_caption: 'onload', /* onload / onhover / show */ |
thumbnails: false, | thumbnails: false, | ||
| - | thumbnails_position: 'outside-last', | + | thumbnails_position: 'outside-last', /* outside-last / outside-first / inside-last / inside-first */ |
| - | thumbnails_direction: 'vertical', | + | thumbnails_direction: 'vertical', /* vertical / horizontal */ |
| - | thumbnails_slidex: 0, | + | thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ |
| - | dynamic_height: false, | + | 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. */ |
| - | speed_change: false, | + | speed_change: false, /* This prevents user from swithing more then one slide at once */ |
| - | viewline: 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. */ |
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 47: | Line 110: | ||
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 58: | Line 122: | ||
.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 73: | Line 139: | ||
} | } | ||
| + | // Set up content and create the content and thumbnail array | ||
var contentArray = []; | var contentArray = []; | ||
var thumbnailArray = []; | var thumbnailArray = []; | ||
| Line 78: | Line 145: | ||
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 103: | Line 178: | ||
} | } | ||
| + | // Set content and content container load height | ||
if (options.dynamic_height) | if (options.dynamic_height) | ||
{ | { | ||
| Line 125: | Line 201: | ||
} | } | ||
}); | }); | ||
| + | |||
| + | // Declare and set up the thumbnail wrapper | ||
var thumb_wrapper; | var thumb_wrapper; | ||
var thumbnailStretch = 0; | var thumbnailStretch = 0; | ||
| Line 130: | Line 208: | ||
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 140: | Line 221: | ||
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 149: | Line 232: | ||
} | } | ||
| + | // 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 161: | Line 246: | ||
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 174: | Line 259: | ||
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 184: | Line 269: | ||
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 226: | Line 323: | ||
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 238: | Line 337: | ||
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 260: | Line 361: | ||
} | } | ||
} | } | ||
| + | |||
| + | // Hide buttons if they're not necessary | ||
if (thumbnailsPerPage+1 > thumbnailArray.length) | if (thumbnailsPerPage+1 > thumbnailArray.length) | ||
{ | { | ||
| Line 273: | Line 376: | ||
buttonForward.hide(); | buttonForward.hide(); | ||
} | } | ||
| + | |||
| + | // Set thumbnail restriction height or width | ||
if (options.thumbnails_direction !== 'horizontal') | if (options.thumbnails_direction !== 'horizontal') | ||
{ | { | ||
| Line 283: | Line 388: | ||
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 290: | Line 397: | ||
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 295: | Line 404: | ||
} | } | ||
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 307: | Line 420: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // 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 314: | Line 430: | ||
.appendTo(showcase); | .appendTo(showcase); | ||
i = 0; | i = 0; | ||
| + | // Add button for each content | ||
while (i < content_count) | while (i < content_count) | ||
{ | { | ||
| Line 319: | Line 436: | ||
.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 : '●') | .html((options.btn_numbers) ? parseInt(i)+1 : '●') | ||
.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 335: | Line 455: | ||
i++; | i++; | ||
} | } | ||
| + | |||
| + | // Adding navigation arrows | ||
if (options.arrows && content_count > 1) | if (options.arrows && content_count > 1) | ||
{ | { | ||
| Line 342: | Line 464: | ||
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 353: | Line 477: | ||
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 361: | Line 488: | ||
.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 371: | Line 499: | ||
} | } | ||
} | } | ||
| + | |||
| + | // 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 387: | Line 521: | ||
} | } | ||
| + | |||
| + | // ************* | ||
| + | // THE FUNCTIONS | ||
| + | // ************* | ||
| + | |||
| + | // Returns the specified content (by array id) | ||
function getContent(id) { | function getContent(id) { | ||
| Line 396: | Line 536: | ||
.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 402: | Line 545: | ||
} | } | ||
| + | // 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 421: | Line 578: | ||
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 432: | Line 598: | ||
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 446: | Line 614: | ||
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 452: | Line 621: | ||
} | } | ||
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 463: | Line 640: | ||
delay = 100; | delay = 100; | ||
} | } | ||
| + | |||
| + | // Animate current element | ||
if (options.transition === 'hslide') { | if (options.transition === 'hslide') { | ||
| Line 475: | Line 654: | ||
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 511: | Line 694: | ||
} | } | ||
} | } | ||
| + | // 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 529: | Line 729: | ||
} | } | ||
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 540: | Line 748: | ||
delay = 100; | delay = 100; | ||
} | } | ||
| + | |||
| + | // Animate current element | ||
if (options.transition === 'hslide') { | if (options.transition === 'hslide') { | ||
| Line 568: | Line 778: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // Animate next element | ||
if (options.transition === 'hslide') | if (options.transition === 'hslide') | ||
{ | { | ||
| Line 606: | Line 818: | ||
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 619: | Line 834: | ||
} | } | ||
} | } | ||
| + | |||
| + | // Change click handlers for arrows | ||
if (options.arrows) | if (options.arrows) | ||
{ | { | ||
| Line 642: | Line 859: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // Change active class for thumbnails | ||
if (options.thumbnails) | if (options.thumbnails) | ||
{ | { | ||
| Line 653: | Line 872: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // 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 666: | Line 889: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // A function that runs on content change, if it exists. | ||
if (typeof options.custom_function == 'function') | if (typeof options.custom_function == 'function') | ||
{ | { | ||
| Line 678: | Line 903: | ||
animating = false; | animating = false; | ||
} | } | ||
| + | |||
| + | // Slide thumbnail wrapper | ||
var thumbnailSlidePosition = 0; | var thumbnailSlidePosition = 0; | ||
function slideThumbnailWrapper(direction, check, backwardforward) | function slideThumbnailWrapper(direction, check, backwardforward) | ||
| Line 688: | Line 915: | ||
} | } | ||
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 708: | Line 939: | ||
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 768: | Line 1,003: | ||
} | } | ||
} | } | ||
| + | |||
| + | // Displays the caption | ||
function displayCaption(container, fadeOut) | function displayCaption(container, fadeOut) | ||
{ | { | ||
| Line 789: | Line 1,026: | ||
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 822: | Line 1,065: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | // 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 834: | Line 1,081: | ||
.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 856: | Line 1,105: | ||
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 878: | Line 1,134: | ||
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 891: | Line 1,149: | ||
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 903: | Line 1,164: | ||
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 912: | Line 1,177: | ||
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 946: | Line 1,213: | ||
}); | }); | ||
| + | // The correct width is returned when all content is fully loaded. | ||
var addedContentArray = []; | var addedContentArray = []; | ||
function updateContentViewlineWidth() | function updateContentViewlineWidth() | ||
| Line 957: | Line 1,225: | ||
} | } | ||
| + | // Remove loading class | ||
showcase.removeClass('showcase-load'); | showcase.removeClass('showcase-load'); | ||
}; | }; | ||
})(jQuery); | })(jQuery); | ||
Latest revision as of 11:45, 16 July 2014
/*
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();
- /
(function(jQuery) {
jQuery.fn.awShowcase = function(options) {
// Default configuration properties 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, /* Trace x and y coordinates for the mouse */ pauseonover: true, stoponclick: true, transition: 'hslide', /* hslide / vslide / fade */ transition_delay: 300, transition_speed: 500, show_caption: 'onload', /* onload / onhover / show */ thumbnails: false, thumbnails_position: 'outside-last', /* outside-last / outside-first / inside-last / inside-first */ thumbnails_direction: 'vertical', /* vertical / horizontal */ thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ 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. */ speed_change: false, /* This prevents user from swithing more then one slide at once */ 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. */ fullscreen_width_x: 15, custom_function: null };
// ***************** // SET UP THE PLUGIN // *****************
// Declare and set up some important variables 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; // Viewline specific variables var content_viewline_width = 10000; var animation_distance = 0; var old_animation_distance = 0; var remaining_width = 0;
// Set up the content wrapper var content_container = jQuery(document.createElement('div')) .css('overflow', 'hidden') .css('position', 'relative') .addClass('showcase-content-container') .prependTo(showcase);
// Set up the showcase for hundred percent width if (options.fit_to_parent) { showcase_width = jQuery(showcase).width() + options.fullscreen_width_x; }
// Set up the showcase for Viewline Mayhem 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(); }
// Set up content and create the content and thumbnail array var contentArray = []; var thumbnailArray = []; var content_count = 0; showcase.children('.showcase-slide').each(function() { // Get content var object = jQuery(this); content_count++;
// If thumbnails are activated if (options.thumbnails) { // Get thumbnail and put in array var thumb = object.find('.showcase-thumbnail'); thumbnailArray.push(thumb); thumb.remove(); }
// Set content width and height var object_width = object.find('.showcase-content').children().width(); var object_height = object.find('.showcase-content').children().height();
// Add content html in array and remove it from DOM contentArray.push(object.html()); object.remove();
// Get correct content var new_object = getContent(content_count-1); if (options.viewline || content_count === 1) { content_container.append(new_object); }
// Viewline setup if (options.viewline) { new_object.css('position', 'relative'); new_object.css('float', 'left'); new_object.css('width', object_width); }
// Set content and content container load height 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(); } } });
// Declare and set up the thumbnail wrapper var thumb_wrapper; var thumbnailStretch = 0; var thumbnailsPerPage = 0; if (options.thumbnails) { // Create wrapper thumb_container = jQuery('<div />'); thumb_restriction = jQuery('<div />'); thumb_wrapper = jQuery('<div />');
// Add content to thumbnail wrapper 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) { // This function is used to extract the correct i value on click return function() { // Disable auto change on click if (myInterval) { pause_loop = true; clearInterval(myInterval); } changeContent(a, b); }; }(i, )); thumb_wrapper.prepend(thumbnail); }
// 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_direction !== 'horizontal') { /* outside & vertical */ 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 { /* outside & horizontal */ jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); //jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear')); }
if (options.thumbnails_position === 'outside-last') { /* outside-last */ showcase.append(thumb_container); if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } } else { /* outside-first */ 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') { /* inside & 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'));
/* inside first */ if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); } /* inside last */ else { thumb_container.css('bottom', 0); } } else { /* inside & vertical */ thumb_container.css({'top' : 0, 'bottom' : 0}); /* inside first */ if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); } /* inside last */ else { thumb_container.css('right', 0); } } content_container.prepend(thumb_container); }
// Add class and style to thumbnail container thumb_container.addClass('showcase-thumbnail-container'); thumb_container.css('overflow', 'hidden');
// Add class and style to thumbnail restriction thumb_restriction.addClass('showcase-thumbnail-restriction'); thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'}); if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); }
// Add class and style to thumbnail wrapper 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');
// Append wrapper and restriction thumb_restriction.append(thumb_wrapper); thumb_container.append(thumb_restriction);
// Add backward button 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);
// Add forward button 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);
// Set the number of thumbnails per page. 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++; } }
// Hide buttons if they're not necessary 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(); }
// Set thumbnail restriction height or width 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); }
// Set thumbnail wrapper width 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)); }); } }
// Set showcase width and height 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); }
// Turn on/off auto slide if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); }
// Pause auto on mouse over 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); } }); }
// Adding navigation buttons if (options.buttons && content_count > 1) { // Create button wrapper jQuery(document.createElement('div')) .css('clear', 'both') .addClass('showcase-button-wrapper') .appendTo(showcase); i = 0; // Add button for each content while (i < content_count) { jQuery(document.createElement('span')) .attr('id', 'showcase-navigation-button-' + i) .addClass((i === 0) ? 'active' : ) // Add numbers or unicode .html((options.btn_numbers) ? parseInt(i)+1 : '●') .click(function(a, b) { // This function is used to extract the correct i value on click return function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(a, b); }; }(i, )) .appendTo(jQuery(showcase).find('.showcase-button-wrapper')); i++; }
// Adding navigation arrows 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); // Left arrow jQuery(document.createElement('div')) .addClass('showcase-arrow-previous') .prependTo('.showcase-button-wrapper', showcase) .click(function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }); // Calc arrow position 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'});
// Right arrow jQuery(document.createElement('div')) .addClass('showcase-arrow-next') .prependTo('.showcase-button-wrapper', showcase) .css({left: posR+'px', marginTop: -(ha/2)+'px'}) .click(function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(current_id+1, 'next'); }); if (options.viewline) { $('.showcase-arrow-previous').hide(); } } }
// Activating the keybord arrow keys if (options.keybord_keys) { jQuery(document).keydown(function(e) { // Disable auto change on click if (options.stoponclick) { pause_loop = true; } if (myInterval) clearInterval(myInterval);
// Left arrow if (e.keyCode === 37) { changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }
// Right arrow if (e.keyCode === 39) { changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); } }); }
// *************
// THE FUNCTIONS
// *************
// Returns the specified content (by array id) 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]);
// Set 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); }
return new_content; }
// Function that runs when content is set to change automatically function autoChange() {
// Set next content id 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 continuous is set to false break the auto change 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'); } }
// Changes the content (no explanation/comments needed :) function changeContent(id, direction) {
// If the next content isn't the current content if (current_id !== id && !animating) {
var obj; var obj2; var delay = 0; 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;
// If we want to display the next content if ((id > current_id && direction !== 'previous') || direction === 'next') {
if (options.viewline) {
if (current_id < content_count-1) {
// Prevent uggly transitions if (!options.speed_change) { animating = true; }
// BugFix updateContentViewlineWidth();
// Pause Autoplay if (options.pauseonover) { window.clearInterval(myInterval); }
// First we check if the content will fill the screen after animation. 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) { obj = addedContentArray[i]; remaining_width += obj.find('.showcase-content').children().width(); }
// If the remaining width is wider than the browser window. 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; });
// Change current content id (if content is finished) if ($('.showcase-arrow-next').is(':visible')) { current_id++; }
$('.showcase-arrow-previous').fadeIn(300); } } else {
// Prevent uggly transitions if (!options.speed_change) { animating = true; }
// Get current and next content element obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id);
// Append next element and set height content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().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) {
content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height() }, 200); delay = 100; }
// Animate current element 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(); }); }
// This will hide them, not display them :) displayAnchors(obj, true); displayCaption(obj, true);
// Animate next element 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); } ); } } } // If we want to display the previous content else if (id < current_id || direction === 'previous') {
if (options.viewline) {
if (current_id !== 0) {
// Prevent uggly transitions if (!options.speed_change) { animating = true; }
// BugFix updateContentViewlineWidth();
// Pause Autoplay if (options.pauseonover) { window.clearInterval(myInterval); }
content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; });
// Set animation distance animation_distance = old_animation_distance;
// Change current content id current_id--;
if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); }
// Set old distance 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 {
// Prevent uggly transitions if (!options.speed_change) { animating = true; }
// Get current and next content element obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id);
// Append next element and set height content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().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) {
content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height()}, 200); delay = 100; }
// Animate current element 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(); }); }
// Animate next element 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) { // Change previous and current content id previous_id = current_id; current_id = id;
// Slide thumbnail wrapper 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); } }
// Change click handlers for arrows 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'); }); }
// Change active class for thumbnails 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 caption is set to 'show' if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); } }
// Change active class for buttons 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++; }); }
// A function that runs on content change, if it exists. 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; }
// Slide thumbnail wrapper 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;
// Set slide x if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; }
// Check if we need to do the slide 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;
// Check if the next active thumbnail is outside the visible area if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; }
// If the next active thumbnail is far away.. 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); } } }
// Displays the caption 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); } }
// Displays the anchors in the current slide function displayAnchors(container, fadeOut) { // Get each anchor tooltip container.find('.showcase-tooltips a').each(function() { if (!fadeOut) { // Get coordinates var coords = jQuery(this).attr('coords'); coords = coords.split(',');
// Style and position anchor 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); } }); }
// Controls the animation for the tooltips var tooltip = null; function animateTooltip(container, x, y, content) { // if tooltip is null (doesn't exsist) if (tooltip === null) { // Create the tooltip 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);
// 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_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))); }
// Fade in the tooltip tooltip.fadeIn(400); } else { // Fade out the tooltip tooltip.fadeOut(400); // Remove it from the DOM tooltip.remove(); // And set the variable to null tooltip = null; } }
/* Returns the correct height for the element, including padding and borders. */ 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; }
/* Returns the correct width for the element, including width, margin, padding and borders. */ 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; }
// Traces the mouse position (used for positioning anchors) if (options.mousetrace) { // Create the div tha displays the coordinates 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();
// Print the coordinates 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() { if ($('.view-page').is(':visible')) { var temp_container = jQuery(document.createElement('div')); temp_container.addClass('showcase-onepage'); showcase.before(temp_container);
// Disable auto change on click 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; });
// The correct width is returned when all content is fully loaded. 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)); }); }
// Remove loading class showcase.removeClass('showcase-load'); };
})(jQuery);
