Muryllo Dantas: Slide Acordion

Estamos aqui com mais um modelo de slide show, desta vez com um pouco mais de complexidade, vamos ao que interessa:

Demo

1.Copie o código e cole no HTML/Javascript, faça as modificações necessárias e salve.

2. Coloque o seguinte código no local indicado nesta imagem ao lado direito:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010.

<textarea onfocus="this.select()" onmouseover="this.focus()"></textarea onfocus="this.select()"> 
<div id="slidearea"> 
 
<ul class="kwicks"> 
<li class="kwik"> 
 
<a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"></a><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"> 
<img alt="" class="slidimg" src="ENDEREÇO DA IMAGEM 1" style="height: 250px; width: 620px;" /> 
</a> 
 
<div class="kwikmet rounded"> 
 
<h2><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#" rel="bookmark" title="">TÍTULO 1</a></h2> 
ESCREVA ALGO SOBRE A IMAGEM 1 
</div> 
</li>
 
<li class="kwik"> 
<a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"></a><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"> 
<img alt="" class="slidimg" src="ENDEREÇO DA IMAGEM 2" style="height: 250px; width: 620px;" /> 
</a> 
 
<div class="kwikmet rounded"> 
 
<h2><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#" rel="bookmark" title="">TÍTULO 2</a></h2> 
ESCREVA ALGO SOBRE A IMAGEM 2 
</div> 
</li>
 
<li class="kwik"> 
<a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"></a><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"> 
<img alt="" class="slidimg" src="ENDEREÇO DA IMAGEM 3" style="height: 250px; width: 620px;" /> 
</a> 
 
<div class="kwikmet rounded"> 
 
<h2><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#" rel="bookmark" title="">TÍTULO  3</a></h2> 
ESCREVA ALGO SOBRE A IMAGEM 3 
</div> 
</li>
 
<li class="kwik"> 
<a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"></a><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#"> 
<img alt="" class="slidimg" src="ENDEREÇO DA IMAGEM 4" style="height: 250px; width: 620px;" /> 
</a> 
 
<div class="kwikmet rounded"> 
 
<h2><a href="http://draft.blogger.com/post-create.g?blogID=2150725563703920735#" rel="bookmark" title="">TÍTULO  4</a></h2> 
ESCREVA ALGO SOBRE A IMAGEM 4 
</div> 
</li>
 </ul> 
<div class="clear"> 
</div></div> 
 
<style>


/*Slide-------------------------------------------------------*/
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:550px;
background:#eee;
border:5px solid #fff;
margin:20px 0px 20px 10px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 156px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:#808080;
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
padding:10px;
width:620px;
color:#000;
}
.kwikmet h2 a{
color:#000;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
border-left: 10px solid #808080;
width:620px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

</style> 
 
 
 
 
 
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript">
</script> 
<script type="text/javascript">
<![CDATA[//><!]]>
</script> 
<script type="text/javascript">
<![CDATA[//><!]]>
</script> 
<script type="text/javascript">
<![CDATA[//><!]]>
</script> 
<script type="text/javascript">
<![CDATA[//><!]]>
</script> 
<script type="text/javascript">

jQuery().ready(function() {
jQuery('.kwicks').kwicks({
 max: 620,
       duration: 1000
 });
 
jQuery(".kwik").hoverIntent(function() {
 jQuery(this).children(".kwikmet").fadeIn("slow") ;
 }, function() {
 jQuery(this).children(".kwikmet").fadeOut("3000");
 });
});

</script>

Slide Acordion

Nenhum comentário:

Postar um comentário

Link para compartilhamento