Created
December 6, 2010 22:51
-
-
Save jonathonbyrdziak/731138 to your computer and use it in GitHub Desktop.
jQuery slideshowaz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.ad-gallery { | |
width: 600px; | |
} | |
.ad-gallery, .ad-gallery * { | |
margin: 0; | |
padding: 0; | |
} | |
.ad-gallery .ad-image-wrapper { | |
width: 100%; | |
height: 400px; | |
margin-bottom: 10px; | |
position: relative; | |
overflow: hidden; | |
} | |
.ad-gallery .ad-image-wrapper .ad-loader { | |
position: absolute; | |
z-index: 10; | |
top: 48%; | |
left: 48%; | |
border: 1px solid #CCC; | |
} | |
.ad-gallery .ad-image-wrapper .ad-next { | |
position: absolute; | |
right: 0; | |
top: 0; | |
width: 25%; | |
height: 100%; | |
cursor: pointer; | |
display: block; | |
z-index: 100; | |
} | |
.ad-gallery .ad-image-wrapper .ad-prev { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 25%; | |
height: 100%; | |
cursor: pointer; | |
display: block; | |
z-index: 100; | |
} | |
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { | |
/* Or else IE will hide it */ | |
background: url(non-existing.jpg)\9 | |
} | |
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { | |
background: url(ad_prev.png); | |
width: 30px; | |
height: 30px; | |
display: none; | |
position: absolute; | |
top: 47%; | |
left: 0; | |
z-index: 101; | |
} | |
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image { | |
background: url(ad_next.png); | |
width: 30px; | |
height: 30px; | |
right: 0; | |
left: auto; | |
} | |
.ad-gallery .ad-image-wrapper .ad-image { | |
position: absolute; | |
overflow: hidden; | |
top: 0; | |
left: 0; | |
z-index: 9; | |
} | |
.ad-gallery .ad-image-wrapper .ad-image a img { | |
border: 0; | |
} | |
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description { | |
position: absolute; | |
bottom: 0px; | |
left: 0px; | |
padding: 7px; | |
text-align: left; | |
width: 100%; | |
z-index: 2; | |
background: url(opa75.png); | |
color: #000; | |
} | |
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { | |
background: none; | |
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png'); | |
} | |
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { | |
display: block; | |
} | |
.ad-gallery .ad-controls { | |
height: 20px; | |
} | |
.ad-gallery .ad-info { | |
float: left; | |
} | |
.ad-gallery .ad-slideshow-controls { | |
float: right; | |
} | |
.ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { | |
padding-left: 5px; | |
cursor: pointer; | |
} | |
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { | |
padding-left: 5px; | |
font-size: 0.9em; | |
} | |
.ad-gallery .ad-slideshow-running .ad-slideshow-start { | |
cursor: default; | |
font-style: italic; | |
} | |
.ad-gallery .ad-nav { | |
width: 100%; | |
position: relative; | |
} | |
.ad-gallery .ad-forward, .ad-gallery .ad-back { | |
position: absolute; | |
top: 0; | |
height: 100%; | |
z-index: 10; | |
} | |
/* IE 6 doesn't like height: 100% */ | |
* html .ad-gallery .ad-forward, .ad-gallery .ad-back { | |
height: 100px; | |
} | |
.ad-gallery .ad-back { | |
cursor: pointer; | |
left: -20px; | |
width: 13px; | |
display: block; | |
background: url(ad_scroll_back.png) 0px 22px no-repeat; | |
} | |
.ad-gallery .ad-forward { | |
cursor: pointer; | |
display: block; | |
right: -20px; | |
width: 13px; | |
background: url(ad_scroll_forward.png) 0px 22px no-repeat; | |
} | |
.ad-gallery .ad-nav .ad-thumbs { | |
overflow: hidden; | |
width: 100%; | |
} | |
.ad-gallery .ad-thumbs .ad-thumb-list { | |
float: left; | |
width: 9000px; | |
list-style: none; | |
} | |
.ad-gallery .ad-thumbs li { | |
float: left; | |
padding-right: 5px; | |
} | |
.ad-gallery .ad-thumbs li a { | |
display: block; | |
} | |
.ad-gallery .ad-thumbs li a img { | |
border: 3px solid #CCC; | |
display: block; | |
} | |
.ad-gallery .ad-thumbs li a.ad-active img { | |
border: 3px solid #616161; | |
} | |
/* Can't do display none, since Opera won't load the images then */ | |
.ad-preloads { | |
position: absolute; | |
left: -9000px; | |
top: -9000px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright (c) 2010 Anders Ekdahl (http://coffeescripter.com/) | |
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) | |
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. | |
* | |
* Version: 1.2.4 | |
* | |
* Demo and documentation: http://coffeescripter.com/code/ad-gallery/ | |
*/ | |
(function($) { | |
$.fn.adGallery = function(options) { | |
var defaults = { loader_image: 'loader.gif', | |
start_at_index: 0, | |
description_wrapper: false, | |
thumb_opacity: 0.7, | |
animate_first_image: false, | |
animation_speed: 400, | |
width: false, | |
height: false, | |
display_next_and_prev: true, | |
display_back_and_forward: true, | |
scroll_jump: 0, // If 0, it jumps the width of the container | |
slideshow: { | |
enable: true, | |
autostart: false, | |
speed: 5000, | |
start_label: 'Start', | |
stop_label: 'Stop', | |
stop_on_scroll: true, | |
countdown_prefix: '(', | |
countdown_sufix: ')', | |
onStart: false, | |
onStop: false | |
}, | |
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none' | |
enable_keyboard_move: true, | |
cycle: true, | |
callbacks: { | |
init: false, | |
afterImageVisible: false, | |
beforeImageVisible: false | |
} | |
}; | |
var settings = $.extend(false, defaults, options); | |
if(options && options.slideshow) { | |
settings.slideshow = $.extend(false, defaults.slideshow, options.slideshow); | |
}; | |
if(!settings.slideshow.enable) { | |
settings.slideshow.autostart = false; | |
}; | |
var galleries = []; | |
$(this).each(function() { | |
var gallery = new AdGallery(this, settings); | |
galleries[galleries.length] = gallery; | |
}); | |
// Sorry, breaking the jQuery chain because the gallery instances | |
// are returned so you can fiddle with them | |
return galleries; | |
}; | |
function VerticalSlideAnimation(img_container, direction, desc) { | |
var current_top = parseInt(img_container.css('top'), 10); | |
if(direction == 'left') { | |
var old_image_top = '-'+ this.image_wrapper_height +'px'; | |
img_container.css('top', this.image_wrapper_height +'px'); | |
} else { | |
var old_image_top = this.image_wrapper_height +'px'; | |
img_container.css('top', '-'+ this.image_wrapper_height +'px'); | |
}; | |
if(desc) { | |
desc.css('bottom', '-'+ desc[0].offsetHeight +'px'); | |
desc.animate({bottom: 0}, this.settings.animation_speed * 2); | |
}; | |
if(this.current_description) { | |
this.current_description.animate({bottom: '-'+ this.current_description[0].offsetHeight +'px'}, this.settings.animation_speed * 2); | |
}; | |
return {old_image: {top: old_image_top}, | |
new_image: {top: current_top}}; | |
}; | |
function HorizontalSlideAnimation(img_container, direction, desc) { | |
var current_left = parseInt(img_container.css('left'), 10); | |
if(direction == 'left') { | |
var old_image_left = '-'+ this.image_wrapper_width +'px'; | |
img_container.css('left',this.image_wrapper_width +'px'); | |
} else { | |
var old_image_left = this.image_wrapper_width +'px'; | |
img_container.css('left','-'+ this.image_wrapper_width +'px'); | |
}; | |
if(desc) { | |
desc.css('bottom', '-'+ desc[0].offsetHeight +'px'); | |
desc.animate({bottom: 0}, this.settings.animation_speed * 2); | |
}; | |
if(this.current_description) { | |
this.current_description.animate({bottom: '-'+ this.current_description[0].offsetHeight +'px'}, this.settings.animation_speed * 2); | |
}; | |
return {old_image: {left: old_image_left}, | |
new_image: {left: current_left}}; | |
}; | |
function ResizeAnimation(img_container, direction, desc) { | |
var image_width = img_container.width(); | |
var image_height = img_container.height(); | |
var current_left = parseInt(img_container.css('left'), 10); | |
var current_top = parseInt(img_container.css('top'), 10); | |
img_container.css({width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2}); | |
return {old_image: {width: 0, | |
height: 0, | |
top: this.image_wrapper_height / 2, | |
left: this.image_wrapper_width / 2}, | |
new_image: {width: image_width, | |
height: image_height, | |
top: current_top, | |
left: current_left}}; | |
}; | |
function FadeAnimation(img_container, direction, desc) { | |
img_container.css('opacity', 0); | |
return {old_image: {opacity: 0}, | |
new_image: {opacity: 1}}; | |
}; | |
// Sort of a hack, will clean this up... eventually | |
function NoneAnimation(img_container, direction, desc) { | |
img_container.css('opacity', 0); | |
return {old_image: {opacity: 0}, | |
new_image: {opacity: 1}, | |
speed: 0}; | |
}; | |
function AdGallery(wrapper, settings) { | |
this.init(wrapper, settings); | |
}; | |
AdGallery.prototype = { | |
// Elements | |
wrapper: false, | |
image_wrapper: false, | |
gallery_info: false, | |
nav: false, | |
loader: false, | |
preloads: false, | |
thumbs_wrapper: false, | |
scroll_back: false, | |
scroll_forward: false, | |
next_link: false, | |
prev_link: false, | |
slideshow: false, | |
image_wrapper_width: 0, | |
image_wrapper_height: 0, | |
current_index: 0, | |
current_image: false, | |
current_description: false, | |
nav_display_width: 0, | |
settings: false, | |
images: false, | |
in_transition: false, | |
animations: false, | |
init: function(wrapper, settings) { | |
var context = this; | |
this.wrapper = $(wrapper); | |
this.settings = settings; | |
this.setupElements(); | |
this.setupAnimations(); | |
if(this.settings.width) { | |
this.image_wrapper_width = this.settings.width; | |
this.image_wrapper.width(this.settings.width); | |
this.wrapper.width(this.settings.width); | |
} else { | |
this.image_wrapper_width = this.image_wrapper.width(); | |
}; | |
if(this.settings.height) { | |
this.image_wrapper_height = this.settings.height; | |
this.image_wrapper.height(this.settings.height); | |
} else { | |
this.image_wrapper_height = this.image_wrapper.height(); | |
}; | |
this.nav_display_width = this.nav.width(); | |
this.current_index = 0; | |
this.current_image = false; | |
this.current_description = false; | |
this.in_transition = false; | |
this.findImages(); | |
if(this.settings.display_next_and_prev) { | |
this.initNextAndPrev(); | |
}; | |
// The slideshow needs a callback to trigger the next image to be shown | |
// but we don't want to give it access to the whole gallery instance | |
var nextimage_callback = function(callback) { | |
return context.nextImage(callback); | |
}; | |
this.slideshow = new AdGallerySlideshow(nextimage_callback, this.settings.slideshow); | |
this.controls.append(this.slideshow.create()); | |
if(this.settings.slideshow.enable) { | |
this.slideshow.enable(); | |
} else { | |
this.slideshow.disable(); | |
}; | |
if(this.settings.display_back_and_forward) { | |
this.initBackAndForward(); | |
}; | |
if(this.settings.enable_keyboard_move) { | |
this.initKeyEvents(); | |
}; | |
var start_at = parseInt(this.settings.start_at_index, 10); | |
if(window.location.hash && window.location.hash.indexOf('#ad-image') === 0) { | |
start_at = window.location.hash.replace(/[^0-9]+/g, ''); | |
// Check if it's a number | |
if((start_at * 1) != start_at) { | |
start_at = this.settings.start_at_index; | |
}; | |
}; | |
this.loading(true); | |
this.showImage(start_at, | |
function() { | |
// We don't want to start the slideshow before the image has been | |
// displayed | |
if(context.settings.slideshow.autostart) { | |
context.preloadImage(start_at + 1); | |
context.slideshow.start(); | |
}; | |
} | |
); | |
this.fireCallback(this.settings.callbacks.init); | |
}, | |
setupAnimations: function() { | |
this.animations = { | |
'slide-vert': VerticalSlideAnimation, | |
'slide-hori': HorizontalSlideAnimation, | |
'resize': ResizeAnimation, | |
'fade': FadeAnimation, | |
'none': NoneAnimation | |
}; | |
}, | |
setupElements: function() { | |
this.controls = this.wrapper.find('.ad-controls'); | |
this.gallery_info = $('<p class="ad-info"></p>'); | |
this.controls.append(this.gallery_info); | |
this.image_wrapper = this.wrapper.find('.ad-image-wrapper'); | |
this.image_wrapper.empty(); | |
this.nav = this.wrapper.find('.ad-nav'); | |
this.thumbs_wrapper = this.nav.find('.ad-thumbs'); | |
this.preloads = $('<div class="ad-preloads"></div>'); | |
this.loader = $('<img class="ad-loader" src="'+ this.settings.loader_image +'">'); | |
this.image_wrapper.append(this.loader); | |
this.loader.hide(); | |
$(document.body).append(this.preloads); | |
}, | |
loading: function(bool) { | |
if(bool) { | |
this.loader.show(); | |
} else { | |
this.loader.hide(); | |
}; | |
}, | |
addAnimation: function(name, fn) { | |
if($.isFunction(fn)) { | |
this.animations[name] = fn; | |
}; | |
}, | |
findImages: function() { | |
var context = this; | |
this.images = []; | |
var thumb_wrapper_width = 0; | |
var thumbs_loaded = 0; | |
var thumbs = this.thumbs_wrapper.find('a'); | |
var thumb_count = thumbs.length; | |
if(this.settings.thumb_opacity < 1) { | |
thumbs.find('img').css('opacity', this.settings.thumb_opacity); | |
}; | |
thumbs.each( | |
function(i) { | |
var link = $(this); | |
var image_src = link.attr('href'); | |
var thumb = link.find('img'); | |
// Check if the thumb has already loaded | |
if(!context.isImageLoaded(thumb[0])) { | |
thumb.load( | |
function() { | |
thumb_wrapper_width += this.parentNode.parentNode.offsetWidth; | |
thumbs_loaded++; | |
} | |
); | |
} else{ | |
thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth; | |
thumbs_loaded++; | |
}; | |
link.addClass('ad-thumb'+ i); | |
link.click( | |
function() { | |
context.showImage(i); | |
context.slideshow.stop(); | |
return false; | |
} | |
).hover( | |
function() { | |
if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) { | |
$(this).find('img').fadeTo(300, 1); | |
}; | |
context.preloadImage(i); | |
}, | |
function() { | |
if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) { | |
$(this).find('img').fadeTo(300, context.settings.thumb_opacity); | |
}; | |
} | |
); | |
var link = false; | |
if(thumb.data('ad-link')) { | |
link = thumb.data('ad-link'); | |
} else if(thumb.attr('longdesc') && thumb.attr('longdesc').length) { | |
link = thumb.attr('longdesc'); | |
}; | |
var desc = false; | |
if(thumb.data('ad-desc')) { | |
desc = thumb.data('ad-desc'); | |
} else if(thumb.attr('alt') && thumb.attr('alt').length) { | |
desc = thumb.attr('alt'); | |
}; | |
var title = false; | |
if(thumb.data('ad-title')) { | |
title = thumb.data('ad-title'); | |
} else if(thumb.attr('title') && thumb.attr('title').length) { | |
title = thumb.attr('title'); | |
}; | |
context.images[i] = { thumb: thumb.attr('src'), image: image_src, error: false, | |
preloaded: false, desc: desc, title: title, size: false, | |
link: link }; | |
} | |
); | |
// Wait until all thumbs are loaded, and then set the width of the ul | |
var inter = setInterval( | |
function() { | |
if(thumb_count == thumbs_loaded) { | |
thumb_wrapper_width -= 100; | |
var list = context.nav.find('.ad-thumb-list'); | |
list.css('width', thumb_wrapper_width +'px'); | |
var i = 1; | |
var last_height = list.height(); | |
while(i < 201) { | |
list.css('width', (thumb_wrapper_width + i) +'px'); | |
if(last_height != list.height()) { | |
break; | |
} | |
last_height = list.height(); | |
i++; | |
} | |
clearInterval(inter); | |
}; | |
}, | |
100 | |
); | |
}, | |
initKeyEvents: function() { | |
var context = this; | |
$(document).keydown( | |
function(e) { | |
if(e.keyCode == 39) { | |
// right arrow | |
context.nextImage(); | |
context.slideshow.stop(); | |
} else if(e.keyCode == 37) { | |
// left arrow | |
context.prevImage(); | |
context.slideshow.stop(); | |
}; | |
} | |
); | |
}, | |
initNextAndPrev: function() { | |
this.next_link = $('<div class="ad-next"><div class="ad-next-image"></div></div>'); | |
this.prev_link = $('<div class="ad-prev"><div class="ad-prev-image"></div></div>'); | |
this.image_wrapper.append(this.next_link); | |
this.image_wrapper.append(this.prev_link); | |
var context = this; | |
this.prev_link.add(this.next_link).mouseover( | |
function(e) { | |
// IE 6 hides the wrapper div, so we have to set it's width | |
$(this).css('height', context.image_wrapper_height); | |
$(this).find('div').show(); | |
} | |
).mouseout( | |
function(e) { | |
$(this).find('div').hide(); | |
} | |
).click( | |
function() { | |
if($(this).is('.ad-next')) { | |
context.nextImage(); | |
context.slideshow.stop(); | |
} else { | |
context.prevImage(); | |
context.slideshow.stop(); | |
}; | |
} | |
).find('div').css('opacity', 0.7); | |
}, | |
initBackAndForward: function() { | |
var context = this; | |
this.scroll_forward = $('<div class="ad-forward"></div>'); | |
this.scroll_back = $('<div class="ad-back"></div>'); | |
this.nav.append(this.scroll_forward); | |
this.nav.prepend(this.scroll_back); | |
var has_scrolled = 0; | |
var thumbs_scroll_interval = false; | |
$(this.scroll_back).add(this.scroll_forward).click( | |
function() { | |
// We don't want to jump the whole width, since an image | |
// might be cut at the edge | |
var width = context.nav_display_width - 50; | |
if(context.settings.scroll_jump > 0) { | |
var width = context.settings.scroll_jump; | |
}; | |
if($(this).is('.ad-forward')) { | |
var left = context.thumbs_wrapper.scrollLeft() + width; | |
} else { | |
var left = context.thumbs_wrapper.scrollLeft() - width; | |
}; | |
if(context.settings.slideshow.stop_on_scroll) { | |
context.slideshow.stop(); | |
}; | |
context.thumbs_wrapper.animate({scrollLeft: left +'px'}); | |
return false; | |
} | |
).css('opacity', 0.6).hover( | |
function() { | |
var direction = 'left'; | |
if($(this).is('.ad-forward')) { | |
direction = 'right'; | |
}; | |
thumbs_scroll_interval = setInterval( | |
function() { | |
has_scrolled++; | |
// Don't want to stop the slideshow just because we scrolled a pixel or two | |
if(has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) { | |
context.slideshow.stop(); | |
}; | |
var left = context.thumbs_wrapper.scrollLeft() + 1; | |
if(direction == 'left') { | |
left = context.thumbs_wrapper.scrollLeft() - 1; | |
}; | |
context.thumbs_wrapper.scrollLeft(left); | |
}, | |
10 | |
); | |
$(this).css('opacity', 1); | |
}, | |
function() { | |
has_scrolled = 0; | |
clearInterval(thumbs_scroll_interval); | |
$(this).css('opacity', 0.6); | |
} | |
); | |
}, | |
_afterShow: function() { | |
this.gallery_info.html((this.current_index + 1) +' / '+ this.images.length); | |
if(!this.settings.cycle) { | |
// Needed for IE | |
this.prev_link.show().css('height', this.image_wrapper_height); | |
this.next_link.show().css('height', this.image_wrapper_height); | |
if(this.current_index == (this.images.length - 1)) { | |
this.next_link.hide(); | |
}; | |
if(this.current_index == 0) { | |
this.prev_link.hide(); | |
}; | |
}; | |
this.fireCallback(this.settings.callbacks.afterImageVisible); | |
}, | |
/** | |
* Checks if the image is small enough to fit inside the container | |
* If it's not, shrink it proportionally | |
*/ | |
_getContainedImageSize: function(image_width, image_height) { | |
if(image_height > this.image_wrapper_height) { | |
var ratio = image_width / image_height; | |
image_height = this.image_wrapper_height; | |
image_width = this.image_wrapper_height * ratio; | |
}; | |
if(image_width > this.image_wrapper_width) { | |
var ratio = image_height / image_width; | |
image_width = this.image_wrapper_width; | |
image_height = this.image_wrapper_width * ratio; | |
}; | |
return {width: image_width, height: image_height}; | |
}, | |
/** | |
* If the image dimensions are smaller than the wrapper, we position | |
* it in the middle anyway | |
*/ | |
_centerImage: function(img_container, image_width, image_height) { | |
img_container.css('top', '0px'); | |
if(image_height < this.image_wrapper_height) { | |
var dif = this.image_wrapper_height - image_height; | |
img_container.css('top', (dif / 2) +'px'); | |
}; | |
img_container.css('left', '0px'); | |
if(image_width < this.image_wrapper_width) { | |
var dif = this.image_wrapper_width - image_width; | |
img_container.css('left', (dif / 2) +'px'); | |
}; | |
}, | |
_getDescription: function(image) { | |
var desc = false; | |
if(image.desc.length || image.title.length) { | |
var title = ''; | |
if(image.title.length) { | |
title = '<strong class="ad-description-title">'+ image.title +'</strong>'; | |
}; | |
var desc = ''; | |
if(image.desc.length) { | |
desc = '<span>'+ image.desc +'</span>'; | |
}; | |
desc = $('<p class="ad-image-description">'+ title + desc +'</p>'); | |
}; | |
return desc; | |
}, | |
/** | |
* @param function callback Gets fired when the image has loaded, is displaying | |
* and it's animation has finished | |
*/ | |
showImage: function(index, callback) { | |
if(this.images[index] && !this.in_transition) { | |
var context = this; | |
var image = this.images[index]; | |
this.in_transition = true; | |
if(!image.preloaded) { | |
this.loading(true); | |
this.preloadImage(index, function() { | |
context.loading(false); | |
context._showWhenLoaded(index, callback); | |
}); | |
} else { | |
this._showWhenLoaded(index, callback); | |
}; | |
}; | |
}, | |
/** | |
* @param function callback Gets fired when the image has loaded, is displaying | |
* and it's animation has finished | |
*/ | |
_showWhenLoaded: function(index, callback) { | |
if(this.images[index]) { | |
var context = this; | |
var image = this.images[index]; | |
var img_container = $(document.createElement('div')).addClass('ad-image'); | |
var img = $(new Image()).attr('src', image.image); | |
if(image.link) { | |
var link = $('<a href="'+ image.link +'" target="_blank"></a>'); | |
link.append(img); | |
img_container.append(link); | |
} else { | |
img_container.append(img); | |
} | |
this.image_wrapper.prepend(img_container); | |
var size = this._getContainedImageSize(image.size.width, image.size.height); | |
img.attr('width', size.width); | |
img.attr('height', size.height); | |
img_container.css({width: size.width +'px', height: size.height +'px'}); | |
this._centerImage(img_container, size.width, size.height); | |
var desc = this._getDescription(image, img_container); | |
if(desc) { | |
if(!this.settings.description_wrapper) { | |
img_container.append(desc); | |
var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10); | |
desc.css('width', width +'px'); | |
} else { | |
this.settings.description_wrapper.append(desc); | |
} | |
}; | |
this.highLightThumb(this.nav.find('.ad-thumb'+ index)); | |
var direction = 'right'; | |
if(this.current_index < index) { | |
direction = 'left'; | |
}; | |
this.fireCallback(this.settings.callbacks.beforeImageVisible); | |
if(this.current_image || this.settings.animate_first_image) { | |
var animation_speed = this.settings.animation_speed; | |
var easing = 'swing'; | |
var animation = this.animations[this.settings.effect].call(this, img_container, direction, desc); | |
if(typeof animation.speed != 'undefined') { | |
animation_speed = animation.speed; | |
}; | |
if(typeof animation.easing != 'undefined') { | |
easing = animation.easing; | |
}; | |
if(this.current_image) { | |
var old_image = this.current_image; | |
var old_description = this.current_description; | |
old_image.animate(animation.old_image, animation_speed, easing, | |
function() { | |
old_image.remove(); | |
if(old_description) old_description.remove(); | |
} | |
); | |
}; | |
img_container.animate(animation.new_image, animation_speed, easing, | |
function() { | |
context.current_index = index; | |
context.current_image = img_container; | |
context.current_description = desc; | |
context.in_transition = false; | |
context._afterShow(); | |
context.fireCallback(callback); | |
} | |
); | |
} else { | |
this.current_index = index; | |
this.current_image = img_container; | |
context.current_description = desc; | |
this.in_transition = false; | |
context._afterShow(); | |
this.fireCallback(callback); | |
}; | |
}; | |
}, | |
nextIndex: function() { | |
if(this.current_index == (this.images.length - 1)) { | |
if(!this.settings.cycle) { | |
return false; | |
}; | |
var next = 0; | |
} else { | |
var next = this.current_index + 1; | |
}; | |
return next; | |
}, | |
nextImage: function(callback) { | |
var next = this.nextIndex(); | |
if(next === false) return false; | |
this.preloadImage(next + 1); | |
this.showImage(next, callback); | |
return true; | |
}, | |
prevIndex: function() { | |
if(this.current_index == 0) { | |
if(!this.settings.cycle) { | |
return false; | |
}; | |
var prev = this.images.length - 1; | |
} else { | |
var prev = this.current_index - 1; | |
}; | |
return prev; | |
}, | |
prevImage: function(callback) { | |
var prev = this.prevIndex(); | |
if(prev === false) return false; | |
this.preloadImage(prev - 1); | |
this.showImage(prev, callback); | |
return true; | |
}, | |
preloadAll: function() { | |
var context = this; | |
var i = 0; | |
function preloadNext() { | |
if(i < context.images.length) { | |
i++; | |
context.preloadImage(i, preloadNext); | |
}; | |
}; | |
context.preloadImage(i, preloadNext); | |
}, | |
preloadImage: function(index, callback) { | |
if(this.images[index]) { | |
var image = this.images[index]; | |
if(!this.images[index].preloaded) { | |
var img = $(new Image()); | |
img.attr('src', image.image); | |
if(!this.isImageLoaded(img[0])) { | |
this.preloads.append(img); | |
var context = this; | |
img.load( | |
function() { | |
image.preloaded = true; | |
image.size = { width: this.width, height: this.height }; | |
context.fireCallback(callback); | |
} | |
).error( | |
function() { | |
image.error = true; | |
image.preloaded = false; | |
image.size = false; | |
} | |
); | |
} else { | |
image.preloaded = true; | |
image.size = { width: img[0].width, height: img[0].height }; | |
this.fireCallback(callback); | |
}; | |
} else { | |
this.fireCallback(callback); | |
}; | |
}; | |
}, | |
isImageLoaded: function(img) { | |
if(typeof img.complete != 'undefined' && !img.complete) { | |
return false; | |
}; | |
if(typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0) { | |
return false; | |
}; | |
return true; | |
}, | |
highLightThumb: function(thumb) { | |
this.thumbs_wrapper.find('.ad-active').removeClass('ad-active'); | |
thumb.addClass('ad-active'); | |
if(this.settings.thumb_opacity < 1) { | |
this.thumbs_wrapper.find('a:not(.ad-active) img').fadeTo(300, this.settings.thumb_opacity); | |
thumb.find('img').fadeTo(300, 1); | |
}; | |
var left = thumb[0].parentNode.offsetLeft; | |
left -= (this.nav_display_width / 2) - (thumb[0].offsetWidth / 2); | |
this.thumbs_wrapper.animate({scrollLeft: left +'px'}); | |
}, | |
fireCallback: function(fn) { | |
if($.isFunction(fn)) { | |
fn.call(this); | |
}; | |
} | |
}; | |
function AdGallerySlideshow(nextimage_callback, settings) { | |
this.init(nextimage_callback, settings); | |
}; | |
AdGallerySlideshow.prototype = { | |
start_link: false, | |
stop_link: false, | |
countdown: false, | |
controls: false, | |
settings: false, | |
nextimage_callback: false, | |
enabled: false, | |
running: false, | |
countdown_interval: false, | |
init: function(nextimage_callback, settings) { | |
var context = this; | |
this.nextimage_callback = nextimage_callback; | |
this.settings = settings; | |
}, | |
create: function() { | |
this.start_link = $('<span class="ad-slideshow-start">'+ this.settings.start_label +'</span>'); | |
this.stop_link = $('<span class="ad-slideshow-stop">'+ this.settings.stop_label +'</span>'); | |
this.countdown = $('<span class="ad-slideshow-countdown"></span>'); | |
this.controls = $('<div class="ad-slideshow-controls"></div>'); | |
this.controls.append(this.start_link).append(this.stop_link).append(this.countdown); | |
this.countdown.hide(); | |
var context = this; | |
this.start_link.click( | |
function() { | |
context.start(); | |
} | |
); | |
this.stop_link.click( | |
function() { | |
context.stop(); | |
} | |
); | |
$(document).keydown( | |
function(e) { | |
if(e.keyCode == 83) { | |
// 's' | |
if(context.running) { | |
context.stop(); | |
} else { | |
context.start(); | |
}; | |
}; | |
} | |
); | |
return this.controls; | |
}, | |
disable: function() { | |
this.enabled = false; | |
this.stop(); | |
this.controls.hide(); | |
}, | |
enable: function() { | |
this.enabled = true; | |
this.controls.show(); | |
}, | |
toggle: function() { | |
if(this.enabled) { | |
this.disable(); | |
} else { | |
this.enable(); | |
}; | |
}, | |
start: function() { | |
if(this.running || !this.enabled) return false; | |
var context = this; | |
this.running = true; | |
this.controls.addClass('ad-slideshow-running'); | |
this._next(); | |
this.fireCallback(this.settings.onStart); | |
return true; | |
}, | |
stop: function() { | |
if(!this.running) return false; | |
this.running = false; | |
this.countdown.hide(); | |
this.controls.removeClass('ad-slideshow-running'); | |
clearInterval(this.countdown_interval); | |
this.fireCallback(this.settings.onStop); | |
return true; | |
}, | |
_next: function() { | |
var context = this; | |
var pre = this.settings.countdown_prefix; | |
var su = this.settings.countdown_sufix; | |
clearInterval(context.countdown_interval); | |
this.countdown.show().html(pre + (this.settings.speed / 1000) + su); | |
var slide_timer = 0; | |
this.countdown_interval = setInterval( | |
function() { | |
slide_timer += 1000; | |
if(slide_timer >= context.settings.speed) { | |
var whenNextIsShown = function() { | |
// A check so the user hasn't stoped the slideshow during the | |
// animation | |
if(context.running) { | |
context._next(); | |
}; | |
slide_timer = 0; | |
}; | |
if(!context.nextimage_callback(whenNextIsShown)) { | |
context.stop(); | |
}; | |
slide_timer = 0; | |
}; | |
var sec = parseInt(context.countdown.text().replace(/[^0-9]/g, ''), 10); | |
sec--; | |
if(sec > 0) { | |
context.countdown.html(pre + sec + su); | |
}; | |
}, | |
1000 | |
); | |
}, | |
fireCallback: function(fn) { | |
if($.isFunction(fn)) { | |
fn.call(this); | |
}; | |
} | |
}; | |
})(jQuery); | |
jQuery(document).ready(function(){ | |
var galleries = jQuery('.ad-gallery').adGallery({ | |
loader_image: 'loader.gif', | |
width: 600, // Width of the image, set to false and it will read the CSS width | |
height: 400, // Height of the image, set to false and it will read the CSS height | |
thumb_opacity: 0.7, // Opacity that the thumbs fades to/from, (1 removes fade effect) | |
// Note that this effect combined with other effects might be resource intensive | |
// and make animations lag | |
start_at_index: 0, // Which image should be displayed at first? 0 is the first image | |
description_wrapper: jQuery('#descriptions'), // Either false or a jQuery object, if you want the image descriptions | |
// to be placed somewhere else than on top of the image | |
animate_first_image: false, // Should first image just be displayed, or animated in? | |
animation_speed: 400, // Which ever effect is used to switch images, how long should it take? | |
display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image? | |
display_back_and_forward: true, // Are you allowed to scroll the thumb list? | |
scroll_jump: 0, // If 0, it jumps the width of the container | |
slideshow: { | |
enable: true, | |
autostart: true, | |
speed: 5000, | |
start_label: 'Start', | |
stop_label: 'Stop', | |
stop_on_scroll: true, // Should the slideshow stop if the user scrolls the thumb list? | |
countdown_prefix: '(', // Wrap around the countdown | |
countdown_sufix: ')', | |
onStart: function() { | |
// Do something wild when the slideshow starts | |
}, | |
onStop: function() { | |
// Do something wild when the slideshow stops | |
} | |
}, | |
effect: 'slide-hori', // or 'slide-vert', 'resize', 'fade', 'none' or false | |
enable_keyboard_move: true, // Move to next/previous image with keyboard arrows? | |
cycle: true, // If set to false, you can't go from the last image to the first, and vice versa | |
// All callbacks has the AdGallery objects as 'this' reference | |
callbacks: { | |
// Executes right after the internal init, can be used to choose which images | |
// you want to preload | |
init: function() { | |
// preloadAll uses recursion to preload each image right after one another | |
this.preloadAll(); | |
// Or, just preload the first three | |
this.preloadImage(0); | |
this.preloadImage(1); | |
this.preloadImage(2); | |
}, | |
// This gets fired right after the new_image is fully visible | |
afterImageVisible: function() { | |
// For example, preload the next image | |
var context = this; | |
this.loading(true); | |
this.preloadImage(this.current_index + 1, | |
function() { | |
// This function gets executed after the image has been loaded | |
context.loading(false); | |
} | |
); | |
// Want slide effect for every other image? | |
if(this.current_index % 2 == 0) { | |
this.settings.effect = 'slide'; | |
} else { | |
this.settings.effect = 'fade'; | |
} | |
}, | |
// This gets fired right before old_image is about to go away, and new_image | |
// is about to come in | |
beforeImageVisible: function(new_image, old_image) { | |
// Do something wild! | |
} | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Ad Gallery Shortcode | |
* | |
* @param array $atts | |
* @return unknown | |
*/ | |
function ad_gallery_shortcode( $atts ) { | |
extract(shortcode_atts(array( | |
'page_id' => null, | |
), $atts)); | |
return show_gallery( $atts['page_id'] ); | |
} | |
add_shortcode('adgallery', 'ad_gallery_shortcode'); | |
/** | |
* Show the Gallery | |
* | |
* @param string $page_id | |
* @return unknown | |
*/ | |
function show_gallery( $page_id = null ) | |
{ | |
if (is_null($page_id)) | |
{ | |
global $post; | |
$page_id = $post->ID; | |
} | |
//initializing variables | |
$images =& get_children( "post_parent=$page_id&post_type=attachment&post_mime_type=image" ); | |
//reasons to fail | |
if (empty($images)) return false; | |
add_action('wp_head', 'wp_asdfasdf'); | |
ob_start(); | |
?> | |
<script src="<?php bloginfo('template_url'); ?>/ad-gallery/ad-gallery.js" type="text/javascript"></script> | |
<link rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/ad-gallery/ad-gallery.css" type="text/css"> | |
<div class="ad-gallery"> | |
<div class="ad-image-wrapper"> | |
</div> | |
<div class="ad-controls"> | |
</div> | |
<div class="ad-nav"> | |
<div class="ad-thumbs"> | |
<ul class="ad-thumb-list"> | |
<?php | |
foreach ($images as $post) | |
{ | |
//initializing variables | |
$url = wp_get_attachment_image_src( $post->ID, 'large' ); | |
$url = $url[0]; | |
?> | |
<li> | |
<a href="<?php echo $url; ?>"> | |
<img src="<?php echo $url; ?>" title="<?php echo $post->post_title; ?>"> | |
</a> | |
</li> | |
<?php | |
break; | |
} | |
?> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<?php | |
return ob_get_clean(); | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment