/* * * (mb)ImageNavigator * developed by Matteo Bicocchi on JQuery * 2002-2009 Open Lab srl, Matteo Bicocchi * www.open-lab.com - info@open-lab.com * version 2.0 * tested on: Explorer and FireFox for PC * FireFox and Safari for Mac Os X * FireFox for Linux * GPL (GPL-LICENSE.txt) licenses. * * */ (function($){ jQuery.fn.imageNavigator = function (options){ return this.each (function () { this.options={ areaWidth: 500, areaHeight:500, defaultnavWidth:150, draggerStyle:"2px dotted red", navOpacity:.8, loaderUrl:"loading.gif", additionalContenet:"" }; $.extend (this.options, options); options= this.options; var imgNav= this; var additionalContent, draggableElement, applContainer,image,imageW,imageH,imageContainer,imageContainerW,imageContainerH,navLocator,navigationThumb,navigationThumbW,navigationThumbH,nav,navW,navH,image_isHoriz,cont_isHoriz,ratio,actualIdx=0,onScreen=false,navCoordinateX,navCoordinateY; $(imgNav).css({ width : imgNav.options.areaWidth }); var images= $(imgNav).find(".imagesContainer"); $(imgNav).empty(); if ($.metadata){ $.metadata.setType("class"); $(images).each(function(){ if ($(this).metadata().imageUrl) $(this).attr("imageUrl",$(this).metadata().imageUrl); if ($(this).metadata().navPosition) $(this).attr("navPosition",$(this).metadata().navPosition); if ($(this).metadata().navWidth) $(this).attr("navWidth",$(this).metadata().navWidth); if ($(this).metadata().NavCoordinates) $(this).attr("NavCoordinates",$(this).metadata().NavCoordinates); }); } var imageURL=$(images[0]).attr("imageUrl"); var navPos=$(images[0]).attr("navPosition"); var navWidth= $(images[0]).attr("navWidth")?$(this).attr("navWidth"):imgNav.options.defaultnavWidth;//100; var titles=$(images).find(".title"); var descriptions=$(images).find(".description"); var additionalContents=$(images).find(".additionalContent"); var navCoordinateX=$(images[0]).attr("NavCoordinates").split(",")[0]; var navCoordinateY=$(images[0]).attr("NavCoordinates").split(",")[1]; $(imgNav).append("
"); imageContainer=$(imgNav).find(".imageContainer"); $(imageContainer).css({ overflow:"hidden", position: "relative", width:this.options.areaWidth+"px", height:this.options.areaHeight+"px" }); var loader=" "; $(imageContainer).append(loader); $(imgNav).prepend(""); var imagesIndex=$(imgNav).find(".imagesIndex"); $(imagesIndex).css({ position: "relative", width:this.options.areaWidth, padding: "0" }); $(imagesIndex).append(titles); var canClick=true; $(titles).each(function(i){ $(this).click(function(){ if (!canClick) return; actualIdx=i; canClick=false; imageURL=$(images[i]).attr("imageUrl"); navPos=$(images[i]).attr("navPosition"); navWidth= $(images[i]).attr("navWidth")?$(images[i]).attr("navWidth"):imgNav.options.defaultnavWidth;//100; if ($(images[i]).attr("NavCoordinates")){ navCoordinateX=$(images[i]).attr("NavCoordinates").split(",")[0]; navCoordinateY=$(images[i]).attr("NavCoordinates").split(",")[1]; //console.log(navCoordinateX,navCoordinateY); } if(image) $(image).fadeOut(500, function() { startNav(imageURL); }); else startNav(imageURL); }); }); $(imgNav).append(""); var descriptionBox=$(imgNav).find(".descriptionBox"); $(descriptionBox).html(descriptions[0]); function startNav(u) { navW=null; ratio=null; if (applContainer){ $(applContainer).remove(); } $(titles).each(function(i){ if (i==actualIdx) $(this).addClass("selected"); else $(this).removeClass("selected"); }); navW=navWidth; var imageObj = new Image(); imageObj.src=null; u=u+"?rdm="+Math.random(); imageObj.src = u; imageObj.onload =function(){buildnav(u);}; imageObj.onerror = imageFailed; $("#loader").fadeIn(500); } function imageFailed() { alert("non riesco a caricare: "+this.src); } function buildnav(u) { imageContainerW=$(imageContainer).width(); imageContainerH=$(imageContainer).height(); $("#loader").fadeOut(500, function(){canClick=true;}); $(titles).bind("click",function(){return true;}); $(imageContainer).mouseenter(function(){ if($.browser.msie) $(nav).show(); else $(nav).show(); }); $(imageContainer).mouseleave(function(){ if($.browser.msie) $(nav).hide(); else $(nav).hide(); }); //applContainer $(imageContainer).append(""); applContainer = $(imgNav).find(".applContainer"); $(applContainer).css({ position:"relative", height:$(imageContainer).height() }); $(applContainer).append(""); draggableElement=$(applContainer).find(".draggableElement"); //todo: add a div for image containment //image $(draggableElement).append("