Você não está conectado. Conecte-se ou registre-se

Trio Slide JQuery

Oque Acharam?

75% 75% [ 3 ]
25% 25% [ 1 ]
Total dos votos : 4

Ir em baixo  Mensagem [Página 1 de 1]

1 Trio Slide JQuery em Qua Nov 30, 2011 2:11 pm

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2

Bom galera este slide é muito usado em Headline e algumas pessoas me pediram pra posta-lo.
Vá em "Design - Editar HTML" e procure por


</head>




Acima dele adicione o seguinte código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://portalanimeex.webs.com/jquery_cyrcle_plugin.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;

$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.css("background-color","#000000");

$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);

function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}

$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});

var auto_number;
var interval;

$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});


interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);

});
//]]>
</script>


<script type='text/javascript'>
jQuery(function(){
jQuery(&#39;#s1&#39;).cycle({
timeout: 0,
speed: 1000,
fx: &#39;fade&#39;
});

});
</script>




Agora salve.
Depois de salvar procure por


]]></b:skin>




Acima dele adicione o seguinte código:


/*-----------------Trio Destaque Slide--------------*/

/* container geral do slide */
#gallery {
width:616px; /* largura do container */
height:320px; /* altura do container */
margin:0 0 20px 0;
float:left;
display:inline;
}

/* area do slide */
#featured-area {
height: 300px; /* altura deve ser um pouco menor que o container geral */
position: relative;
padding: 11px 0px 10px 0px; /* distancia entre coluna maior com a coluna menor */
z-index: 1;
width:616px; /* largura deve ser a mesma que o container geral */
}
/* area da imagem do slide */
#featured-area .pics {
position: absolute;
width: 490px; /* largura da imagem */
height: 294px; /* altura da imagem */
top: 11px;
left: 14px;
}
/* area dos titulos e descrição do slide */
#featured-area .pics div.excerpt {
background: #fff; /* cor de fundo da faixa onde fica titulo e descrição */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* largura da area onde ficam os titulos e descrição do slide */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%; /* IE */
}
/* area do texto da descrição */
#featured-area .pics div.excerpt p {
color: #203136; /* cor do texto */
width:450px; /* largura do container do titulo e texto da descrição */
}
/* area do link dos titulos */
#featured-area .pics div.excerpt a {
font-size:18px; /* tamanho da fonte do titulo */
color: #000; /* cor do link do titulo */
font-weight:bold; /* link em negrito */

}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* cor do link do titulo no estado hover */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:10px; /* fonte do texto da descrição */
width:450px; /* largura do container do texto da descrição */
padding:0px 0 10px 0;
}

#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* deve ter a mesma largura da imagem do slide */
height:294px; /* deve ter a mesma altura da imagem do slide */
z-index: 1;
}

/* container geral onde ficam as miniaturas */
#featured-area div#slider-control {
position: absolute;
width: 110px; /* largura */
height: 296px; /* altura */
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}
/* area de cada bloco de miniatura */
#featured-area div#slider-control div.featitem {
background: url(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMjMPRS6OEI/AAAAAAAAAHA/0jaTOH8SmLA/s000/featitem-bg.png) no-repeat top left; /* imagem de fundo de cada item da coluna */
height: 77px; /* altura */
float: left;
width: 76px; /* largura */
padding: 10px 16px 12px 18px;
cursor: pointer;
}
/* imagem minitura */
#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6; /* edite borda */
margin-top: 5px;
width:67px; /* largura da imagem miniatura */
height:67px; /* altura da imagem miniatura */
}

/* item da minitura ativa */
#featured-area div#slider-control div.featitem.active {
background: url(http://1.bp.blogspot.com/_JUg9QsmKp5s/TMjMPuqc_tI/AAAAAAAAAHE/qTdsztJN5EU/s000/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {
display:none;
}
#featured-area div#slider-control div.featitem.active span.meta {
border: 0px;
}
#featured-area div#slider-control div.featitem span.order {
display: none;
}
#featured-area div#slider-control div.featitem span.meta {
display:none;
}




Salve.
Agora procure por


<div id='main-wrapper'>




e, acime dele, adicione o seguinte código:


<div id='gallery'>

<div id='featured-area'>
<div class='pics' id='s1'>

<!-- PRIMEIRO SLIDE INICIO -->
<div>
<img src='
URL-DA-IMAGEM-1' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='
SEU LINK AQUI'>Titulo do Slide 1</a></p>
<p class='excerpt-text'>
Coloque uma pequena descrição do slide 1 aqui.Coloque uma pequena descrição do slide 1 aqui...</p>
</div>
<a href='
SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- PRIMEIRO SLIDE FIM -->

<!-- SEGUNDO SLIDE INICIO -->
<div>
<img src='
URL-DA-IMAGEM-2' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='
SEU LINK AQUI'>Titulo do Slide 2</a></p>
<p class='excerpt-text'>
Coloque uma pequena descrição do slide 2 aqui. Coloque uma pequena descrição do slide 2 aqui...</p>
</div>
<a href='
SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- SEGUNDO SLIDE FIM -->


