terça-feira, 10 de maio de 2011

Slide com menu em formas de numeros

Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.


Bom, Vamos Começar:


Faça o Login -> Editar Html -> Procure Por ]]></b:skin> 


Antes de ]]></b:skin> Cole o Código Abaixo:



/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px;  /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:  url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}
Os Numeros que Estão em Vermelho Define o Tamanho do Slide
Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.



Agora Logo depois de ]]></b:skin>  Cole o Seguinte Código:


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

<script type='text/javascript'>
$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(&quot;.paging&quot;).show();
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
    
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
 
    //Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
 
    //Paging + Slider Function
    rotate = function(){ 
        var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
        $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
     
        //Slider Animation
        $(&quot;.image_reel&quot;).animate({
            left: -image_reelPosition
        }, 500 );
     
    };
 
    //Rotation + Timing Event
    rotateSwitch = function(){     
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $(&#39;.paging a.active&#39;).next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $(&#39;.paging a:first&#39;); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
 
    rotateSwitch(); //Run function on launch
 
    //On Hover
    $(&quot;.image_reel a&quot;).hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    }); 
 
    //On Click
    $(&quot;.paging a&quot;).click(function() { 
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    }); 
 
});
</script>
Agora Procure Por  <div id='content-wrapper'>
E cole o próximo código abaixo dele, fazendo as modificações necessárias.


<div id='slide'>
<div class='folio_block'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='AQUI O ENDEREÇO DO LINK 1'><img width="980px"  src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 2'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 3'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 4'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 5'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 6'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 7'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/></a>
<a href='AQUI O ENDEREÇO DO LINK 8'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 9'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 10'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" /></a>

</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
<a href='#' rel='6'>6</a>
<a href='#' rel='7'>7</a>
<a href='#' rel='8'>8</a>
<a href='#' rel='9'>9</a>
<a href='#' rel='10'>10</a>
</div>
</div>

</div>
</div>
Os Números em Vermelho São o Tamanho Das Imagens.


Você Também Pode Adicionar o último código no gadget   "Html/Javascript".

Vlw Galera e Até a Próxima. 
Assine o feed deste blog ou receba todos os artigos por email.

1 Comentário:

Center Games Premium disse...

Não está presente a tag div id='content-wrapper'
em meu Editor Html.

Postar um comentário

  ©Roox Blogger - Todos os direitos reservados.

Template by Equipe Thauros | Topo