/* Plus Size Image Viewer
* Last updated: Jan 11th,
2009. This notice must stay
intact for usage
* Author: JavaScript Kit at
http://
www.javascriptkit.com/
* Visit http://
www.javascriptkit.com/ for
full source code
*/
var plusimageviewer={
enlargeboxmarkup: '
div>
',
captionoffset: [-5,
-15], //additional offset of
caption relative to bottom
left edge of image
fadeduration:
[300, 100], //fade in and
out duration, in milliseconds
//////////NO NEED
TO EDIT BEYOND
HERE/////////////
pluscontainers:[],
$enlargebox:
null,
boxzindex:100,
getcaptionposition:function
($img){
var offsets=$
img.offset()
return [offsets.left
+this.captionoffset[0],
offsets.top+$
img.outerHeight()
+this.captionoffset[1]] //
return position of caption
relative to thumb image
},
getlargeimgposition:
function($, $enlargebox){
var
boxdimensions=[$
enlargebox.outerWidth(), $
enlargebox.outerHeight()]
var
docdimensions=[$(window)
.width(), $(window).height
()]
var docscrollpos=
[$(document).scrollLeft(), $
(document).scrollTop()]
var leftpos=
(docdimensions[0]
>boxdimensions[0])?
docscrollpos[0]
+docdimensions[0]/2-
boxdimensions[0]/2 :
docscrollpos[0]+1 //center
large image horizontally
var toppos=
(docdimensions[1]
>boxdimensions[1])?
docscrollpos[1]
+docdimensions[1]/2-
boxdimensions[1]/2 :
docscrollpos[1]+1
return [leftpos,
toppos]
},
showimage:function($, $
img){
var
pluscontainer=this.
pluscontainers[$img.data
('order')]
pluscontainer.$
enlargearea.empty().html
('
')
var
largeimgpos=this.
getlargeimgposition($,
pluscontainer.$enlargebox)
pluscontainer.$
enlargebox.css({zIndex:+
+this.boxzindex,
display:'none',
left:largeimgpos[0],
top:largeimgpos[1]}).fadeIn
(this.fadeduration[0])
},
init:function($, $img){
var
captionpos=this.
getcaptionposition($img)
var $caption=$
('
').css
({left:captionpos[0],
top:captionpos[1]})
.appendTo(document.body)
var $enlargebox=
$(this.enlargeboxmarkup)
.appendTo(document.body)
var $
enlargearea=$
enlargebox.find
('.largeimage:eq(0)') //
reference DIV that will
contain actual enlarged
image
var enlargesrc=$
img.attr('data-plusimage')
var enlargesize=$
img.attr('data-plussize')
.split(',') //get dimensions of
large image as string
enlargesize=
[parseInt(enlargesize[0]),
parseInt(enlargesize[1])] //
get dimensions of large
image as array [w, h]
$caption.click
(function(e){ //open large
image when caption is
clicked on
plusimageviewer.
showimage($, $img, e)
e.preventDefault()
e.stopPropagation()
})
$enlargebox.click
(function(e){
e.stopPropagation
()
}).find('div.title
img:eq(0)').click(function()
{ //close image box when
"x" icon is clicked on
$
enlargebox.fadeOut
(plusimageviewer.
fadeduration[1])
})
this.pluscontainers.push({$
img:$img, $caption:$
caption,
captionpos:captionpos, $
enlargebox:$enlargebox, $
enlargearea:$enlargearea,
enlargesrc:enlargesrc,
enlargesize:enlargesize})
}
}
jQuery(document).ready
(function($){
var $
targetimages=$('img[data-
plusimage]')
$
targetimages.each(function
(i){
var $
img=$(this).data('order', i)
plusimageviewer.init($, $
(this), i)
})
if ($
targetimages.length>0){
$
(document).click(function()
{ //hide all plus size images
when document is clicked
var
pluscontainers=
plusimageviewer.
pluscontainers
for (var i=0;
i