jQuery的图片库问题

我发现在互联网上的代码，并想知道如果我可以做这样的效果：当我点击大图，或者其他地方的任何地方你指定，我的图像可以以某种方式放大或弹出（在同一窗口中）与昏暗的背景。我发现了很多脚本，我可以做到这一点，但不知何故，我不能实现它到这个代码。

所以这里是代码，复制并粘贴到你的程序中;每一个建议将是巨大的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title></title> 

<style type="text/css"> 
body {margin:0; 
background:#111; 

font:11px Verdana,Arial; 
} 
#slideshow {list-style:none; 
color:#fff} 
#slideshow span {display:none} 

#wrapper {width:506px; 
margin:50px auto; 
display:none} 

#wrapper * {margin:0; 
padding:0} 

#fullsize {position:relative; 
width:500px; 
height:300px; 

} 
    #image { 
width:500px; 
} 

#image img {position:absolute; 
z-index:25; 
width:auto} 

.imgnav {position:absolute; 
width:25%; 
height:306px; 
    cursor:pointer; 
    z-index:150} 


#imglink { 
    position:absolute; 
    height:306px; 
    width:100%; 
    z-index:100; 
    opacity:.4; 
    filter:alpha(opacity=40); 
} 


#thumbnails {margin-top:0px; 
position:relative; 
top:-55px; 
padding:0px; 
margin:0px; 


} 

#slidearea { 
padding:0px; 
margin:0px; 
float:left; 
position:relative; 
width:500px; 
height:81px; 
overflow:hidden} 

#slider { 
position:absolute; 
left:0; 
height:81px; 
width:460px; 
} 

#slideleft { 
float:left; 
width:20px; 
height:31px; 
margin-top:25px; 
position:relative; 
    z-index:100; 
background-color:#222; 
top:50px; 
} 

#slideright { 
position:relative; 

    z-index:100; 
float:right; 
width:20px; 
height:31px; 
top:-60px; 
left:-6px; 
} 

#slideleft:hover {background-color:#333} 


#slideright:hover {background-color:#333} 



#slider img {cursor:pointer; 

} 



</style>  


</head> 
<body> 

    <ul id="slideshow"> 

     <li> 

      <h3></h3> 
      <span>photos/sea-turtle.jpg</span> 
     <p></p> 

      <a href="#"><img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" /></a> 

      </li> 

    </ul> 
    <div id="wrapper"> 

     <div id="fullsize"> 

      <div id="imgprev" class="imgnav" title="Previous Image"></div> 
      <div id="imglink"></div> 
      <div id="imgnext" class="imgnav" title="Next Image"></div> 
      <div id="image"></div> 
      <div id="information"> 
       <h3></h3> 
       <p></p> 
      </div> 
     </div> 

     <div id="thumbnails"> 
      <div id="slideleft" title="Slide Left"></div> 
     <div id="slidearea"> 
       <div id="slider"></div> 
      </div> 
      <div id="slideright" title="Slide Right"></div> 
     </div> 

</div> 
<script type="text/javascript" > 


var TINY={}; 

function $(i){return document.getElementById(i)} 
function $$(e,p){p=p||document; return p.getElementsByTagName(e)} 

TINY.slideshow=function(n){ 
    this.infoSpeed=this.imgSpeed=this.speed=10; 
    this.thumbOpacity=this.navHover=70; 
    this.navOpacity=25; 
    this.scrollSpeed=5; 
    this.letterbox='#000'; 
    this.n=n; 
    this.c=0; 
    this.a=[] 
}; 

