 |
|
| |
|
  |
14년 전 |
|
<![CDATA[
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
/*
viewer plugins
made by hong
*/
(function($){
$.fn.hongunViewer = function(maxw,list){
var _image = {
start : true,
layerh : 0,
layert : 0,
width : 0,
height : 0,
leng : 0,
list : [],
left : 0,
top : 0,
next : "http://www.soxfactory.com/img/next.gif",//next image
prev : "http://www.soxfactory.com/img/prev.gif",// prev image
close : "http://www.soxfactory.com/img/close.gif"//close image
}
var j = this;
if(list){
_image.list = list;
loading();
}
function loading(){// start loading image
if(!$(".imgLayer").length)
$("body").append(imgLayer());
$(".closeBtn").click(function(){
$("#overPg").remove();
$(".imgLayer").animate({
top : "-3000"
},function(){
_image.start = true;
$("#overlay").remove();
$(".imgLayer").remove();
});
});
$("#paging").empty();
$("#centerimg").html("<div style='text-align:center;'>loading...</div>");
var img = new Image();
img.onload = function() {
if(maxw < img.width){
_image.width = maxw;
_image.height = img.height / (img.width / maxw);
}else{
_image.width = img.width;
_image.height = img.height;
}
_image.layerw = parseInt(_image.width + 40);
_image.layerh = parseInt(_image.height + 60);
imgCenter();
show();
img.onload=function(){};
};
img.src = _image.list[_image.leng];
}
function show(){
//scrollTo(0,_image.top);
$.overlay();
if(_image.start)
$(".imgLayer").bodyCenter();
_image.start = false;
$(".imgLayer").animate({
top : _image.top,
left : _image.left,
width : _image.layerw,
height : _image.layerh
},500,function(){
$.overlay();
$("#centerimg").css("opacity",0);
$("#centerimg").html("<div style='text-align:center;'><img name=zb_target_resize style=\ src='"+_image.list[_image.leng]+"'></div>");
$("#centerimg img").css("width",_image.width);
$("#centerimg").animate({
opacity : 1
},function(){
if(_image.list.length > 1){
$("#paging").html("Image "+parseInt(_image.leng + 1)+" of "+_image.list.length);
var ppv = "";
var ppn = "";
if(_image.leng != 0)
ppv = "<img name=zb_target_resize style=\ src='"+_image.prev+"' class='pprev'>";
if(parseInt(_image.leng + 1) < _image.list.length)
ppn = "<img name=zb_target_resize style=\ src='"+_image.next+"' class='pnext'>";
if(!$("#overPg").length){
$("body").append("<div id='overPg' style='z-index:100;width:"+_image.width+"';height:400px;'><div style='float:left;'>"+ppv+"</div><div style='float:right;'>"+ppn+"</div></div>");
$("#overPg").css("opacity","0.3");
$("#overPg").bodyCenter("imgLayer");
}
$("#overPg").hover(function(){
$("#overPg").css("opacity","0.6");
},function(){
$("#overPg").css("opacity","0");
});
$("#imgLayer").hover(function(){
$("#overPg").css("opacity","0.6");
},function(){
$("#overPg").css("opacity","0");
});
$(".pprev").click(function(){
if(_image.leng > 0){
_image.leng = _image.leng - 1;
$("#overPg").remove();
loading();
}
});
$(".pnext").click(function(){
if(_image.leng < parseInt(_image.list.length - 1)){
_image.leng = _image.leng + 1;
$("#overPg").remove();
loading();
}
});
/*
$(".imgLayer").animate({
height : parseInt(_image.height + 100)
},function(){
$("#paging").append("<span><img name=zb_target_resize style=\ src='"+_image.prev+"' class='pprev'></span> Image "+parseInt(_image.leng + 1)+" of "+_image.list.length+" <span><img src='"+_image.next+"' class='pnext'></span>");
$(".pprev").click(function(){
if(_image.leng > 0){
_image.leng = _image.leng - 1;
loading();
}
});
$(".pnext").click(function(){
if(_image.leng < parseInt(_image.list.length - 1)){
_image.leng = _image.leng + 1;
loading();
}
});
});
*/
}
})
});
}
function imgCenter(){
var win = $(window);
var x = win.width();
var y = win.height();
_image.left = win.scrollLeft() + x/2 - _image.layerw/2;
if(_image.start)
_image.top = win.scrollTop() + y/2 - _image.layerh/2;
else
_image.top = _image.top;
if(_image.top < 0){
_image.top = 50;
}
}
function imgLayer(){ // viewerLayer
var text = "<div class='imgLayer' id='imgLayer' style='z-index:100;'>";
text += "<div id='layerTop' style='text-align:right;padding:5px 5px 0px 0px'><img name=zb_target_resize style=\ src='"+_image.close+"' class='closeBtn'></div>";
text += "<div id='centerimg'></div>";
text += "<div id='paging' style='text-align:center;padding:5px 0px 0px 0px;'></div>";
text += "</div>";
return text;
}
if($(this).find('img').length){
$(this).find("img").each(function(index){
_image.list.push($(j).find("img").eq(index).attr("src"));
$(this).click(function(){
_image.leng = index;
loading();
});
});
}
/// image viewer start
$.overlay = function(){
if($("#overlay").length)
$("#overlay").remove();
var arrayPageSize = $.getPageSize();
$("body").append("<div id='overlay'></div>");
$("#overlay").css("position","absolute");
$("#overlay").css("background","#3A3434");
$("#overlay").css("top","0");
$("#overlay").css("left","0");
$("#overlay").css("zIndex",90);
$("#overlay").css("width",arrayPageSize[0]);
$("#overlay").css("opacity","0.8");
$("#overlay").css("height",parseInt(arrayPageSize[1] + 100)+'px');
}
$.getPageSize = function(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
// image viewer end
}
$.fn.bodyCenter = function(id){
$(this).css("position","absolute");
var win = $(window);
var ts = $(this);
var x = win.width();
var y = win.height();
if(!id){
var left = win.scrollLeft() + x/2 - ts.width()/2;
var top = win.scrollTop() + y/2 - ts.height()/2;
}else{
var po = $("#"+id).position();
var top = parseInt((($("#"+id).height() / 2) + po.top) - (ts.height() / 2));
var left = parseInt((($("#"+id).width() / 2) + po.left) - (ts.width() / 2));
}
$(this).css("left",left);
$(this).css("top",top);
}
})(jQuery);
</script>
<script>
$(function(){
$("#imgArea").hongunViewer(800);
});
</script>
<html>
<style>
.imgLayer{background:black;color:#FFFFFF;font-size:11px;}
</style>
<body>
<div id='imgArea'>
<img name=zb_target_resize style=\ src='http://soxfactory.com/photo/file1267752079.jpg' width=100>
<img name=zb_target_resize style=\ src='http://soxfactory.com/photo/file11267752079.jpg' width=100>
<img name=zb_target_resize style=\ src='http://soxfactory.com/photo/file31267752079.jpg' width=100>
<img name=zb_target_resize style=\ src='http://soxfactory.com/photo/file51267752079.jpg' width=100>
<img name=zb_target_resize style=\ src='http://soxfactory.com/photo/file21267751884.jpg' width=100>
</div>
</body>
</html>
]]> |
|
 추천 : 598 |
추천
목록
|
|
| |
|
