Jquery image gallery enlargement_问答_开发者_运维开发者技术经验分享

Now I have pretty difficult problem..

I found this code on the internet, and was wondering if I can make this effect: When I click on the big image, or anywhere else where you specify, can my image somehow enlarge or pop out (in the same window) with a dim background. I've found many scripts with which I can make that happen but somehow I can't implement it into this code.

So here is the code, copy and paste it in your program; every advice will be great:

<!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>
        
        <di开发者_如何学Gov 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>

I'll copy my answer from a previous question:

The term is a lightbox. There any many jQuery lightbox plugins. I've had great experience with FancyBox.

To use them, you could target all anchor tags which have direct children img tags, for instance: