Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dieguinhu Web

Galeria de imagens

Por , em Desenvolvimento frontend

Recommended Posts

Dieguinhu Web    0

Dieguinhu Web
Postado

Bom pessoal tenho que construir uma galeria que terá thumbs tanto faz em cima dos lados e um quadrado grande que aparecerá as imagens grandes

 

TENHO ESSE CSS

#conteudo {    width: 630px;    margin: 0 auto;    border: 2px solid #000;}img {    border: 0px none;    float: left;    width: 126px;    height: 50px}

E ESSE HTML

<link href="estilos.css" rel="stylesheet" type="text/css" /></head><body>	<div id="conteudo">		<img src="imagem1.gif" alt="imagem1" />		<img src="imagem2.gif" alt="imagem2" />		<img src="imagem3.gif" alt="imagem3" />		<img src="imagem4.gif" alt="imagem4" />		<img src="imagem5.gif" alt="imagem5" />		<img src="imagem6.gif" alt="imagem6" />		<img src="imagem7.gif" alt="imagem7" />		<img src="imagem8.gif" alt="imagem8" />		<img src="imagem9.gif" alt="imagem9" />		<img src="imagem10.gif" alt="imagem10" />		<img src="imagem11.gif" alt="imagem11" />		<img src="imagem12.gif" alt="imagem12" />	</div></body>

 

Só que esse não possui o rollover alguem teria um desse modelo facil de implementar com rollover??

 

 

 

Ficaria agradecido.... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelrizzo    0

marcelrizzo
Postado

Vê se é isso que você quer:

Eu peguei ela no Maujor e adptei para o que eu queria.

 

HTML:

<div id="principal">	<h2>Acampamento de Grupo - 2001</h2>		<ol class="fotos"> 			<li><a href="#"><img src="fotos/acamgrupo2001/acamgrupo01.jpg" alt="Acampamento" /><span><img src="fotos/acamgrupo2001/acamgrupo01.jpg" alt="Acampamento"/></span></a>			</li>			<li><a href="#"><img src="fotos/acamgrupo2001/acamgrupo02.jpg" alt="Acampamento" /><span><img src="fotos/acamgrupo2001/acamgrupo02.jpg" alt="Acampamento"/></span></a>			</li>			<li><a href="#"><img src="fotos/acamgrupo2001/acamgrupo03.jpg" alt="Acampamento" /><span><img src="fotos/acamgrupo2001/acamgrupo03.jpg" alt="Acampamento"/></span></a>			</li>			<li><a href="#"><img src="fotos/acamgrupo2001/acamgrupo04.jpg" alt="Acampamento" /><span><img src="fotos/acamgrupo2001/acamgrupo04.jpg" alt="Acampamento"/></span></a> 			</li>			<li><a href="#"><img src="fotos/acamgrupo2001/acamgrupo05.jpg" alt="Acampamento" /><span><img src="fotos/acamgrupo2001/acamgrupo05.jpg" alt="Acampamento"/></span></a>			</li>		</ol>

Scritp e CSS:

