Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pois bem,coloquei uma galeria aqui no site que to fazendo. No IE a galeria fica bugada.Vo colocar imagens e os codigos pra ver se podem me ajudar.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#Tudo margin: 1em auto;
width: 955px;
height:800px;
margin: auto;
text-align: center;
color:#0F0
}
#banner{
width:955px;
height:100px;
background-image:url(images/banner.png);
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color:#000;
}
#menu{
background-image:url(images/bgmenu.png);
background-repeat:repeat-x;
background-color:#D7D7D7;
height:45px;
margin-top:5px;
margin-left:260px;
margin-right:260px;
}
#menu ul{
padding:0px;
margin:0px;
float:left;
font-size:21px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
width:100%;
list-style:none;
}
#menu ul li{display:inline;}
#menu ul li a{
padding:3px 20px;
float:left;
color:#000;
text-decoration:none;
border-bottom:3px solid#333;
}
#menu ul li a:hover{
color:#666;
border-bottom:3px solid#CCC
}
</style>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="Tudo">
<div id="banner"></div>
<div id="menu">
<ul>
<li><a href="#">ínicio</a></li>
<li><a href="#">galeria</a></li>
<li><a href="#">serviços</a></li>
<li><a href="#">contatos</a></li>
</ul>
</div>
<ul id="slideshow">
<li>
<h3>Verão</h3>
<span>photos/1g.jpg</span>
<p>Venha conhecer as novas tendencias</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
</li>
<li>
<h3>Vai vai vai</h3>
<span>photos/1g.jpg</span>
<p>mais um teste de imagem do jQuery.</p>
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</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" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=4;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
</div>
</body>
</html>CSS da galeria
#slideshow {list-style:none; color:#fff;}
#slideshow span {display:none;}
#wrapper {width:955px;display:none;}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:955px; height:210px; padding:2px; border:1px solid #ccc; background:#000;}
#information {position:absolute; bottom:0; width:955px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px; width:955px;}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:100%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
JS da galeria
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)')}}if(b&&f){b=$(B);f=$(f);b.style.opacity=f.style.opacity=this.navOpacity/100;b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');b.onclick=new Function(this.n+'.mv(-1,1)');f.onclick=new Function(this.n+'.mv(1,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)}}}();Imagem no chrome: http://i285.photobucket.com/albums/ll72/Tuk_/imagem.jpg
Imagem no IE: http://i285.photobucket.com/albums/ll72/Tuk_/imagem1.jpg
Poste o link. ^_^
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif