/*
* jQuery Flickr - jQuery plug-in
* Version 1.0, Released 2008.04.17
*
* Copyright (c) 2008 Daniel MacDonald (www.projectatomic.com)
* Dual licensed GPL http://www.gnu.org/licenses/gpl.html
* and MIT http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.flickr = function(o){
var s = {
api_key: null, // [string] required, see http://www.flickr.com/services/api/misc.api_keys.html
type: null, // [string] allowed values: 'photoset', 'search', default: 'flickr.photos.getRecent'
photoset_id: null, // [string] required, for type=='photoset'
text: null, // [string] for type=='search' free text search
user_id: null, // [string] for type=='search' search by user id
group_id: null, // [string] for type=='search' search by group id
tags: null, // [string] for type=='search' comma separated list
tag_mode: 'any', // [string] for type=='search' allowed values: 'any' (OR), 'all' (AND)
sort: 'relevance', // [string] for type=='search' allowed values: 'date-posted-asc', 'date-posted-desc', 'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc', 'relevance'
thumb_size: 's', // [string] allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
size: null, // [string] allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
per_page: 100, // [integer] allowed values: max of 500
page: 1, // [integer] see paging notes
attr: '', // [string] optional, attributes applied to thumbnail <a> tag
api_url: null, // [string] optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
params: '', // [string] optional, custom arguments, see http://www.flickr.com/services/api/flickr.photos.search.html
api_callback: '?', // [string] optional, custom callback in flickr JSON-P response
callback: null // [function] optional, callback function applied to entire <ul>
// PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide hooks for a custom paging routine
// within the <ul> created by the plug-in, there are two hidden <input> tags,
// input:eq(0): current page, input:eq(1): total number of pages, input:eq(2): images per page, input:eq(3): total number of images
// SEARCH NOTES: when setting type to 'search' at least one search parameter must also be passed text, user_id, group_id, or tags
// SIZE NOTES: photos must allow viewing original size for size 'o' to function, if not, default size is shown
};
if(o) $.extend(s, o);
return this.each(function(){
// create unordered list to contain flickr images
var list = $('<ul>').appendTo(this);
var url = $.flickr.format(s);
$.getJSON(url, function(r){
if (r.stat != "ok"){
for (i in r){
$('<li>').text(i+': '+ r[i]).appendTo(list);
};
} else {
if (s.type == 'photoset') r.photos = r.photoset;
// add hooks to access paging data
list.append('<input type="hidden" value="'+r.photos.page+'" />');
list.append('<input type="hidden" value="'+r.photos.pages+'" />');
list.append('<input type="hidden" value="'+r.photos.perpage+'" />');
list.append('<input type="hidden" value="'+r.photos.total+'" />');
for (var i=0; i<r.photos.photo.length; i++){
var photo = r.photos.photo[i];
// format thumbnail url
var t = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_'+photo['secret']+'_'+s.thumb_size+'.jpg';
//format image url
var h = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_';
switch (s.size){
case 'm':
h += photo['secret'] + '_m.jpg';
break;
case 'b':
h += photo['secret'] + '_b.jpg';
break;
case 'o':
if (photo['originalsecret'] && photo['originalformat']) {
h += photo['originalsecret'] + '_o.' + photo['originalformat'];
} else {
h += photo['secret'] + '_b.jpg';
};
break;
default:
h += photo['secret'] + '.jpg';
};
var flickrLink = 'http://www.flickr.com/photos/' + r.photoset.owner + '/' + photo['id'];
//console.log(flickrLink);
list.append('<li><a href="'+h+'" '+s.attr+' title="'+flickrLink+'"><img src="'+t+'" alt="'+photo['title']+'" /></a></li>');
};
if (s.callback) s.callback(list);
};
});
});
};
// static function to format the flickr API url according to the plug-in settings
$.flickr = {
format: function(s){
if (s.url) return s.url;
var url = 'http://api.flickr.com/services/rest/?format=json&jsoncallback='+s.api_callback+'&api_key='+s.api_key;
switch (s.type){
case 'photoset':
url += '&method=flickr.photosets.getPhotos&photoset_id=' + s.photoset_id;
break;
case 'search':
url += '&method=flickr.photos.search&sort=' + s.sort;
if (s.user_id) url += '&user_id=' + s.user_id;
if (s.group_id) url += '&group_id=' + s.group_id;
if (s.tags) url += '&tags=' + s.tags;
if (s.tag_mode) url += '&tag_mode=' + s.tag_mode;
if (s.text) url += '&text=' + s.text;
break;
default:
url += '&method=flickr.photos.getRecent';
};
if (s.size == 'o') url += '&extras=original_format';
url += '&per_page=' + s.per_page + '&page=' + s.page + s.params;
return url;
}
};
})(jQuery);
jquery.flickrGallery-1.0.2.js Code (JavaScript)
/*
* jQuery FlickrGallery - jQuery plug-in
* Version 1.0.1, Released
*
* Copyright (c) 2008 Steven Dugas
* This work is licensed under a Creative Commons Attribution 3.0 Unported License.
*/
(function($) {
$.fn.flickrGallery = function(options) {
var defaults = {
galleryHeight : 'auto', // either [string] 'auto' or [integer]. If [integer] gallery will have a strict height to that number.
userFlickr : 'false', // [string], 'true' or 'false'. Determines if gallery is local or flickr based.
useFlickrLargeSize: 'false', // [string], 'true' or 'false'. Determines whether gallery is Large or Small.
flickrAPIKey: '', // [string], required for Flickr gallery.
photosetID: '', // [string], required for Flickr gallery.
per_page: 30, // [integer], amount of thumbnails per 'page'.
useHoverIntent: 'false', // [string], 'true' or 'false'. Uses HoverIntent plugin for better Hovers.
useLightBox: 'false' // [string], 'true' or 'false. Uses jQuery Lightbox plugin for Small Images
};
var options = $.extend(defaults, options);
//options.galleryHeight = 'auto';
return this.each(function() {
obj = $(this);
// Massive function to create the Image Gallery and register all event handlers. Must be a function to recreate gallery on Next/Prev Page.
function makeGallery(){
// Create Variables
var flickrLargeImg;
var theCaption;
var container;
var stepCount;
var count = 1;
var totalImageCount = 0;
var currentImageCount = 1;
thumbs = obj.find('ul');
thumbs.addClass('galleryUL');
// If useFlickr is true, create Flickr-only buttons.
if ( options.useFlickr == 'true' ) {
obj.prepend('<div class="largeImageWrap"><div class="largeImage_nextPage"></div><div class="largeImage_prevPage"></div><a href="" class="largeImage_flickrLink" target="_blank"><span>Flickr</span></a><div class="largeImage_prev"><span>Prev</span></div><div class="largeImage_next"><span>Next</span></div><div class="largeImage"></div><div class="caption"></div></div>');
} else {
obj.prepend('<div class="largeImageWrap"><div class="largeImage_prev"><span>Prev</span></div><div class="largeImage_next"><span>Next</span></div><div class="largeImage"></div><div class="caption"></div></div>');
};
var largeImageWrap = obj.find('.largeImageWrap');
var nextPage = obj.find('.largeImage_nextPage');
var prevPage = obj.find('.largeImage_prevPage');
var nextImg = obj.find('.largeImage_next');
var prevImg = obj.find('.largeImage_prev');
var largeImageFlickrLink = obj.find('.largeImage_flickrLink');
var largeImage = obj.find('.largeImage');
var imgCaption = obj.find('.caption');
// Determine if gallery is fixed or auto height. If Fixed, set height.
if ( options.galleryHeight != 'auto' ) {
var theHeight = parseFloat(options.galleryHeight);
largeImageWrap.animate({ height: theHeight+'px' }, 600) ;
}
// If Flickr Gallery is on, disable links in Thumbnails.
if ( options.useFlickr == 'true' ) {
thumbs.children().click(function(){
return false;
});
};
// Add unique IDs to each thumbnail image
thumbs.wrap('<div class="sliderGallery"></div>');
var sliderGallery = obj.find('.sliderGallery');
sliderGallery.wrap('<div class="sliderGallery_Wrap"></div>');
var sliderGalleryWrap = obj.find('.sliderGallery_Wrap');
sliderGallery.append('<div class="slider"><div class="handle"></div></div>');
var theSlider = obj.find('.slider');
var theHandle = obj.find('.handle');
count = 1;
totalImageCount = 0;
currentImageCount = 1;
obj.find('.galleryUL img').each(function(){
var IESRC = $(this).attr('src');
$(this).attr('src',IESRC);
$(this).attr('id','galleryThumb_'+count);
count++;
totalImageCount++;
});
// Function for clicking Next Page. This is a Flickr-only function.
nextPage.click(function(){
currentPage = parseFloat($(obj).find('input:eq(0)').val());
totalPages = parseFloat($(obj).find('input:eq(1)').val());
nextPage = currentPage + 1;
if ( nextPage > totalPages ) {
nextPage = 1;
};
$(theSlider, container).slider("destroy");
sliderGalleryWrap.hide();
$(obj).children().slideUp();
obj.slideUp('slow',function(){
obj.empty();
obj.flickr({
api_key: options.flickrAPIKey,
type: 'photoset',
photoset_id: options.photosetID,
thumb_size: 'm',
per_page: options.per_page,
page: nextPage,
callback: function(){
makeGallery();
}
});
obj.slideDown();
});
});
// Function for clicking Previous Page. This is a Flickr function.
prevPage.click(function(){
currentPage = parseFloat($(obj).find('input:eq(0)').val());
totalPages = parseFloat($(obj).find('input:eq(1)').val());
prevPage = currentPage - 1;
if ( prevPage == 0 ) {
prevPage = totalPages;
};
$(theSlider, container).slider("destroy");
sliderGalleryWrap.hide();
$(obj).children().slideUp();
obj.slideUp('slow',function(){
obj.empty();
obj.flickr({
api_key: options.flickrAPIKey,
type: 'photoset',
photoset_id: options.photosetID,
thumb_size: 'm',
per_page: options.per_page,
page: prevPage,
callback: function(){
makeGallery();
}
});
obj.slideDown();
});
});
// calcHeight function, used to process image changing on next, prev or click.
function calcHeight() {
largeImage.fadeOut(function(){
function doHeight(){
largeImage.fadeIn(function(){
var imgHeight = largeImage.find('img').height();
var captionHeight = imgCaption.height();
largeImage.find('img').css({
position: '',
visibility: 'visible',
display: 'none'
});
if ( options.galleryHeight == 'auto' ) {
largeImageWrap.animate({
height: imgHeight+captionHeight+'px'
}, function(){ largeImage.find('img').fadeIn(); imgCaption.fadeIn(); });
} else {
largeImage.find('img').fadeIn();
imgCaption.fadeIn();
};
});
slideValue = currentImageCount-1;
slideValue = slideValue * stepCount;
$(theSlider, container).slider("moveTo",slideValue);
};
$(this).find('img').remove();
imgCaption.empty();
var i = new Image();
if ( options.useFlickr == 'true' ) {
if ( options.useFlickrLargeSize == 'true') {
flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
i.onload = doHeight;
i.src = flickrLargeImg;
largeImage.append(i);
} else {
flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title');
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
i.onload = doHeight;
i.src = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
largeImage.append(i);
flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
if ( options.useLightBox == 'true') {
largeImage.find('img').wrap('<a href="'+flickrLargeImg+'" title="'+theCaption+'"></a>');
largeImage.find('a').lightBox();
};
}
largeImageFlickrLink.attr('href',flickrLink);
largeImage.find('img').addClass(''+currentImageCount+'');
} else {
thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).appendTo(largeImage);
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('title');
doHeight();
};
imgCaption.append(theCaption).hide();
largeImage.find('img').css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
}).addClass(''+currentImageCount+'').attr('title',theCaption);
});
};
// Create the slider
obj.find('div.sliderGallery').each(function(){
container = $(this);
var ul = thumbs;
var itemsWidth = ul.innerWidth() - container.outerWidth();
var totalCount = totalImageCount;
totalCount = parseFloat(totalCount-1);
stepCount = itemsWidth/totalCount;
var division = itemsWidth / totalCount;
var theValue = 0;
$(theSlider, container).slider({
min: 0,
max: itemsWidth,
handle: theHandle,
steps:totalCount,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
theValue = ui.value;
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
obj.find('.galleryUL img').click(function(){
var clickThumb = $(this);
var startCount = 0;
var theCaption = $(this).attr('title');
currentImageCount = $(this).attr('id');
currentImageCount = parseFloat(currentImageCount.split("_",2)[1]);
calcHeight();
});
});
// End of SlideBar
// Fade in the first image with caption
function startHeight() {
imgCaption.append(theCaption).hide();
largeImage.find('img').css({
position: '',
visibility: 'visible',
display: 'none'
});
largeImage.find('img').addClass(''+currentImageCount+'').attr('title',theCaption);
largeImage.show(function(){
imgHeight = largeImage.find('img').height();
captionHeight = imgCaption.height();
if ( options.galleryHeight == 'auto' ) {
largeImageWrap.animate({
height: imgHeight+captionHeight+'px'
},'slow','swing',
function(){
largeImage.css({ visibility: 'visible' });
imgCaption.fadeIn();
largeImage.find('img').fadeIn(300, function(){
sliderGallery.hide().wrapInner('<div id="sliderGalleryInnerWrap"></div>');
var sliderGalleryInnerWrap = obj.find('#sliderGalleryInnerWrap');
sliderGalleryInnerWrap.hide();
sliderGalleryWrap.show();
sliderGallery.slideDown('slow', function(){
sliderGalleryInnerWrap.fadeIn();
});
});
});
} else {
largeImage.css({ visibility: 'visible' });
largeImage.find('img').fadeIn('slow', function(){
sliderGallery.hide().wrapInner('<div id="sliderGalleryInnerWrap"></div>');
var sliderGalleryInnerWrap = obj.find('#sliderGalleryInnerWrap');
sliderGalleryInnerWrap.hide();
sliderGalleryWrap.show();
sliderGallery.slideDown('slow', function(){
sliderGalleryInnerWrap.fadeIn('slow');
});
});
imgCaption.fadeIn('slow');
};
});
};
sliderGalleryWrap.hide();
largeImage.hide().css({visibility: 'hidden'});
var i = new Image();
if ( options.useFlickr == 'true' ) {
if ( options.useFlickrLargeSize == 'true') {
flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
i.onload = startHeight;
i.src = flickrLargeImg;
largeImage.append(i);
} else {
flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
thumbs.find('#galleryThumb_'+currentImageCount).clone().appendTo(largeImage);
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
if ( options.useLightBox == 'true') {
largeImage.find('img').wrap('<a href="'+flickrLargeImg+'" title="'+theCaption+'"></a>');
largeImage.find('a').lightBox();
}
startHeight();
}
largeImageFlickrLink.attr('href',flickrLink);
largeImage.find('img').addClass(''+currentImageCount+'');
} else {
thumbs.find('#galleryThumb_'+currentImageCount).clone().appendTo(largeImage);
theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('title');
startHeight();
};
// Function to fadeIn or fadeOut Next/Prev buttons on hover.
if ( options.useHoverIntent == 'false' ) {
largeImageWrap.hover(function(){
prevImg.fadeIn();
nextImg.fadeIn();
largeImageFlickrLink.fadeIn();
nextPage.fadeIn();
prevPage.fadeIn();
},function(){
obj.find('.largeImage_prev').fadeOut();
obj.find('.largeImage_next').fadeOut();
obj.find('.largeImage_flickrLink').fadeOut();
obj.find('.largeImage_prevPage').fadeOut();
obj.find('.largeImage_nextPage').fadeOut();
});
$(thumbs).children().find('img').hover(function(){
$(this).animate({ opacity: 1 }, 300);
},function(){
$(this).animate({ opacity: .7 }, 300);
});
} else {
function hoverOn() {
prevImg.fadeIn();
nextImg.fadeIn();
largeImageFlickrLink.fadeIn();
nextPage.fadeIn();
prevPage.fadeIn();
};
function hoverOff() {
obj.find('.largeImage_prev').fadeOut();
obj.find('.largeImage_next').fadeOut();
obj.find('.largeImage_flickrLink').fadeOut();
obj.find('.largeImage_prevPage').fadeOut();
obj.find('.largeImage_nextPage').fadeOut();
};
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: hoverOn, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: hoverOff // function = onMouseOut callback (REQUIRED)
};
largeImageWrap.hoverIntent(config);
function thumbHoverOn() {
$(this).animate({ opacity: 1 }, 300);
};
function thumbHoverOff() {
$(this).animate({ opacity: .7 }, 300);
};
var config2 = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 25, // number = milliseconds for onMouseOver polling interval
over: thumbHoverOn, // function = onMouseOver callback (REQUIRED)
timeout: 50, // number = milliseconds delay before onMouseOut
out: thumbHoverOff // function = onMouseOut callback (REQUIRED)
};
$(thumbs).children().find('img').hoverIntent(config2);
};
// Change the opacity when hovering over thumbnails
// Function for Previous button onclick
prevImg.click(function(){
var theSRC = largeImage.find('img').attr('src');
currentImageCount = largeImage.find('img').attr('class');
var newSRC = "";
var newImage = "";
var fixIE = "";
var prevImageCount = currentImageCount - 1;
if ( prevImageCount < 1 ) {
currentImageCount = totalImageCount;
} else {
currentImageCount = prevImageCount;
};
newSRC = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
newImage = thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).addClass(''+currentImageCount+'');
calcHeight();
});
// Function for Next button onclick
nextImg.click(function(){
var theSRC = largeImage.find('img').attr('src');
currentImageCount = largeImage.find('img').attr('class');
currentImageCount = parseFloat(currentImageCount);
var newSRC = "";
var theCaption = "";
var newImage = "";
var nextImageCount = currentImageCount + 1;
if ( nextImageCount > totalImageCount ) {
currentImageCount = 1;
} else {
currentImageCount = nextImageCount;
};
newSRC = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
newImage = thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).addClass(''+currentImageCount+'');
calcHeight();
});
};
// Finally, if useFlickr is true, download images and create UL structure before creating Gallery. Else, just create Gallery.
if ( options.useFlickr == 'true' ) {
obj.flickr({
api_key: options.flickrAPIKey,
type: 'photoset',
photoset_id: options.photosetID,
thumb_size: 'm',
per_page: options.per_page,
page: 1,
callback: function(){
makeGallery();
}
});
}else {
makeGallery();
};
});
};
})(jQuery);
แล้วก็ตัว pan zoom ที่หามาครับ Code (JavaScript)
/**
* Pan/Zoom - it's just a quick hack, so don't expect too much
* @author Andrew Hedges, [email protected]
* @created 2009-12-27 12:27:09
* @license MIT
* @usage $.panzoom();
* @requires jQuery (tested with versions 1.3.2 and 1.4.0)
*/
;
(function ($) {
var css, titles;
// CSS to apply to elements on init
css = {
a : {
'position' : 'relative',
'overflow' : 'hidden',
'display' : 'inline-block',
'width' : undefined,
'height' : undefined
},
img : {
'position' : 'absolute',
'top' : '0px',
'left' : '0px'
}
};
// title text to display onhover
titles = {
small : 'Click to zoom in.',
large : 'Click to zoom out.'
};
/**
* Convert an x/y for one size to the x/y for another size
* @private
* @param array size1 [width, height]
* @param array size2 [width, height]
* @param array xy [x, y]
* @return array [x, y]
*/
function proportions_(size1, size2, xy) {
return [Math.round(xy[0] / (size1[0] / size2[0])), Math.round(xy[1] / (size1[1] / size2[1]))];
}
/**
* Is the image in its "large" state?
* @private
* @param jQuery object a Anchor element
* @param jQuery object img Image element
* @return boolean
*/
function isLarge_(a, img) {
return (img.width() > a.width());
}
/**
* Get the x and y of the click within the element
* @private
* @param jQuery object el Clicked element
* @param object evt Event object
* @return array [x, y]
*/
function getPoint_(el, evt) {
var offset;
offset = $(el).offset();
return [evt.pageX - offset.left, evt.pageY - offset.top];
}
/**
* Get the pixel coordinates of the image based on the current mouse event
* @private
* @param jQuery object a Anchor element
* @param jQuery object img Image element
* @param Event object evt
* @return void
*/
function getCoords_(a, img, evt) {
var pt, xy, top, left;
pt = getPoint_(a, evt);
xy = proportions_(img.dimensions.small, img.dimensions.large, pt);
top = (0 - (xy[1] - pt[1])) + 'px';
left = (0 - (xy[0] - pt[0])) + 'px';
return [left, top];
}
/**
* Apply CSS, if not already applied
* @private
* @param jQuery object a Anchor element
* @param jQuery object img Image element
* @return void
*/
function applyCSS_(a, img) {
// only apply the CSS if it hasn't already been applied
if (true !== img.applied_) {
css.a.width = img.dimensions.small[0] + 'px';
css.a.height = img.dimensions.small[1] + 'px';
a.css(css.a);
img.css(css.img);
// store the fact that the styles have been applied
img.applied_ = true;
}
}
/**
* Pan
* @private
* @param Event object evt
* @return void
*/
function move_(evt) {
var a, img, coords;
// get element references
a = evt.data.a;
img = evt.data.img;
// get new position
coords = getCoords_(a, img, evt);
// change position
img.css({
top : coords[1],
left : coords[0]
});
// disable browser's built-in behavior
evt.preventDefault();
}
/**
* Scale image to the larger size
* @private
* @param jQuery object a Anchor element
* @param jQuery object img Image element
* @param Event object evt
* @return void
*/
function scaleUp_(a, img, evt) {
var coords;
coords = getCoords_(a, img, evt);
img.animate({
top : coords[1],
left : coords[0],
width : img.dimensions.large[0],
height : img.dimensions.large[1]
}, 'fast', function () {
a
.bind('mousemove', {a : a, img : img}, move_) // enable panning
.attr('title', titles.large)
;
});
// swap source while it's enlargenating
img.attr('src', img.srcs.large);
}
/**
* Scale image back to original size
* @private
* @param jQuery object a Anchor element
* @param jQuery object img Image element
* @return void
*/
function scaleDown_(a, img) {
img.animate({
top : '0px',
left : '0px',
width : img.dimensions.small[0],
height : img.dimensions.small[1]
}, 'fast', function () {
a
.unbind('mousemove', move_) // disable panning
.attr('title', titles.small)
;
// swap source after it's done scaling down
img.attr('src', img.srcs.small);
});
}
/**
* Initialize
* @public
* @param string selector CSS selector for the container for the image(s) (optional, defaults to ".panzoom a")
* @return void
*/
function panzoom(selector) {
selector = selector || '.panzoom a';
// act on each anchor element
$.each($(selector), function (i, val) {
var a, img, lrg;
a = $(this);
img = $('img', a);
// preload large image
lrg = new Image();
// enable click event once large image has loaded
lrg.onload = function (evt) {
img.srcs = {
small : img.attr('src'),
large : this.src
};
img.dimensions = {
small : [img.width(), img.height()],
large : [lrg.width, lrg.height]
};
a
.click(function (evt) {
applyCSS_(a, img);
if (isLarge_(a, img)) {
scaleDown_(a, img);
}
else {
scaleUp_(a, img, evt);
}
evt.preventDefault();
})
.attr('title', titles.small)
;
};
// start loading large image
lrg.src = a[0].href;
});
}
// expose public method
$.extend({
panzoom : panzoom
});
})(jQuery);
Load balance : Server 00
