Tweet Slideshow deslizante - Galeria de Imagens

Um slideshow com imagens deslizantes é ótimo para divulgar seus trabalhos ou posts em destaque; também pode ser bastante útil para quem oferece produtos tipo: artesanato, pintura, decoração, fotos, etc...Visitando o site Zona Cerebral, encontrei esse modelo super prático que compartilho com vocês. Agradeço muitíssimo ao Iván por compartilhar.



Clic na imagem








Modelo com 981px de largura para blogs com fundo branco.

Como inserir:

Antes de qualquer modificação em seu layout, faça um backup (cópia) clicando em "Baixar modelo completo" para evitar que perca tudo em caso de algum erro ou acidente.

Em sua página HTML, procure o trecho </head> e cole antes dele todo o código abaixo:

<script src='http://dl.dropbox.com/u/684300/Mama.jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/684300/mama.slider.js' type='text/javascript'/>

<style type='text/css'>

<style type='text/css'>

/*---------------Slideshow --------------------*/

#slideshow { width: 981px;
background: #fff;
height:150px;
}
#slider {
width: 800px;
height:131px;
margin: 0 90px 0 90px;
position: relative;
border: 10px solid #ccc;
}

.scroll { overflow: hidden;
width: 800px;
height:131px;
margin: 0 auto;
position: relative;
}
.scrollContainer {
position: relative;
height: 131px;
}
.scrollContainer div.panel {
width: 900px;
height: 131px;
}

#left-shadow { position: absolute;
top: 0; left: 0;
width: 12px;
bottom: 0;
background: url(http://img511.imageshack.us/img511/7043/leftshadow.png) repeat-y; height:139px;
}

#right-shadow {
position: absolute;
top: 0; right: 0;
width: 12px;
bottom: 0;
background: url(http://img511.imageshack.us/img511/8940/rightshadow.png) repeat-y; height:139px;
}

.scrollButtons {
position: absolute;
top: 127px;
cursor: pointer;
}
.scrollButtons.left {
left: -45px; top:37px;
}
.scrollButtons.right {
left: 800px;
top:37px;
}

.hide {
display: none;
}



/*--------- Galería -----------*/


.gallery { list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
float:left;
height:109px;
margin:0px;
padding:10px;
position:relative;
width:160px;
}
.gallery li:hover img {
border-color:#000000;
}

.gallery img {
background: #fff;
border:1px solid #888;
padding:5px;
}
.gallery em {
background:#fff url(http://img511.imageshack.us/img511/82/greygradient.gif) repeat-y; color:#000;
font-style:normal;
padding:2px 10px;
display:block;
position: absolute;
left:9px; top:89px;
border: 1px solid #999;
border-left-color: #888;
}
.gallery a { text-decoration:none;
}
.gallery a:hover em {
background:#ffdb01 url(http://img511.imageshack.us/img511/9003/orangegradient.gif) repeat-y; border-color: #c25b08;
}



</style>

Salve o template.
Clic em "Expandir modelo de widgets", procure pelo seguinte trecho:

<div id='content-wrapper'>

Cole abaixo dele o seguinte código:

<div id="slideshow">
<div id="slider">

<img class="scrollButtons left" src="http://img91.imageshack.us/img91/7493/leftarrowv.png" />

<div style="overflow: hidden;" class="scroll">

<div class="scrollContainer">

<div class="panel" id="panel_1">
<div class="inside">
<ul class="gallery">
<li><a href="endereçodolink"><em>Titulo 1</em><img src="http://endereçodaimagem" alt="Imagen 1" /></a></li>
<li><a href="endereçodolink"><em>Titulo 2</em><img src="http://endereçodaimagem" alt="Imagen 2" /></a></li>
<li><a href="endereçodolink"><em>Titulo 3</em><img src="http://endereçodaimagem" alt="Imagen 3" /></a></li>
<li><a href="endereçodolink"><em>Titulo 4</em><img src="http://endereçodaimagem" alt="Imagen 4" /></a></li>
</ul>

</div>
</div>

<div class="panel" id="panel_2">
<div class="inside">
<ul class="gallery">
<li><a href="endereçodolink"><em>Titulo 5</em><img src="http://endereçodaimagem" alt="Imagen 5" /></a></li>
<li><a href="endereçodolink"><em>Titulo 6</em><img src="http://endereçodaimagem" alt="Imagen 6" /></a></li>
<li><a href="endereçodolink"><em>Titulo 7</em><img src="http://endereçodaimagem" alt="Imagen 7" /></a></li>
<li><a href="endereçodolink"><em>Titulo 8</em><img src="http://endereçodaimagem" alt="Imagen 8" /></a></li>
</ul>

</div>
</div>

</div>

<div id="left-shadow"></div>
<div id="right-shadow"></div>

</div>

<img class="scrollButtons right" src="http://img91.imageshack.us/img91/7069/rightarrowy.png" />

</div>
</div>

Se quiser mais uma seção de imagens é só acrescentar outro bloco mudando a numeração veja exemplo abaixo::

<div class="panel" id="panel_3">
<div class="inside">
<ul class="gallery">
<li><a href="endereçodolink"><em>Titulo 9</em><img src="http://endereçodaimagem" alt="Imagen 9" /></a></li>
<li><a href="endereçodolink"><em>Titulo 10</em><img src="http://endereçodaimagem" alt="Imagen 10" /></a></li>
<li><a href="endereçodolink"><em>Titulo 11</em><img src="http://endereçodaimagem" alt="Imagen 11" /></a></li>
<li><a href="endereçodolink"><em>Titulo 12</em><img src="http://endereçodaimagem" alt="Imagen 12" /></a></li>
</ul>

</div>
</div>

IMPORTANTE: As imagens deverão ter 150px de largura por 99px de altura para que apareçam sem problemas.


Obs.: Você pode personalizar o modelo de acordo com seu layout bastando para isso, algum conhecimento de CSS/HTML e bastante paciencia...


Dicas:

• Faça download do script e imagens originais aquí e guarde em seu arquivo .
• Visite o site Zona Cerebral para ver o tutorial completo em espanhol. Use o Google Tradutor.