TINY.slideshow.prototype={ 
    init:function(s,z,b,f,q){ 
     s=$(s); 
     var m=$$('li',s), i=0, w=0; 
     this.l=m.length; 
     this.q=$(q); 
     this.f=$(z); 
     this.r=$(this.info); 
     this.o=parseInt(TINY.style.val(z,'width')); 
     if(this.thumbs){ 
      var u=$(this.left), r=$(this.right); 
      u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')'); 
      u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")'); 
      r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')'); 
      this.p=$(this.thumbs) 
     } 
     for(i;i<this.l;i++){ 
      this.a[i]={}; 
      var h=m[i], a=this.a[i]; 
      a.t=$$('h3',h)[0].innerHTML; 
      a.d=$$('p',h)[0].innerHTML; 
      a.l=$$('a',h)[0]?$$('a',h)[0].href:''; 
      a.p=$$('span',h)[0].innerHTML; 
      if(this.thumbs){ 
       var g=$$('img',h)[0]; 
       this.p.appendChild(g); 
       w+=parseInt(g.offsetWidth); 
       if(i!=this.l-1){ 
        g.style.marginRight=this.spacing+'px'; 
        w+=this.spacing 
       } 
       this.p.style.width=w+'px'; 
       g.style.opacity=this.thumbOpacity/100; 
       g.style.filter='alpha(opacity='+this.thumbOpacity+')'; 
       g.onmouseover=new Function('TINY.alpha.set(this,100,5)'); 
       g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)'); 
       g.onclick=new Function(this.n+'.pr('+i+',1)') 
      } 
     } 

     this.auto?this.is(0,0):this.is(0,1) 
    }, 
    mv:function(d,c){ 
     var t=this.c+d; 
     this.c=t=t<0?this.l-1:t>this.l-1?0:t; 
     this.pr(t,c) 
    }, 
    pr:function(t,c){ 
     clearTimeout(this.lt); 
     if(c){ 
      clearTimeout(this.at) 
     } 
     this.c=t; 
     this.is(t,c) 
    }, 
    is:function(s,c){ 
     if(this.info){ 
      TINY.height.set(this.r,1,this.infoSpeed/2,-1) 
     } 
     var i=new Image(); 
     i.style.opacity=0; 
     i.style.filter='alpha(opacity=0)'; 
     this.i=i; 
     i.onload=new Function(this.n+'.le('+s+','+c+')'); 
     i.src=this.a[s].p; 
     if(this.thumbs){ 
      var a=$$('img',this.p), l=a.length, x=0; 
      for(x;x<l;x++){ 
       a[x].style.borderColor=x!=s?'':this.active 
      } 
     } 
    }, 
    le:function(s,c){ 
     this.f.appendChild(this.i); 
     var w=this.o-parseInt(this.i.offsetWidth); 
     if(w>0){ 
      var l=Math.floor(w/2); 
      this.i.style.borderLeft=l+'px solid '+this.letterbox; 
      this.i.style.borderRight=(w-l)+'px solid '+this.letterbox 
     } 
     TINY.alpha.set(this.i,100,this.imgSpeed); 
     var n=new Function(this.n+'.nf('+s+')'); 
     this.lt=setTimeout(n,this.imgSpeed*100); 
     if(!c){ 
      this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000) 
     } 
     if(this.a[s].l!=''){ 
      this.q.onclick=new Function('window.location="'+this.a[s].l+'"'); 
      this.q.onmouseover=new Function('this.className="'+this.link+'"'); 
      this.q.onmouseout=new Function('this.className=""'); 
      this.q.style.cursor='pointer' 
     }else{ 
      this.q.onclick=this.q.onmouseover=null; 
      this.q.style.cursor='default' 
     } 
     var m=$$('img',this.f); 
     if(m.length>2){ 
      this.f.removeChild(m[0]) 
     } 
    }, 
    nf:function(s){ 
     if(this.info){ 
      s=this.a[s]; 
      $$('h3',this.r)[0].innerHTML=s.t; 
      $$('p',this.r)[0].innerHTML=s.d; 
      this.r.style.height='auto'; 
      var h=parseInt(this.r.offsetHeight); 
      this.r.style.height=0; 
      TINY.height.set(this.r,h,this.infoSpeed,0) 
     } 
    } 
}; 

TINY.scroll=function(){ 
    return{ 
     init:function(e,d,s){ 
      e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p; 
      var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20) 
     }, 
     mv:function(e,l,d,s){ 
      var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'} 
     }, 
     cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)} 
    } 
}(); 

TINY.height=function(){ 
    return{ 
     set:function(e,h,s,d){ 
      e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height'); 
      ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20) 
     }, 
     tw:function(e,h,ho,hd,s){ 
      var oh=e.offsetHeight-ho; 
      if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}} 
     } 
    } 
}(); 

TINY.alpha=function(){ 
    return{ 
     set:function(e,a,s){ 
      e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'), 
      d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20) 
     }, 
     tw:function(e,a,d,s){ 
      var o=Math.round(e.style.opacity*100); 
      if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'} 
     } 
    } 
}(); 

TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();// JavaScript Document 


</script> 
<script type="text/javascript"> 


    $('slideshow').style.display='none'; 
    $('wrapper').style.display='block'; 
    var slideshow=new TINY.slideshow("slideshow"); 
    window.onload=function(){ 
     slideshow.auto=false; 
     slideshow.speed=5; 
     slideshow.link="linkhover"; 
     slideshow.info="information"; 
     slideshow.thumbs="slider"; 
     slideshow.left="slideleft"; 
     slideshow.right="slideright"; 
     slideshow.scrollSpeed=4; 
     slideshow.spacing=0; 
     slideshow.active="#fff"; 
     slideshow.init("slideshow","image","imgprev","imgnext","imglink"); 

    } 




</script> 

    </body></html>

来源

2011-09-20 Pero Maric

我会从previous question复制我的回答：

术语是一个灯箱。有许多。我与FancyBox有很好的经验。

要使用它们，您可以指定具有直接孩子img标签，例如所有的锚标签：

$('a:has(img)').fancybox();

来源

2011-09-20 20:53:55 Alex

是的，我已经试过的fancybox :)这是伟大的butit投入时，将无法正常工作这个图片库，你可以试试它。如果您尝试成功，请通知我:) –

使用[jsfiddle]（http://jsfiddle.net/）向我们显示您的代码，我们可以尝试调试。 – Alex

谢谢亚历克斯，不知道我是否做得对，但我总是可以通过rapidshare或其他类似的东西把它发送给你，但这里是代码http://jsfiddle.net/HXmWU/2/ –

jQuery的图片库问题

回答

相关问题