|
|
// JavaScript Document
|
|
|
/*
|
|
|
由于大图绑定在url属性中，需使用a标签的url指向大图。仅支持png,gif,jpg,bmp四种格式的图片。用法是：目标.preview();
|
|
|
例如：<a href="xx.jpg">图片</a>
|
|
|
$("a").preview();就可以了
|
|
|
*/
|
|
|
(function($){
|
|
|
$.fn.preview = function(){
|
|
|
var xOffset = 10;
|
|
|
var yOffset = 20;
|
|
|
var w = function(){
|
|
|
if($.browser.msie){
|
|
|
return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :
|
|
|
document.body.clientWidth;
|
|
|
}else{
|
|
|
return self.innerWidth;
|
|
|
}
|
|
|
}
|
|
|
$(this).each(function(){
|
|
|
$(this).hover(function(e){
|
|
|
if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("url"))){
|
|
|
$("body").append("<div id='preview'><div><img src='"+$(this).attr('url')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
|
|
|
}else{
|
|
|
$("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
|
|
|
}
|
|
|
$("#preview").css({
|
|
|
position:"absolute",
|
|
|
padding:"4px",
|
|
|
border:"1px solid #f3f3f3",
|
|
|
backgroundColor:"#eeeeee",
|
|
|
top:(e.pageY - yOffset) + "px",
|
|
|
zIndex:1000
|
|
|
});
|
|
|
$("#preview > div").css({
|
|
|
padding:"5px",
|
|
|
backgroundColor:"white",
|
|
|
border:"1px solid #cccccc"
|
|
|
});
|
|
|
$("#preview > div > p").css({
|
|
|
textAlign:"center",
|
|
|
fontSize:"12px",
|
|
|
padding:"8px 0 3px",
|
|
|
margin:"0"
|
|
|
});
|
|
|
if(e.pageX < w()/2){
|
|
|
$("#preview").css({
|
|
|
left:e.pageX + xOffset + "px"
|
|
|
}).fadeIn("fast");
|
|
|
}else{
|
|
|
$("#preview").css("right",(w()-e.pageX + yOffset) + "px").fadeIn("fast");
|
|
|
}
|
|
|
},function(){
|
|
|
$("#preview").remove();
|
|
|
}).mousemove(function(e){
|
|
|
$("#preview").css("top",(e.pageY - xOffset) + "px")
|
|
|
if(e.pageX < w()/2){
|
|
|
$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
|
|
|
}else{
|
|
|
$("#preview").css("right",(w()-e.pageX + yOffset) + "px").css("left","auto");
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
})(jQuery);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
jQuery(function($) {
|
|
|
$.fn.extend({
|
|
|
loopedSlider: function(options) {
|
|
|
var settings = $.extend({}, $.fn.loopedSlider.defaults, options);
|
|
|
return this.each(
|
|
|
function() {
|
|
|
var o = $.metadata ? $.extend({}, settings) : settings;
|
|
|
var CurIndex = 1;
|
|
|
var t = $(this);
|
|
|
var pURLsrc = new Array();
|
|
|
pURLsrc[0] = t.find("#photo_container").attr("url").replace("-s.","-m.");
|
|
|
$("#"+o.mPhotoDetail+" a").each(function(){pURLsrc[pURLsrc.length] = $(this).attr("url");return;})
|
|
|
var pLen = pURLsrc.length;
|
|
|
t.children("#photo_container").css("background-image","url("+pURLsrc[CurIndex]+")");
|
|
|
t.children("#photo_holding").css("background-image" ,"url("+pURLsrc[CurIndex+1]+")");
|
|
|
sliderIntervalID = setInterval(function(){switchPic();},o.speed);
|
|
|
function switchPic(){
|
|
|
$("#photo_container", t).fadeOut(800);//
|
|
|
setTimeout(changePic,800);
|
|
|
}
|
|
|
function changePic(){
|
|
|
$("#photo_container", t).remove();
|
|
|
$("#photo_holding", t).attr("id","photo_container").css("z-index","2");
|
|
|
$("#photo_container", t).clone().attr("id","photo_holding").css("z-index","1").appendTo(t);
|
|
|
|
|
|
$("#photo_holding", t).css("background-image" ,"url("+pURLsrc[CurIndex+1]+")");
|
|
|
CurIndex++;
|
|
|
if(CurIndex >= (pLen-1)){CurIndex=-1}
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
$.fn.loopedSlider.defaults = {
|
|
|
mPhotoDetail: "mPhotoDetail", //photos in here
|
|
|
speed: 3000 //Speed of slide animation, 1000 = 1second.
|
|
|
};
|
|
|
}); |