-
*
* 
*
*
*
*
*
* @param Integer getUrlBy
* By default, it is set to 0 (zero) and the plugin will
* get the url of the full size img from the images
* parent A tag, or you can set it to 1 will and provide
* the fullSizePath param with the path to the full size
* images. Finally, you can set it to 2 and provide text
* to prefix param and have that prefix removed from the
* src tag of the thumbnail to create the path to the
* full sized image
*
* @example j$('#gallery').jqGalViewII({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});
*
* @example j$('#gallery').jqGalViewII({getUrlBy:2, prefix:'.tn'});
* ".tn" gets removed from the src attribute of your image
*
* @param String fullSizePath
* Set to null by default, but if you are going to set
* getUrlBy param to 1, you need to provide the full path
* to the full size image.
*
* @example j$('#gallery').jqGalViewII({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});
*
* @param String prefix
* Set to null by default, but if you are going to set
* getUrlBy param to 2, you need to provide text you
* want to remove from the src attribute of the thumbnail
* to get create the full size image name
*
* @example j$('ul').jqGalViewII({getUrlBy:2, prefix:'.tn'});
* ".tn" gets removed from the src attribute of your image
*
* @styleClasses
* gvIIContainer: overall holder of thumbnails and gvIIHolder div, the
* gvIILoader div and the gvIIImgContainer div
* gvIIHolder: contains the thumbnails divs
* gvIIItem: contains the thumbnail img, the gvLoaderMini div and the gvOpen div
* gvIILoaderMini :empty but styled with a loader images as background image.
* gvIIImgContainer: the full size image container and the gvDescText div
* gvIILoader: empty but styled with a loader images as background image.
*
*
* changes:
*
*/
j$(document).ready(function(){
j$('ul.gallery').jqGalViewII();
});
(function(j$){
j$.fn.jqGalViewII = function(options){
return this.each(function(index){
var el = this, j$_ = j$(this); j$img = j$('img', j$_);
el.opts = j$.extend({}, j$.fn.jqGalViewII.defaults, options);
// swap out current image gallery for jqGalView structure
var j$this = j$.fn.jqGalViewII.swapOut(j$_);
var j$container = j$('
*
* ').appendTo(j$this);
el.mainImgContainer = j$('
').appendTo(j$container);
el.image = j$('![]()
').appendTo(el.mainImgContainer);
el.loader = j$('').appendTo(el.mainImgContainer);
// Build our holder for the thumbnail images
var j$holder = j$('').appendTo(j$container);
var j$arrow = j$('');
// remove current images and replace with jqGalview
j$(this).after(j$this).remove();
j$img.each(function(i){
var j$image = j$(this);
var j$div = j$('
')
.appendTo(j$holder)
.append('
');// end : j$div
if(el.opts.getUrlBy == 0)
this.altImg = j$image.parent().attr('href');
else if(el.opts.getUrlBy == 1)
this.altImg = el.opts.fullSizePath + this.src.split('/').pop();
else if(el.opts.getUrlBy == 2)
this.altImg = j$this.src.replace(el.opts.prefix,'');
this.altTxt = j$image.attr('alt');
var image = new Image();
image.onload = function(){
image.onload = null;
j$div.empty().append(j$image);
j$('
').appendTo(j$div).css({opacity:".01"})
.mouseover(
function(){
var j$f = j$(this);
j$f.css({opacity:".75"}).stop().animate({opacity:".01"},500);
/*
// This was a bit heavy for real use, I'll leave it here for future dev
var offSet = j$f.offset();
var osLeft = offSet.left + (j$f.width()/2);
var osTop = offSet.top;
j$arrow.stop().animate({left:osLeft,top:osTop}, 100, el.opts.arrowEase);
*/
}
)
.click(
function(){
//alert("");
eval("jQuery.noConflict();" + j$image.attr("onclick_common") + ";");
j$image.trigger('click');
}
);
j$image.click(function(){
j$.fn.jqGalViewII.view(this,el);
});
if(i==0){
j$image.trigger('click');
j$image.siblings().trigger('mouseover');
}
};// end : image.onload
image.src = this.src;
});
j$arrow.appendTo(j$holder);
});
};
j$.fn.jqGalViewII.view = function(img,el){
if(typeof img.altImg == 'undefined') return false;
var url = /\?imgmax/.test(img.altImg) ? img.altImg : img.altImg+'?imgmax=800';
var j$i_wh = {}; //
var j$i_whFinal = {}; //
var wContainer, hContainer;
var j$w, j$h, j$wOrg, j$hOrg, isOver = false;
el.loader.show();
wContainer = el.mainImgContainer.width();
hContainer = el.mainImgContainer.height();
el.mainImgContainer.show();
el.image.attr({src:url}).css({top:0,left:0,position:'absolute'}).hide();
j$img = new Image();
j$img.onload = function(){
j$img.onload = null;
j$w = j$wOrg = j$img.width;
j$h = j$hOrg = j$img.height;
if (j$w > wContainer) {
j$h = j$h * (wContainer / j$w);
j$w = wContainer;
if (j$h > wContainer) {
j$w = j$w * (hContainer / j$h);
j$h = hContainer;
}
} else if (j$h > hContainer) {
j$w = j$w * (hContainer / j$h);
j$h = hContainer;
if (j$w > wContainer) {
j$h = j$h * (wContainer / j$w);
j$w = wContainer;
}
}
el.image.css({width:j$w,height:j$h, marginLeft:(wContainer-j$w)*.5,marginTop:(hContainer-j$h)*.5})
el.loader.fadeOut('fast',function(){el.image.fadeIn();});
};
j$img.src = url;
};
j$.fn.jqGalViewII.swapOut = function(j$el){
var id = j$el.attr('id') ? (' id="'+j$el.attr('id')+'"') : '';
var j$this = j$('');
return j$this;
};
j$.fn.jqGalViewII.defaults = {
getUrlBy : 0, // 0 == from parent A tag | 1 == the full size resides in another folder
fullSizePath : null,
prefix: 'thumbnail.',
arrowEase:'easeout'
};
})(jQuery);