<style type="text/css">.galeria {	width:380px; 	margin:0 auto;	text-align:left; 	}ol.fotos {	position:relative;	list-style:none;  	width:162px;	padding:1px;	background:#999;	margin:0; 	padding:0; }.fotos:after {	display: block;	content: ".";	height: 0;	font-size:0; 	visibility: hidden;	clear: both;	}	ol.fotos li {				/* Onde as fotos pequenas ficam */	width:75px;	height:50px;	float:left; 	border:2px solid #444;	margin:1px; }ol.fotos li img {			 /* Fotos pequenas */	border:none; 	width:75px;	height:50px;}ol.fotos li span img { 		/* Fotos grandes que aparecem */	border:none;	width:400px;	height:auto;}ol.fotos a {	display: block;	} 	ol.fotos a span { 			/* Esconde as fotos grandes antes de aparecer */	display: none;}ol.fotos a:hover span { 	/* Faz as fotos grandes aparecerem */	display: block;    position: absolute; 	top:1px; 	 /* Posicionamento vertical das fotos que aparecem */	left: 177px; /* Posicionamento lateral das fotos que aparecem */	background:#fff;	border:2px solid #666;   }   ol.fotos a:hover span.legenda { 	padding:5px 0;	color:#333; }</style><!--[if lte IE 6]><style type="text/css">ol.fotos {	width:164px;	padding:  2px 0 1px 0;	}ol.fotos li {	margin-top:0; }/* Fixes for IE *//* Fix IE. Hide from IE Mac \*/ol.fotos li { float: left; height: 1%; }ol.fotos li a { height: 1%; }/* End */ol.fotos a:hover {	text-decoration:none;	background: none; 	} ol.fotos li {width:75px;}</style><![endif]--><script type="text/javascript" language="JavaScript">startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("menu1");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace	(" over", "");   }   }  } }}window.onload=startList;</script>

Boa noite

 

Tenho esse código aqui, que se eu não me engano eu achei aqui no fórum mesmo, que é interessante também.

 

Copia e ola ele inteiro:

 

<!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"><html>    <head>        <title>S l i d e S h o w - by tmferreira</title>        <style><!--            * {                margin: 0;                padding: 0;                list-style: none;                text-decoration: none;                font-family: Verdana, Arial, Helvetica, Sans-Serif;            }            div#slideshow {                height: 250px;                width: 500px;                border: 1px solid black;            }            div#slideshow #links {                float: right;                clear: both;                width: 10%;                text-align: center;            }            div#slideshow #links li {                font-size: 12px;                border-top: 1px solid white;                line-height: 49px;            }            div#slideshow #links li.inativo {                background: #EEEEEE;            }            div#slideshow #links li.ativo {                background: #D9D9D9;            }            div#slideshow #slides {                background: #BBBBBB;                height: 100%;                color: white;                font-size: 14px;            }            div#slideshow #slides .visible {                display: block;            }            div#slideshow #slides .hidden {                display: none;            }            div#slideshow #slides div span {                display: block;            }            div#slideshow #slides .titulo{                font-weight: bold;                font-size: 16px;                padding: 5px 0 0 5px;            }            div#slideshow #slides .conteudo {                padding: 0 0 0 5px;            }        --></style>        <script type="text/javascript">            var tempo;            var intervalo = 2000; //Intervalo entra as mudanças de slides. Definido em milisegundos.            function $(campo) {                return document.getElementById(campo);            }            //Trecho de código criado por Wilker, pego em [url="http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522"]http://forum.imasters.com.br/index.php?s=&...st&p=660522[/url]            var $A = Array.from = function(iterable) {                if (!iterable) return [];                if (iterable.toArray) {                    return iterable.toArray();                } else {                    var results = [];                    for (var i = 0; i < iterable.length; i++)                        results.push(iterable[i]);                    return results;                }            };            Function.prototype.bind = function() {                var __method = this, args = $A(arguments), object = args.shift();                return function() {                    return __method.apply(object, args.concat($A(arguments)));                };            };            //Fim do trecho de código criado por Wilker            function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em [url="http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html"]http://www.onlinetools.org/articles/unobtr...t/chapter4.html[/url]                if (typeof obj == "string") {                    if (null == (obj = document.getElementById(obj))) {                        throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");                    }                }                if (obj.attachEvent) {                    return obj.attachEvent(("on" + evType), fn);                } else if (obj.addEventListener) {                    return obj.addEventListener(evType, fn, true);                } else {                    throw new Error("Seu browser não suporta adição de eventos.");                }            }            function nextSlide() {                var divs = $('slides').getElementsByTagName('div');                var i;                for (i = 0; i < divs.length; i++) {                    if (divs[i].className == 'visible') {                        divs[i].className = 'hidden';                        $('link' + (i + 1)).className = 'inativo'                        i = (i == divs.length - 1) ? 0 : i + 1;                        divs[i].className = 'visible';                        $('link' + (i + 1)).className = 'ativo'                        break;                    }                }            }            function init() {                var as = $('links').getElementsByTagName('a');                var i;                for (i = 0; i < as.length; i++) {                    var f = function(v) {                        setSlide(as[v]);                    }                    addEvent(as[i], 'click', f.bind(this, i));                }                tempo = setInterval('nextSlide()', intervalo);            }            function setSlide(link) {                var divs = $('slides').getElementsByTagName('div');                var i;                for (i = 0; i < divs.length; i++) {                    divs[i].className = 'hidden';                }                var lis = $('links').getElementsByTagName('li');                for (i = 0; i < lis.length; i++) {                    lis[i].className = 'inativo';                }                link.parentNode.className = 'ativo';                i = parseInt(link.firstChild.data);                $('slide' + i).className = 'visible';                clearInterval(tempo);            }            addEvent(window, 'load', init);        </script>    </head>    <body>        <div id="slideshow" name="slideshow">            <div id="links" name="links">                <ul>                    <li id="link1" name="link1" class="ativo"><a href="#">1</a></li>                    <li id="link2" name="link2" class="inativo"><a href="#">2</a></li>                    <li id="link3" name="link3" class="inativo"><a href="#">3</a></li>                    <li id="link4" name="link4" class="inativo"><a href="#">4</a></li>                    <li id="link5" name="link5" class="inativo"><a href="#">5</a></li>                </ul>            </div>            <div id="slides" name="slides">                <div id="slide1" name="slide1" class="visible">                    <span class="titulo">Título 1</span>                    <span class="conteudo"><img src="logo.jpg" width="100px" height="100px" style="float:left; margin: 8px; margin-left: 0;" />Lorem ipsum dolor lorem ipsum dolor amet sit crustaceous, carpe diem est im corpus writ. Habeus corpus semper fidelus dolor amet lorem carpe diem est im corpus writ. Lorem ipsum dolor lorem ipsum dolor amet sit crustaceous, carpe diem est im corpus writ. Habeus corpus semper fidelus dolor amet lorem carpe diem est im corpus writ.                    <br />                    Lorem ipsum dolor lorem ipsum dolor amet sit crustaceous, carpe diem est im corpus writ. Habeus corpus semper fidelus dolor amet lorem carpe diem est im corpus writ. Lorem ipsum dolor lorem ipsum dolor amet sit crustaceous, carpe diem est im corpus writ.                    </span>                </div>                <div id="slide2" name="slide2" class="hidden">                    <span class="titulo">Título 2</span>                    <span class="conteudo"><img src="logo.jpg" width="100px" height="100px" style="float:left; margin: 8px; margin-left: 0;" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.                    </span>                </div>                <div id="slide3" name="slide3" class="hidden">                    <span class="titulo">Título 3</span>                    <span class="conteudo"><img src="logo.jpg" width="100px" height="100px" style="float:left; margin: 8px; margin-left: 0;" />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).                    </span>                </div>                <div id="slide4" name="slide4" class="hidden">                    <span class="titulo">Título 4</span>                    <span class="conteudo"><img src="logo.jpg" width="100px" height="100px" style="float:left; margin: 8px; margin-left: 0;" />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.                    </span>                </div>                <div id="slide5" name="slide5" class="hidden">                    <span class="titulo">Título 5</span>                    <span class="conteudo"><img src="logo.jpg" width="100px" height="100px" style="float:left; margin: 8px; margin-left: 0;" />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.                    </span>                </div>            </div>        </div>    </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito