/*
* ******************************************************************************
* jquery.mb.components
* file: mbGallery.js
*
* Copyright (c) 2001-2013. Matteo Bicocchi (Pupunzi);
* Open lab srl, Firenze - Italy
* email: matteo@open-lab.com
* site: http://pupunzi.com
* blog: http://pupunzi.open-lab.com
* http://open-lab.com
*
* Licences: MIT, GPL
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* last modified: 16/01/13 23.03
* *****************************************************************************
*/
/*
* It is possible to show EXIF metadata of your photos.
* include: jquery.exif.js (http://www.nihilogic.dk/labs/exifjquery/)
* set exifData: true
* to keep EXIF data in your jpeg from Photoshop© you can't use "save for the web" command; use "save as..." and save as .jpg instead.
*/
/*Browser detection patch*/
(function(){if(!(8>jQuery.fn.jquery.split(".")[1])){jQuery.browser={};jQuery.browser.mozilla=!1;jQuery.browser.webkit=!1;jQuery.browser.opera=!1;jQuery.browser.msie=!1;var a=navigator.userAgent;jQuery.browser.name=navigator.appName;jQuery.browser.fullVersion=""+parseFloat(navigator.appVersion);jQuery.browser.majorVersion=parseInt(navigator.appVersion,10);var c,b;if(-1!=(b=a.indexOf("Opera"))){if(jQuery.browser.opera=!0,jQuery.browser.name="Opera",jQuery.browser.fullVersion=a.substring(b+6),-1!=(b= a.indexOf("Version")))jQuery.browser.fullVersion=a.substring(b+8)}else if(-1!=(b=a.indexOf("MSIE")))jQuery.browser.msie=!0,jQuery.browser.name="Microsoft Internet Explorer",jQuery.browser.fullVersion=a.substring(b+5);else if(-1!=(b=a.indexOf("Chrome")))jQuery.browser.webkit=!0,jQuery.browser.name="Chrome",jQuery.browser.fullVersion=a.substring(b+7);else if(-1!=(b=a.indexOf("Safari"))){if(jQuery.browser.webkit=!0,jQuery.browser.name="Safari",jQuery.browser.fullVersion=a.substring(b+7),-1!=(b=a.indexOf("Version")))jQuery.browser.fullVersion= a.substring(b+8)}else if(-1!=(b=a.indexOf("Firefox")))jQuery.browser.mozilla=!0,jQuery.browser.name="Firefox",jQuery.browser.fullVersion=a.substring(b+8);else if((c=a.lastIndexOf(" ")+1)<(b=a.lastIndexOf("/")))jQuery.browser.name=a.substring(c,b),jQuery.browser.fullVersion=a.substring(b+1),jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()&&(jQuery.browser.name=navigator.appName);if(-1!=(a=jQuery.browser.fullVersion.indexOf(";")))jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0, a);if(-1!=(a=jQuery.browser.fullVersion.indexOf(" ")))jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,a);jQuery.browser.majorVersion=parseInt(""+jQuery.browser.fullVersion,10);isNaN(jQuery.browser.majorVersion)&&(jQuery.browser.fullVersion=""+parseFloat(navigator.appVersion),jQuery.browser.majorVersion=parseInt(navigator.appVersion,10));jQuery.browser.version=jQuery.browser.majorVersion}})(jQuery);
(function($){
$.mbGallery ={
name:"mb.gallery",
author:"Matteo Bicocchi",
version:"2.2",
defaults:{
containment:"body",
cssURL:"css/",
skin:"white",
overlayBackground:"#333",
exifData:false, //todo
printOutThumbs:false,
galleryTitle:"My Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",
minWidth: 50,
minHeight: 50,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.5,
startFrom: 1,//"random"
fadeTime: 500,
slideTimer: 6000,
autoSlide: true,
onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}
},
buildMbGallery:function(options){
var gallery= $(this).get(0);
if (gallery.initialized){
$(gallery).mb_closeGallery();
return;
}
if($.mbGallery.actualGallery){
$($.mbGallery.actualGallery).mb_closeGallery(true);
}
$.mbGallery.actualGallery=gallery;
gallery.options = $.extend({}, $.mbGallery.defaults, options);
if(gallery.options.onOpen) gallery.options.onOpen();
var css= "";
if($("#mbGalleryCss")) $("#mbGalleryCss").remove();
$("head").append(css);
$(gallery).hide();
gallery.galleryID= "mb_gallery_"+gallery.id;
$(gallery).mb_getPhotos();
if (gallery.options.printOutThumbs){//&& gallery.options.containment=="body"
gallery.options.printOutThumbs=false;
$(gallery).mb_thumbsOnPage();
return;
}
gallery.initialized = true;
var overlay=$("
")
.addClass("mb_overlay")
.one("click",function(){$(gallery).mb_closeGallery();})
.css({opacity:gallery.options.overlayOpacity,background: gallery.options.overlayBackground})
.hide();
var galleryScreen= $("")
.attr("id",gallery.galleryID)
.addClass("galleryScreen")
.addClass("mbGall_"+gallery.options.skin);
var galleryDesc=$("")
.addClass("galleryDesc")
.css({opacity:.7})
.hide();
var galleryTitle=$("")
.addClass("galleryTitle")
.html(gallery.options.galleryTitle)
.hide();
var galleryImg= $("")
.addClass("galleryImg")
.hover(function(){if (galleryDesc.html()) galleryDesc.slideDown();},function(){galleryDesc.slideUp();})
.dblclick(function(){if (gallery.sliding) $(gallery).mb_stopSlide(); else $(gallery).mb_startSlide();});
var galleryRaster= $("")
.addClass("galleryRaster")
.css({width:"100%",height:"100%"});
var galleryLoader= $("")
.addClass("loader")
.mb_bringToFront()
.css("opacity",.7)
.hide();
var galleryThumbs=$("")
.addClass("galleryThumbs")
.hide();
var galleryNav=$("")
.addClass("galleryNav")
.hide();
var galleryCloseIcon= $("")
.addClass("galleryCloseIcon ico")
.one("click",function(){$(gallery).mb_closeGallery();}); //galleryCloseIcon
galleryScreen.bind("mouseleave",function(){
$(gallery).mb_hideThumbs();
});
if(gallery.options.containment=="body"){
$("body").append(overlay);
overlay.fadeIn(400,function(){});
$("body").append(galleryScreen);
}else{
galleryScreen.addClass("contained");
$("#"+gallery.options.containment).show();
$("#"+gallery.options.containment).append(galleryScreen);
}
galleryScreen.append(galleryNav);
galleryScreen.append(galleryTitle);
galleryTitle.append(galleryCloseIcon);
galleryScreen.append(galleryImg);
galleryImg.append(galleryLoader);
if(gallery.options.addRaster)
galleryImg.append(galleryRaster).mb_bringToFront();
galleryImg.append(galleryThumbs);
galleryImg.append(galleryDesc);
if(gallery.options.containment==="body")
galleryScreen.css({
minWidth:gallery.options.minWidth,
minHeight:gallery.options.minHeight,
top:"50%",
marginTop:-(gallery.options.minHeight/2),
left:"50%",
marginLeft:-(gallery.options.minWidth/2)
});
if($.browser.msie && $.browser.version<8){
galleryScreen.css({
width:gallery.options.minWidth,
height:gallery.options.minHeight
});
}
galleryImg.css({
minWidth:gallery.options.minWidth,
minHeight:gallery.options.minHeight
});
gallery.sliding=gallery.options.autoSlide;
gallery.idx=gallery.options.startFrom==="random"?Math.floor(Math.random()*(gallery.images.length-1)):gallery.options.startFrom>gallery.images.length?gallery.images.length-1:gallery.options.startFrom-1;
$("#"+gallery.galleryID).find(".loader").addClass("loading").show();
$(gallery).mb_buildThumbs();
$(gallery).mb_selectThumb();
$(gallery).mb_buildNav();
$(gallery).mb_preload();
},
getPhotos: function(){
var gallery= $(this).get(0);
gallery.images= new Array();
$(gallery).find(gallery.options.thumbnailSelector).each(function(i){
var photo=new Object();
photo.idx= i;
photo.thumb= $(this).attr("href");
photo.full= $(this).next("a").attr("href");
photo.fullWidth= $(this).attr("w")?$(this).attr("w"):false;
photo.fullHeight= $(this).attr("h")?$(this).attr("h"):false;
photo.title= $(this).nextAll(gallery.options.titleSelector).html();
photo.description= $(this).nextAll(gallery.options.descSelector).html();
gallery.images.push(photo);
});
},
preload:function(){
var gallery= $(this).get(0);
if(!gallery.sliding) $("#"+gallery.galleryID).find(".loader").addClass("loading").show();
var rndVar=$.browser.msie?"?"+new Date().getMilliseconds():"?"+new Date().getMilliseconds();
var showExif=gallery.options.exifData;
$("
")
.load(
function(){
/* Save actual image size */
if (!gallery.images[gallery.idx].fullWidth) { gallery.images[gallery.idx].fullWidth = this.width; } /* PHB */
if (!gallery.images[gallery.idx].fullHeight) { gallery.images[gallery.idx].fullHeight = this.height; } /* PHB */
if (!gallery.sliding) {$("#" + gallery.galleryID).find(".loader").fadeOut(500, function () {$("#" + gallery.galleryID).find(".loader").removeClass("loading"); }); }
$(gallery).mb_changePhoto(rndVar);
$(gallery).mb_selectThumb();
})
.attr({"src":gallery.images[gallery.idx].full+rndVar,"exif":showExif});
},
changePhoto:function(rndVar){
var gallery= $(this).get(0);
$("#"+gallery.galleryID).find(".loader").fadeOut(500,function(){$("#"+gallery.galleryID).find(".loader").removeClass("loading");});
var galleryImg=$("#"+gallery.galleryID).find(".galleryImg");
var galleryTitle=$("#"+gallery.galleryID).find(".galleryTitle");
var photoTitle=$("#"+gallery.galleryID).find(".photoTitle");
var galleryDesc=$("#"+gallery.galleryID).find(".galleryDesc");
var galleryScreen=$("#"+gallery.galleryID);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
var newImg= $("
").addClass("highRes").attr({src:gallery.images[gallery.idx].full+rndVar}).css({position:"absolute",top:0,left:0}).hide();
galleryImg.prepend(newImg);
var dim=newImg.getDim(gallery,gallery.images[gallery.idx].fullWidth,gallery.images[gallery.idx].fullHeight);
var w=parseFloat(dim[1]);
var h=parseFloat(dim[0]);
if(gallery.options.containment==="body"){
galleryScreen.animate({
top:"50%",
marginTop:-(h/2),
left:"50%",
marginLeft:-(w/2)
},"slow",function(){
if($.browser.msie && $.browser.version<8){
galleryScreen.css({
width:"",
height:""
});
}
});
}
galleryImg.animate({
width:w,
height:h
},"slow");
newImg.fadeIn("slow", function () {galleryNav.fadeIn(500); galleryTitle.fadeIn(); });
newImg.next("img").fadeOut(gallery.options.fadeTime,function(){$(this).remove();});
photoTitle.fadeOut(gallery.options.fadeTime,function(){photoTitle.html(gallery.images[gallery.idx].title); photoTitle.fadeIn();});
galleryDesc.html(gallery.images[gallery.idx].description);
if(gallery.sliding){
galleryNav.find(".startStopIcon").addClass("selected");
gallery.startGallery=setTimeout(function(){
gallery.idx = gallery.idx === gallery.images.length - 1 ? 0 : gallery.idx + 1;
$(gallery).mb_preload();
},gallery.options.slideTimer);
}
galleryNav.find(".photoCounter").html((gallery.idx+1)+" / "+gallery.images.length+"");
if(galleryDesc.html()==="") galleryDesc.slideUp();
if(gallery.options.onChangePhoto) gallery.options.onChangePhoto();
},
buildThumbs:function(){
var gallery= $(this).get(0);
var galleryThumbs=$("#"+gallery.galleryID).find(".galleryThumbs");
galleryThumbs.empty();
$(gallery.images).each(function(i){
var photo=this;
var img=$("
").addClass("thumb");
img.attr("src",photo.thumb);
img.attr("id", gallery.galleryID+"_thumb_"+i);
img.bind("click",function(){
if($(this).is(".selected")) return;
gallery.idx = photo.idx;
$(gallery).mb_selectThumb();
$(gallery).mb_stopSlide();
$(gallery).mb_preload();
$(gallery).mb_hideThumbs();
});
galleryThumbs.css("opacity",.9);
galleryThumbs.append(img);
});
},
buildNav:function(){
var gallery= $(this).get(0);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
var galleryThumbs=$("#"+gallery.galleryID).find(".galleryThumbs");
var photoTitle= $("").addClass("photoTitle");
var thumbsIcon = $("")
.attr("title", "show/hide thumbnail images")
.addClass("thumbsIcon ico")
.bind("click", function () {
if (galleryThumbs.is(":hidden")) {$(gallery).mb_showThumbs();
} else {$(gallery).mb_hideThumbs(); }
});
var startStopIcon = $("")
.attr("title", "start/stop slide show")
.addClass("startStopIcon ico")
.bind("click", function () {
if (gallery.sliding) {$(gallery).mb_stopSlide();
} else {$(gallery).mb_startSlide(); }
});
var prevIcon = $("")
.attr("title", "show previous image")
.addClass("prevIcon ico")
.bind("click", function () {
$(gallery).mb_galleryPrev();
});
var nextIcon = $("")
.attr("title", "show next image")
.addClass("nextIcon ico")
.bind("click", function () {
$(gallery).mb_galleryNext();
});
var showExif=gallery.options.exifData;
var exifIcon = showExif ? $("")
.attr("title", "Show Exitf data")
.addClass("exifIcon ico")
.bind("click", function () {
$(gallery).mb_showExifData();
}):"";
var photoCounter= $("").addClass("photoCounter ico");
var galleryBtns= $("").addClass("galleryBtns");
galleryNav
.append(photoTitle);
galleryNav
.append(galleryBtns);
galleryBtns
.prepend(thumbsIcon)
.prepend(startStopIcon)
.prepend(prevIcon)
.prepend(nextIcon)
.prepend((showExif?exifIcon:""))
.prepend(photoCounter);
},
// todo
showExifData:function(){
var gallery= $(this).get(0);
/*
EXIF methods:
$(this).exif(key): a specific key;
$(this).exifPretty(): all key as string;
$(this).exifAll(): all key as object;
*/
// console.debug($("#"+gallery.galleryID).find(".highRes").exifAll());
$(gallery).mb_stopSlide();
},
selectThumb:function(){
var gallery= $(this).get(0);
var galleryThumbs=$("#"+gallery.galleryID).find(".galleryThumbs");
var actualThumb=$("#"+gallery.galleryID+"_thumb_"+gallery.idx);
galleryThumbs.find(".thumb").removeClass("selected").css("opacity",1);
actualThumb.addClass("selected").css("opacity",.4);
},
startSlide:function(idx){
var gallery= $(this).get(0);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
gallery.sliding=true;
gallery.idx=idx?idx: gallery.idx===gallery.images.length-1?0:gallery.idx+1;
$(gallery).mb_preload();
galleryNav.find(".startStopIcon").addClass("selected");
},
stopSlide:function(){
var gallery= $(this).get(0);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
gallery.sliding=false;
clearTimeout(gallery.startGallery);
galleryNav.find(".startStopIcon").removeClass("selected");
},
prev:function(){
var gallery= $(this).get(0);
$(gallery).mb_stopSlide();
gallery.sliding=false;
gallery.idx = gallery.idx === 0 ? gallery.images.length - 1 : gallery.idx - 1;
$(gallery).mb_preload();
},
next:function(){
var gallery= $(this).get(0);
$(gallery).mb_stopSlide();
gallery.sliding=false;
gallery.idx = gallery.idx === gallery.images.length - 1 ? 0 : gallery.idx + 1;
$(gallery).mb_preload();
},
gotoIDX:function(idx){
var gallery= $(this).get(0);
if (idx - 1 === gallery.idx) {
return;
}
gallery.idx = idx-1;
$(gallery).mb_selectThumb();
$(gallery).mb_stopSlide();
$(gallery).mb_preload();
$(gallery).mb_hideThumbs();
},
loader:function(){
var gallery= $(this).get(0);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
galleryNav.find(".thumbsIcon").addClass("selected");
var galleryThumbs=$("#"+gallery.galleryID).find(".galleryThumbs");
galleryThumbs.slideDown();
},
hideThumbs:function(){
var gallery= $(this).get(0);
var galleryNav=$("#"+gallery.galleryID).find(".galleryNav");
galleryNav.find(".thumbsIcon").removeClass("selected");
var galleryThumbs=$("#"+gallery.galleryID).find(".galleryThumbs");
galleryThumbs.slideUp();
},
closeGallery:function(noTransition){
var gallery= $(this).get(0);
if(gallery.options.onBeforeClose) gallery.options.onBeforeClose();
var tt=noTransition?1:"slow";
if(!$.browser.msie)
$("#"+gallery.galleryID).animate({position:"absolute",top:-1000},tt,
function(){
$("#"+gallery.galleryID).remove();
$("#"+gallery.options.containment).slideUp();
if (gallery.options.onClose) gallery.options.onClose();
});
else{
$("#"+gallery.galleryID).remove();
$("#"+gallery.options.containment).hide();
}
$(".mb_overlay").slideUp(tt,function(){$(".mb_overlay").remove();});
$(gallery).mb_stopSlide();
gallery.initialized=false;
},
thumbsOnPage:function(){
var gallery= $(this).get(0);
//gallery.initialized=false;
if ($("#"+gallery.id+"_thumbsContainer").html()!=null){
if($("#"+gallery.id+"_thumbsContainer").is(":visible"))
$("#"+gallery.id+"_thumbsContainer").slideUp(500,function(){$(this).remove();});
else
$("#"+gallery.id+"_thumbsContainer").slideDown(500);
return;
}
var thumbsContainer=$("").attr("id",gallery.id+"_thumbsContainer").addClass("thumbsContainer").hide();
$(gallery).after(thumbsContainer);
$(gallery.images).each(function(i){
var photo=this;
var img=$("
![]()
").addClass("thumb");
img.attr("src",photo.thumb);
img.bind("click",function(){
if($(this).is(".selected")) return;
if(!gallery.initialized){
gallery.options.startFrom=i+1;
gallery.options.autoSlide=false;
gallery.options.printOutThumbs=false;
$(gallery).mbGallery(gallery.options);
}
else
$(gallery).mb_gotoIDX(i+1);
});
img.attr("id", gallery.galleryID+"_thumb1_"+i);
thumbsContainer.append(img);
});
thumbsContainer.slideDown();
}
};
jQuery.fn.extend({
getDim:function(gallery,w,h){
var nw=w?w:$(this).outerWidth();
var nh=h?h:$(this).outerHeight();
// What is initial value for wh and ww???
var wh = gallery.options.containment === "body" ? $(window).height() : $("#" + gallery.options.containment).innerHeight();
var ww = gallery.options.containment === "body" ? $(window).width() : $("#" + gallery.options.containment).innerWidth();
if (gallery.options.maxHeight > 0 && $(this).outerHeight() > gallery.options.maxHeight) {nh = gallery.options.maxHeight; }
if (gallery.options.maxWidth > 0 && $(this).outerWidth() > gallery.options.maxWidth) {nw = gallery.options.maxWidth; }
/* PHB
if (parseFloat(nh)+120>=wh || gallery.options.fullScreen){
nh= wh-130;
nw=(nh*$(this).outerWidth())/$(this).outerHeight();
$(this).attr("height", nh);
$(this).attr("width", nw);
}
if (parseFloat(nw)+100>=ww ){
nw= ww-120;
nh=(nw*$(this).outerHeight())/$(this).outerWidth();
$(this).attr("width", nw);
$(this).attr("height", nh);
}
*/
// If either dimension of the image is too large for the window or if 'full screen' selected
if (parseFloat(nh) + 130 > wh || parseFloat(nw) + 100 > ww || gallery.options.fullScreen) {
if ( (w/h) <= (ww/wh) ) {
nh = wh - 130;
nw = nh * (w/h);
$(this).attr("height", nh);
$(this).attr("width", nw);
} else {
nw = ww - 100;
nh = nw * (h/w);
$(this).attr("height", nh);
$(this).attr("width", nw);
}
}
return [nh,nw];
}
});
// public methods
$.fn.mbGallery= $.mbGallery.buildMbGallery;
$.fn.mb_getPhotos= $.mbGallery.getPhotos;
$.fn.mb_buildThumbs= $.mbGallery.buildThumbs;
$.fn.mb_buildNav= $.mbGallery.buildNav;
$.fn.mb_preload= $.mbGallery.preload;
$.fn.mb_changePhoto= $.mbGallery.changePhoto;
$.fn.mb_selectThumb= $.mbGallery.selectThumb;
$.fn.mb_showExifData= $.mbGallery.showExifData;
$.fn.mb_galleryNext= $.mbGallery.next;
$.fn.mb_galleryPrev= $.mbGallery.prev;
$.fn.mb_gotoIDX= $.mbGallery.gotoIDX;
$.fn.mb_startSlide= $.mbGallery.startSlide;
$.fn.mb_stopSlide= $.mbGallery.stopSlide;
$.fn.mb_showThumbs= $.mbGallery.loader;
$.fn.mb_thumbsOnPage= $.mbGallery.thumbsOnPage;
$.fn.mb_hideThumbs= $.mbGallery.hideThumbs;
$.fn.mb_closeGallery= $.mbGallery.closeGallery;
jQuery.fn.mb_bringToFront= function(){
var zi=10;
$('*').each(function() {
if($(this).css("position")==="absolute" || $(this).css("position")=="fixed"){
var cur = parseInt($(this).css('zIndex'));
zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
}
});
$(this).css('zIndex',zi+=1);
return $(this);
};
})(jQuery);