Galeria de Imagens Deslizantes

Descrição: Aprenda a botar uma galeria deslizante, para poder destacar suas postagens

Nossa Avaliação Do Conteúdo:

Screen:

1. Entre na página de editar HTML e em cima de </head> cole o código

<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>
</style>

Salve o modelo!

2. Depois clique em "Expandir modelos de widgets" e cole o código  abaixo depois de  
<div id='content-wrapper'>:

<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>

3. Visualize e seu deu tudo certo salve. Bom proveito XD