I am very new here, and new to JS. I have several years of coding in PHP, ASP.net, vb.net, sql . . and more . . but JS is new ground for me.
Also, I am sorry if this is posted in the wrong area . . was not 100% sure where to pass it.
In short, I am using a scrolling Ajax JS script that allows images to scroll from left or right to the center of the page. When you click on them, it will call the JS. This works 100% and I am very happy with it.
By using "<a class="example5". . " it does what it needs to do with the pop up, however by placing it within the html, the pop up works but the scrolling image no longer works.
I think I need to somehow remove the "class="example5"" from the html and put it inside the JS script. But I am not sure how to do that.
Here is the area of the JS script that contains the link that I wish to add the class:
PHP Code:
<script>
function customTitleCreate(itemElem) {
// 1. Create a new blank element to return
var title = $('<div class="title"></div>')
// 2. Add the alt attribute to the title
.append(itemElem.find('img').attr('alt'))
// 3. Add a link to view the full size image
.append(' <a href="'+itemElem.attr('href')+'">(more...)</a>')
// 4. Add the tags from the rel attribute
.append(' <span class="tags">'+itemElem.attr('rel')+'</span>');
return title;
}
function customTitleDestroy( titleElem ) {
titleElem.remove(); // delete the title element
}
<script>
function customTitleCreate(itemElem) {
// 1. Create a new blank element to return
var title = $('<div class="title"></div>')
// 2. Add the alt attribute to the title
.append(itemElem.find('img').attr('alt'))
// 3. Add a link to view the full size image
.append(' <a class="example5" href="'+itemElem.attr('href')+'">(more...)</a>')
// 4. Add the tags from the rel attribute
.append(' <span class="tags">'+itemElem.attr('rel')+'</span>');
return title;
}
function customTitleDestroy( titleElem ) {
titleElem.remove(); // delete the title element
}
Sorry, I will do my best to add all of the related code. I will leave out the css code for now, unless you want to see that as well:
PHP Code:
<script type="text/javascript" src="../../js/development-bundle/jquery-1.3.2.js"></script> <script type="text/javascript" src="../../js/development-bundle/ui/jquery-ui-1.7.3.custom.js"></script> <script type="text/javascript" src="../../js/jquery.jcoverflip.js"></script> <link media="screen" rel="stylesheet" href="cbox/example5/colorbox.css" /> <script src="../../cbox/colorbox/jquery.colorbox.js"></script> </head> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } });
//Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
/ ColorBox v1.3.17.2 - a full featured, light-weight, customizable lightbox based on jQuery 1.3+
// Copyright (c) 2011 Jack Moore - jack@colorpowered.com
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
// Special Handling for IE
isIE = $.browser.msie && !$.support.opacity, // Detects IE6,7,8. IE9 supports opacity. Feature detection alone gave a false positive on at least one phone browser and on some development versions of Chrome, hence the user-agent test.
isIE6 = isIE && $.browser.version < 7,
event_ie6 = prefix + '_IE6',
// jQuery object generator to reduce code size
function $div(id, cssText, div) {
div = document.createElement('div');
if (id) {
div.id = prefix + id;
}
div.style.cssText = cssText || '';
return $(div);
}
// Convert '%' and 'px' values to integers
function setSize(size, dimension) {
return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : $window.height()) / 100) : 1) * parseInt(size, 10));
}
// Checks an href to see if it is a photo.
// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
function isImage(url) {
return settings.photo || /.(gif|png|jpg|jpeg|bmp)(?:?([^#]*))?(?:#(\.*))?$/i.test(url);
}
// Assigns function results to their respective settings. This allows functions to be used as values.
function makeSettings(i) {
settings = $.extend({}, $.data(element, colorbox));
for (i in settings) {
if ($.isFunction(settings[i]) && i.substring(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
settings[i] = settings[i].call(element);
}
}
if (settings.rel !== 'nofollow') {
$related = $('.' + boxElement).filter(function () {
var relRelated = $.data(this, colorbox).rel || this.rel;
return (relRelated === settings.rel);
});
index = $related.index(element);
// Check direct calls to ColorBox.
if (index === -1) {
$related = $related.add(element);
index = $related.length - 1;
}
}
if (!open) {
open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
$box.show();
if (settings.returnFocus) {
try {
element.blur();
$(element).one(event_closed, function () {
try {
this.focus();
} catch (e) {
// do nothing
}
});
} catch (e) {
// do nothing
}
}
// +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5'
$overlay.css({"opacity": +settings.opacity, "cursor": settings.overlayClose ? "pointer" : "auto"}).show();
// Opens inital empty ColorBox prior to content being loaded.
settings.w = setSize(settings.initialWidth, 'x');
settings.h = setSize(settings.initialHeight, 'y');
publicMethod.position();
// ****************
// PUBLIC FUNCTIONS
// Usage format: $.fn.colorbox.close();
// Usage from within an iframe: parent.$.fn.colorbox.close();
// ****************
publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
var $this = this;
options = options || {};
if (!$this[0]) {
if ($this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit.
return $this;
}
// if no selector was given (ie. $.colorbox()), create a temporary element to work with
$this = $('<a/>');
options.open = true; // assume an immediate open
}
if (($.isFunction(options.open) && options.open.call($this)) || options.open) {
launch($this[0]);
}
return $this;
};
// Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
// This preps ColorBox for a speedy open when clicked, and minimizes the burdon on the browser by only
// having to run once, instead of each time colorbox is opened.
publicMethod.init = function () {
// Create & Append jQuery Objects
$window = $(window);
$box = $div().attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''});
$overlay = $div("Overlay", isIE6 ? 'position:absolute' : '').hide();
// Setting padding to remove the need to do size conversions during the animation step.
$box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide();
// Setup button events.
// Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
$next.click(function () {
publicMethod.next();
});
$prev.click(function () {
publicMethod.prev();
});
$close.click(function () {
publicMethod.close();
});
// Adding the 'hover' class allowed the browser to load the hover-state
// background graphics in case the images were not part of a sprite. The class can now can be removed.
$content.children().removeClass('hover');
$overlay.click(function () {
if (settings.overlayClose) {
publicMethod.close();
}
});
// Set Navigation Key Bindings
$(document).bind('keydown.' + prefix, function (e) {
var key = e.keyCode;
if (open && settings.escKey && key === 27) {
e.preventDefault();
publicMethod.close();
}
if (open && settings.arrowKey && $related[1]) {
if (key === 37) {
e.preventDefault();
$prev.click();
} else if (key === 39) {
e.preventDefault();
$next.click();
}
}
});
};
publicMethod.remove = function () {
$box.add($overlay).remove();
$('.' + boxElement).removeData(colorbox).removeClass(boxElement);
};
publicMethod.position = function (speed, loadedCallback) {
var top = 0, left = 0;
$window.unbind('resize.' + prefix);
// remove the modal so that it doesn't influence the document width/height
$box.hide();
if (settings.fixed && !isIE6) {
$box.css({position: 'fixed'});
} else {
top = $window.scrollTop();
left = $window.scrollLeft();
$box.css({position: 'absolute'});
}
// keeps the top and left positions within the browser's viewport.
if (settings.right !== false) {
left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
} else if (settings.left !== false) {
left += setSize(settings.left, 'x');
} else {
left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
}
if (settings.bottom !== false) {
top += Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
} else if (settings.top !== false) {
top += setSize(settings.top, 'y');
} else {
top += Math.round(Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight, 0) / 2);
}
$box.show();
// setting the speed to 0 to reduce the delay between same-sized content.
speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0;
// this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
// but it has to be shrank down around the size of div#colorbox when it's done. If not,
// it can invoke an obscure IE bug when using iframes.
$wrap[0].style.width = $wrap[0].style.height = "9999px";
function modalDimensions(that) {
// loading overlay height has to be explicitly set for IE6.
$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
$loadingOverlay[0].style.height = $loadingOverlay[1].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
}
// shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
$wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
if (loadedCallback) {
loadedCallback();
}
setTimeout(function(){ // small delay before binding onresize due to an IE8 bug.
$window.bind('resize.' + prefix, publicMethod.position);
}, 1);
},
step: function () {
modalDimensions(this);
}
});
};
publicMethod.resize = function (options) {
if (open) {
options = options || {};
if (options.height) {
settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
}
if (options.innerHeight) {
settings.h = setSize(options.innerHeight, 'y');
}
if (!options.innerHeight && !options.height) {
var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
settings.h = $child.height();
$child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
}
$loaded.css({height: settings.h});
$loaded.hide()
.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
.css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
.prependTo($content);
$loadingBay.hide();
// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
//$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
$(photo).css({'float': 'none'});
// Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
if (isIE6) {
$('select').not($box.find('select')).filter(function () {
return this.style.visibility !== 'hidden';
}).css({'visibility': 'hidden'}).one(event_cleanup, function () {
this.style.visibility = 'inherit';
});
}
callback = function () {
var prev, prevSrc, next, nextSrc, total = $related.length, iframe, complete;
if (!open) {
return;
}
function removeFilter() {
if (isIE) {
$box[0].style.removeAttribute('filter');
}
}
complete = function () {
clearTimeout(loadingTimer);
$loadingOverlay.hide();
trigger(event_complete, settings.onComplete);
};
if (isIE) {
//This fadeIn helps the bicubic resampling to kick-in.
if (photo) {
$loaded.fadeIn(100);
}
}
$title.html(settings.title).add($loaded).show();
if (total > 1) { // handle grouping
if (typeof settings.current === "string") {
$current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show();
}
$next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
$prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
prev = index ? $related[index - 1] : $related[total - 1];
next = index < total - 1 ? $related[index + 1] : $related[0];
if (settings.slideshow) {
$slideshow.show();
}
// Preloads images within a rel group
if (settings.preloading) {
nextSrc = $.data(next, colorbox).href || next.href;
prevSrc = $.data(prev, colorbox).href || prev.href;
// Sets the minimum dimensions for use in image scaling
settings.mw = settings.w;
settings.mh = settings.h;
// Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
// If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
if (settings.maxWidth) {
settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
}
if (settings.maxHeight) {
settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
}
if (settings.inline) {
// Inserts an empty placeholder where inline content is being pulled from.
// An event is bound to put inline content back when ColorBox closes or loads new content.
$div().hide().insertBefore($(href)[0]).one(event_purge, function () {
$(this).replaceWith($loaded.children());
});
prep($(href));
} else if (settings.iframe) {
// IFrame element won't be added to the DOM until it is ready to be displayed,
// to avoid problems with DOM-ready JS that might be trying to run in that iframe. prep(" "); } else if (settings.html) { prep(settings.html); } else if (isImage(href)) { $(photo = new Image()) .addClass(prefix + 'Photo') .error(function () { settings.title = false; prep($div('Error').text('This image could not be loaded')); }) .load(function () { var percent; photo.onload = null; //stops animated gifs from firing the onload repeatedly.
if (isIE) { photo.style.msInterpolationMode = 'bicubic'; }
setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise. prep(photo); }, 1); });
setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise. photo.src = href; }, 1); } else if (href) { $loadingBay.load(href, settings.data, function (data, status, xhr) { prep(status === 'error' ? $div('Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents()); }); } };
// Navigates to the next page/image in a set. publicMethod.next = function () { if (!active && $related[1] && (index < $related.length - 1 || settings.loop)) { index = index < $related.length - 1 ? index + 1 : 0; publicMethod.load(); } };
publicMethod.prev = function () { if (!active && $related[1] && (index || settings.loop)) { index = index ? index - 1 : $related.length - 1; publicMethod.load(); } };
// Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close(); publicMethod.close = function () { if (open && !closing) {
// A method for fetching the current element ColorBox is referencing. // returns a jQuery object. publicMethod.element = function () { return $(element); };
publicMethod.settings = defaults;
// Bind the live event before DOM-ready for maximum performance in IE6 & 7. handler = function (e) { // checks to see if it was a non-left mouse-click and for clicks modified with ctrl, shift, or alt. if (!((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey)) { e.preventDefault(); launch(this); } };
*
* jCoverflip - Present your featured content elegantly.
* Version: 1.0.2
* Copyright 2010 New Signature
*
* This program is free software: you can redistribute it and/or modify it under the terms of the
* GNU General Public License as published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with this program.
* If not, see <http://www.gnu.org/licenses/>.
*
* You can contact New Signature by electronic mail at labs@newsignature.com
* or- by U.S. Postal Service at 1100 H St. NW, Suite 940, Washington, DC 20005.
*/
( function( $ ){
//
// Helpers
//
var undefined; // safeguards against anyone who wants to change the value of undefined in the global space
/**
* Animation Queue
*
* The AnimationQueue holds list of AnimationSets that each perform a set of animations. The sets
* run in ordering when the AnimationQueue is animating. As well, the running time is distributed
* across all the sets when the AnimationQueue is animating.
*
* As well, the AnimationQueue can be stopped and started again at any time. AnimationSets can be
* removed when stopped when they are not needed anymore.
*
*/
animationqueue.AnimationQueue = function(){
this.sets = [];
animationqueue.AnimationQueue.prototype = {
/**
* Add an AnimationSet to the end of the queue.
*
* @param animationSet
* The AnimationSet object to add to the end of the queue.
*/
queue: function( animationSet ){
this.sets.push( animationSet );
},
/**
* Start the animation.
*
* @param time
* The total running time of the animation in milliseconds.
*/
start: function( time, callback ){
this.totalTime = time;
this.elapsedTime = 0;
this.isRunning = true;
// calculate the how to divide the time between the sets
// Each set gets 1 part of the time except for the first which can get less if "paused."
var timeShare = 1; // total number of parts to divide the time by
var firstTimeShare = 1; // the part for the first item
if( this.sets.length > 0 ){
timeShare = this.sets.length;
firstTimeShare = this.sets[ 0 ].totalTime > 0? Math.max( 0, Math.min( 1, 1-(this.sets[ 0 ].elapsedTime / this.sets[ 0 ].totalTime) ) ): 1;
//timeShare += firstTimeShare;
}
var startTime = (new Date( )).getTime( );
var i = this.sets.length;
while( i-- ){
this.sets[ i ].stop( );
}
clearInterval( this.poll );
}
},
/**
* Remove an AnimationSet from the queue.
*
* @param animationSet
* The AnimationSet to remove from the queue.
*/
remove: function( animationSet ){
var i = this.sets.length;
while( i-- ){
if( this.sets[ i ] == animationSet ){
var newSets = this.sets.slice( 0, i );
this.animationSet = newSets.push( this.sets.slice( i + 1 ) );
}
}
},
/**
* Get an array of all the AnimationSets in order. The array is not live, but the AnimationSets are.
*
* @return array of AnimationSets
*/
get: function( ){
return this.sets.slice( 0 ); // .slice is to clone the array but not the objects
}
};
/**
* Start the set's animation.
*
* @param time
* The total running time of the animation.
*/
start: function( time ){
// Scale the previous elapsedTime to the new time
this.elapsedTime = this.totalTime == 0? 0: this.elapsedTime/this.totalTime*time;
this.totalTime = time;
// prepare this to run
if( !this.isStepsSorted ){
// Reverse sort
this.steps.sort( function( a, b ){
return b.moment - a.moment;
} );
this.isStepsSorted = true;
}
this.isRunning = true;
// Start the time up here right before any of the animation starts
this.startTime = (new Date()).getTime() - this.elapsedTime;
// Start up the animations
var i = this.animations.length;
while( i-- ){
this.animations[ i ].start( this.totalTime );
}
// The polling function: this will run the steps at the right time and
// check for when the animations are finished.
var self = this;
var animationsIndex = this.animations.length-1;
function poll( timeSince ){
self.elapsedTime = (new Date()).getTime() - self.startTime;
// Run any steps that should be run
while( self.currentStep >= 0 && self.steps[ self.currentStep ].getTime( self.totalTime ) <= self.elapsedTime ){
self.steps[ self.currentStep ].doIt( );
--self.currentStep;
}
// Check if all the animations are finished
if( self.elapsedTime >= self.totalTime && self.currentStep < 0){
while( animationsIndex >= 0 && !self.animations[ animationsIndex ].isRunning ){
--animationsIndex;
}
/**
* Stop the animation.
*/
stop: function( ){
if( this.isRunning ){
this.isRunning = false;
if( this.poll ){
clearInterval( this.poll );
}
var i = this.animations.length;
while( i-- ){
this.animations[ i ].stop( );
}
}
},
/**
* Set meta data for the set.
*
* @param key
* The key for the meta data.
*
* @param data
* The data.
*/
setData: function( key, data ){
this.data[ key ] = data;
},
/**
* Get meta data for the set.
*
* @param key
* The key used to save the meta data.
*
* @return The value of the meta data
*/
getData: function( key ){
return this.data[ key ];
},
/**
* Resets the set to beginning.
*/
reset: function( ){
this.stop( );
this.elapsedTime = 0;
this.currentStep = this.steps.length-1;
}
};
/**
* A single step to occur during a set's animation.
*
* This is useful for handling one off things during a set's animation such
* as switch the z-index.
*
* @param $element
* The jQuery object for the element(s) to update their CSS
*
* @param cssParams
* A key/value object of style properties. @see http://docs.jquery.com/CSS/css#properties
*
* @param moment
* A number from 0 to 1 for when as a percentage of the set's running time the
* step should happen.
*/
animationqueue.AnimationStep = function( $element, cssParams, moment ){
this.$element = $element;
this.cssParams = cssParams;
this.moment = Math.min( 1, Math.max( 0, moment ) );
};
animationqueue.AnimationStep.prototype = {
/**
* Get the time of execution
*
* @param totalTime
* The total of time for the set this belongs to in milliseconds.
*
* @return The time in milliseconds this step needs to execute.
*/
getTime: function( totalTime ){
return this.moment * totalTime;
},
/**
* Does the step action.
*/
doIt: function( ){
this.$element.css( this.cssParams );
}
};
/**
* A single animation object for a jQuery object.
*
* @param $element
* The jQuery object for the element(s) to animate
*
* @param animateParams
* The object of CSS values to animate. @see http://docs.jquery.com/Effects/animate
*/
animationqueue.Animation = function( $element, animateParams ){
this.$element = $element;
this.animateParams = animateParams;
this.isRunning = false;
};
animationqueue.Animation.prototype = {
/**
* Start the animation.
*
* @param time
* The running time of the animation (and the step) in milliseconds.
*/
start: function( time ){
this.$element.stop( );
/ Static methods $.jcoverflip = { /** * Used for wrapping the animation for an element for returned by beforeCss, afterCss and * currentCss options. * * @param element * The jQuery element to run the animation on. * * @param animate * An object with CSS keys and values to animate to. * * @param steps * An object with keys from 0 to 1 (0 to 100%) for how far along in the animation (0: start, * 0.5: half way through, 1: end) with the value being an object of CSS keys and values to change. * This is for discrete values that need to change such as z-index. * */ animationElement: function( element, animate, steps ){ return { element: element, animate: animate, steps: steps }; },
/** * Find the item element and index number that the element is associated. * * @param element * The element that either is the item element or descendant element of the item element. * * @return * null - if no item element is found * { element: <the item element>, index: <the item index> } * */ getItemFromElement: function( element ){ element = $( element ); var item = element.hasClass( 'ui-jcoverflip--item' )? element : element.parents( '.ui-jcoverflip--item' );
// The widget $.widget( 'ui.jcoverflip', { _init: function( ){ // init some internal values this.animationQueue = new animationqueue.AnimationQueue( ); this.isInit = false; // used for setting up the CSS
// Used to queue up overlapping goTo() calls since they come in async this.goToPoll = { id: null }; this.goToQueue = [ ];
// Get the title for each item var i = items.size( ); while( i-- ){ var el = items.eq( i );
// Tell the item what its index is el.data( 'jcoverflip__index', i );
// Create the titles for the coverflow items var title = this.options.titles.create( el ); title.css( { display: 'none' } ).addClass( 'ui-jcoverflip--title' ).appendTo( this.element );
el.data( 'jcoverflip__titleElement', title ); }
// Bind the click action for when the user clicks on the item to change the current this.element.click( proxy( this, this._clickItem ) );
// setup the positioning of the elements, pass 0 for time, pass true to flag to init this._goTo( this.options.current, 0, true );
// Add any addition controls (such as a scroll bar) this.options.controls.create( this.element, this.length() ); },
/** * The click event for an item. If the item is not current, * then it calls the current() and stops the event. */ _clickItem: function( event ){ if( this.options.disabled == true ){ return; }
var item = $.jcoverflip.getItemFromElement( event.target );
/** * Parses the parameters for next and previous methods. Any of the parameters are optional. */ _nextAndPrevParameters: function( by, wrapAround, callback, originalEvent ){
/** * Step to the right from the current. * * @param by * (optional) An integer to step to the right by. Defaults to 1. * * @param wrapAround * (optional) A boolean flag to wrap around if moving past the end. Defaults to true. * * @return * New current number */ next: function( by, wrapAround, callback, originalEvent ){ if( this.options.disabled == true ){ return; }
var params = this._nextAndPrevParameters( by, wrapAround, callback, originalEvent );
_nextAux: function( by, wrapAround, callback, originalEvent, eventType ){ by = by === undefined && isNaN( by ) ? 1 : parseInt( by ); wrapAround = wrapAround !== false;
var current = this.current( ); var oldCurrent = current; var length = this.length( );
if( wrapAround ){ current = (current + by) % length; // If "current + by" is negative, then the result of "%" is between -(length-1) and -1. // Add the length, if negative, to bring the index back to a valid number current = current < 0 ? current + length : current; } else { current = Math.min( length-1, Math.max( 0, current + by ) ); }
if( eventType && oldCurrent != current ){ var event = $.Event( originalEvent ); event.type = this.widgetEventPrefix + eventType; callback.call( this.element, event, { from: oldCurrent, to: current } ); this._trigger( eventType, originalEvent, { from: oldCurrent, to: current } ); }
return current; },
/** * Step to the left from the current. * * @param by * (optional) An integer to step to the left by. Defaults to 1. * * @param wrapAround * (optional) A boolean flag to wrap around if moving past the end. Defaults to true. * * @return * New current number * */ previous: function( by, wrapAround, callback, originalEvent ){ if( this.options.disabled == true ){ return; }
var params = this._nextAndPrevParameters( by, wrapAround, callback, originalEvent );
var from = this.current( ); var to = this.current( 0, originalEvent ); if( from != to ){ var event = $.Event( originalEvent ); event.type = this.widgetEventPrefix + 'first'; callback.call( this.element, event, { from: from, to: to } ); this._trigger( 'first', originalEvent, { from: from, to: to } ); } },
/** * Go all the way to the right. */ last: function( callback, originalEvent ){ if( this.options.disabled == true ){ return; }
var from = this.current( ); var to = this.current( this.length( ) - 1, originalEvent ); if( from != to ){ var event = $.Event( originalEvent ); event.type = this.widgetEventPrefix + 'last'; callback.call( this.element, event, { from: from, to: to } ); this._trigger( 'last', originalEvent, { from: from, to: to } ); } },
/** * Gets or sets the current item. * * @param originalEvent (optional) * Pass an event object along to be assigned to the originalEvent for the event object passed * along with the triggered events of start, stop and change. */ current: function( newCurrent, originalEvent ){
/** * Go to a particular coverflow item. * * @param index * The item index. * * @param time * Optional. The time to do the animation to the new item in. * */ _goTo: function( index, time, force, originalEvent ){ if( this.options.disabled == true ){ return; }
// Get the time to run time = time === undefined? this.options.time: parseInt( time );
// Setup current and oldCurrent var oldCurrent = this.options.current; var current = Math.floor( Math.max( 0, Math.min( index, this.length( )-1 ) ) ); this.options.current = current;
// Start working on the animation queue // 1. Stop the current animation // 2. Remove sets that are moving away from the current item // 3. Add needed sets to move towards the current item // 4. Start the animation queue this.animationQueue.stop( );
// Clear out any sets that are moving away from the current item var animationSets = this.animationQueue.get( ); var i = animationSets.length; while( i-- ){ var to = animationSets[ i ].getData( 'to' ); var goingToTheRight = animationSets[ i ].getData( 'goingToTheRight' ); var rightOfCurrent = to > current; if( rightOfCurrent != goingToTheRight ){ this.animationQueue.remove( animationSets[ i ] ); } }
animationSets = this.animationQueue.get( ); // update it since we may have changed the it by removing sets above // How many steps from the old current item to the new current item var stepsToCurrent = animationSets.length > 0? animationSets.pop( ).getData( 'to' ) : oldCurrent; var goingToTheRight = stepsToCurrent < current; // direction of movement stepsToCurrent += goingToTheRight? 1: -1; // advance to the next since we don't need to animate to our current position
// Special case for the first run if( force ){ stepsToCurrent = current; }
var items = this.items( ); // Add sets for each step // The test works for moving in both directions while( ( goingToTheRight && stepsToCurrent <= current ) || ( !goingToTheRight && stepsToCurrent >= current ) || ( force && stepsToCurrent == current ) ){ // Create a set var animationSet = new animationqueue.AnimationSet( ); this.animationQueue.queue( animationSet ); animationSet.setData( 'goingToTheRight', goingToTheRight ); animationSet.setData( 'to', stepsToCurrent );
// Setup animation for all the items var i = items.length; while( i-- ){ var el = items.eq( i ); if( i < stepsToCurrent ){ var css = this.options.beforeCss( el, this.element, stepsToCurrent-i-1 );
} else if( i > stepsToCurrent ){ var css = this.options.afterCss( el, this.element, i-stepsToCurrent-1 );
} else { // i == stepsToCurrent var css = this.options.currentCss( el, this.element, i-stepsToCurrent-1 ); }
// Push all the animation info onto the animation queue var j = css.length; while( j-- ){ var cssI = css[ j ]; animationSet.add( new animationqueue.Animation( cssI.element, cssI.animate ) ); for( var step in cssI.steps ){ animationSet.add( new animationqueue.AnimationStep( cssI.element, cssI.steps[ step ], parseFloat( step ) ) ); } } } // endwhile( i-- ) End the looping through all the items stepsToCurrent += goingToTheRight? 1: -1; } // endwhile( ) End looping through all the steps from current to i
// hide/show the title var titleElement = items.eq( current ).data( 'jcoverflip__titleElement' ); if( titleElement ){ this.options.titleAnimateIn( titleElement, time, goingToTheRight ); }
if( current != oldCurrent ){ // prevent the case where current and oldCurrent are the same
var titleElement = items.eq( oldCurrent ).data( 'jcoverflip__titleElement' );
if( titleElement ){ this.options.titleAnimateOut( titleElement, time, goingToTheRight ); } }
if( !force ){ // Trigger the start event this._trigger( 'start', originalEvent, { to: current, from: oldCurrent } ); // run the animation and set a callback to trigger the stop event this.animationQueue.start( time, proxy( this, function( timeElapsed ){ this._trigger( 'stop', originalEvent, { to: current, from: oldCurrent, time: timeElapsed} ); } ) );
this._trigger( 'change', originalEvent, { to: current, from: oldCurrent } ); } else { this.animationQueue.start( time, nofn ); }
// Used to create the functions for creating AnimationSteps function stepFactory( el, css ){ return function( ){ el.css( css ); }; };
},
/** * Get the item elements * * Returns the items based on the selector string found in options.items, if not defined, then * the children of the jcoverflip element will be the items. * * @param reload - boolean flag to clear the cache of elements that are the items * * @return jQuery object of items */ items: function( reload ){ if( this.itemsCache === undefined || !!reload ){ if( this.options.items ){ this.itemsCache = this.element.find( this.options.items ); } else { this.itemsCache = this.element.children( ); } }
titles: { /** * * @param el - item element * * @return jQuery element object of the title * * Order for finding the title * 1) An element with a class of "title" * 2) The title attribute of the item * 3) The alt attribute of the item * 4) The first title or alt attribute of a child element of the item */ create: function( el ){ var titleText = ''; var title = $( [] ); var titleEl = el.find( '.title:first' ); if( titleEl.size( ) == 1 ){ title = titleEl.clone( true ); titleEl.css( 'display', 'none' ); title.data( 'jcoverflip__origin', 'cloned' ); title.data( 'jcoverflip__source', titleEl ); } else if( el.attr( 'title' ) ) { titleText = el.attr( 'title' ); } else if( el.attr( 'alt' ) ) { titleText = el.attr( 'alt' ); } else { titleEl = el.find( '[title], [alt]' ).eq( 0 ); if( titleEl.size( ) == 1 ){ titleText = titleEl.attr( 'title' ) || titleEl.attr( 'alt' ) || ''; } }
Before you post, read our: 