<!-- TERCEIRO SLIDE INICIO -->
<div>
<img src='
URL-DA-IMAGEM-3' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='
SEU LINK AQUI'>Titulo do Slide 3</a></p>
<p class='excerpt-text'>
Coloque uma pequena descrição do slide 3 aqui. Coloque uma pequena descrição do slide3 aqui...</p>
</div>
<a href='
SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- TERCEIRO SLIDE FIM -->

</div>

<div id='slider-control'>

<!-- IMAGEM MINIATURA 1 -->
<div class='featitem active'>
<img src='
URL-DA-IMAGEM-MINIATURA-1' style='width: 67px; height: 67px;'/>
<span class='order'>1</span></div>

<!-- IMAGEM MINIATURA 2 -->
<div class='featitem '>
<img src='
URL-DA-IMAGEM-MINIATURA-2' style='width: 67px; height: 67px;'/>
<span class='order'>2</span></div>

<!-- IMAGEM MINIATURA 3 -->
<div class='featitem '>
<img src='
URL-DA-IMAGEM-MINIATURA-3' style='width: 67px; height: 67px;'/>
<span class='order'>3</span></div>


</div><!-- end slider-control div -->
<div class='clear'/>
</div><!-- end featured area -->
</div><!-- end gallery -->




Qualquer dúvida ou erro é só deixar um comentário.

Ver perfil do usuário

2 Re: Trio Slide JQuery em Qua Nov 30, 2011 2:18 pm

gin

avatar
Membro Nível 4
Membro Nível 4
Boa Sensei Assim que Eu Gosto Very Happy

Ver perfil do usuário http://scanlines.com.br

3 Re: Trio Slide JQuery em Qua Nov 30, 2011 2:20 pm

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2
HAHAHA

Ver perfil do usuário

4 Re: Trio Slide JQuery em Qua Nov 30, 2011 2:27 pm

gin

avatar
Membro Nível 4
Membro Nível 4
kkkkkkkk As Vezes eu tentava procura esse codigo so que dava um Fail Very Happy

Ver perfil do usuário http://scanlines.com.br

5 Re: Trio Slide JQuery em Qua Nov 30, 2011 2:30 pm

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2
KK

Ver perfil do usuário

6 Re: Trio Slide JQuery em Qua Nov 30, 2011 3:17 pm

DORITOS

avatar
Membro Nível 1
Membro Nível 1
Parabens Danilo Feiozo kk Neutral

Ver perfil do usuário http://animes-blacks.net

7 Re: Trio Slide JQuery em Qua Nov 30, 2011 3:20 pm

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2
Valeu Emanuel Fedido ;D

Chego Né kk'

Ver perfil do usuário

8 Re: Trio Slide JQuery em Qua Nov 30, 2011 3:32 pm

p3dro

avatar
Membro Nível 3
Membro Nível 3
Nossa mano aqui no forum ta um tal de apelidos kkkkkk

Ver perfil do usuário

9 Re: Trio Slide JQuery em Qua Nov 30, 2011 3:38 pm

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2
kkkk

Ver perfil do usuário

10 Re: Trio Slide JQuery em Qua Nov 30, 2011 7:51 pm

gin

avatar
Membro Nível 4
Membro Nível 4
nossa kkkk SENSEI E EMANUEL KKKK

Ver perfil do usuário http://scanlines.com.br

11 Re: Trio Slide JQuery em Qua Nov 30, 2011 7:53 pm

p3dro

avatar
Membro Nível 3
Membro Nível 3
Todo mundo ja tem apelido ( pfv n quero o meu)

Ver perfil do usuário

12 Re: Trio Slide JQuery em Qua Nov 30, 2011 11:20 pm

Flashman

avatar
Moderador
Moderador
Aff muito flood,assim num da ta parecendo chat '-',mais valeu por postar ai cara,tenta diminuir o flood se der


_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
Vamos Ajudar a Anime designer!Se Cadastrem!
Ver perfil do usuário http://animesrevo.blogspot.com/

13 Re: Trio Slide JQuery em Qui Dez 01, 2011 8:25 am

Zaraki Kenpachi

avatar
Membro Nível 2
Membro Nível 2
Ta Maulz Ae Flash..

Ver perfil do usuário

14 Re: Trio Slide JQuery em Qui Dez 01, 2011 5:21 pm

ajudou um poquinho +_+

Ver perfil do usuário

15 Re: Trio Slide JQuery em Seg Dez 05, 2011 3:55 pm

lelêeh

avatar
Novato
Novato
Show de bola , continue assim manolo'

Ver perfil do usuário

16 Re: Trio Slide JQuery em Seg Dez 05, 2011 4:03 pm

grimmblack

avatar
Membro Nível 1
Membro Nível 1
Brigado!

Ver perfil do usuário

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

 

Forumeiros.com | © PunBB | Fórum grátis de ajuda | Fale conosco | Assinalar uma queixa | Criar um fórum