Shadi

04/09/2011

muitas pessoas vem me perguntando, como poe o slide qe está debaixo do xat?, bom e simples e eu mesmo vo ensinar, mais tarde ponho em video aula, vamos lah:

Procure por essa linha
</head>

copie o codigo e põe encima dela

<!-- JavaScript Slider Horizontal - Inicio--><br /> <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 $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //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 $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").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><br /> <!-- JavaScript Slider Horizonta - Fim-->

Procure a linha:
]]></b:skin>

Acima da linha de cima adicione esse codigo abaixo:

/*--Container geral--*/<br /> .main_view {<br /> float: left;<br /> position: relative;<br /> }<br /> /*--Estilos do containert das imagens--*/<br /> .window {<br /> height:289px; /*-- as imagens devem ter a mesma altura ou mais-- */<br /> width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */<br /> border:1px solid #610000;<br /> overflow: hidden;<br /> position: relative;<br /> }.image_reel {<br /> position: absolute;<br /> top: 0; left: 0;<br /> }<br /> .image_reel img {<br /> float: left;<br /> }<br /> /*--Estilos do container da numeração--*/<br /> .paging {<br /> position: absolute;<br /> bottom: 40px;<br /> right: -1px;<br /> width: 220px;<br /> height:41px;<br /> z-index: 100;<br /> text-align: center;<br /> line-height: 40px;<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdlovpVg-Mx7FgMqQy_rZEorHvL1WqYVB3d5gRexloN3yPCYHcQmIVJ9fjl2NTYC4xDjOF6VMxwHBAzn9K2q7dxZ_vPs1FjLpRphGmuE034PAultLiZjIKAJG6joerqP9570ykgksRTuP/s0/transparencia.png);<br /> -moz-border-radius-topleft: 15px;<br /> -moz-border-radius-bottomleft: 15px;<br /> -webkit-border-radius-bottomleft: 15px;<br /> -webkit-border-radius-topleft: 15px;<br /> border:1px solid #000;<br /> display: none;<br /> }<br /> /*--Estilos do link da numeração--*/<br /> .paging a {<br /> outline:none;<br /> padding: 5px 10px;<br /> text-decoration: none;<br /> color: #999;<br /> background: #000;border: 1px solid #000;<br /> -moz-border-radius: 17px;<br /> -khtml-border-radius: 17px;<br /> -webkit-border-radius: 17px;<br /> }<br /> /*--Estilos do link ativo da numeração--*/<br /> .paging a.active {<br /> font-weight: bold;<br /> border: 1px solid #000;<br /> color: #fff;<br /> background: #920000;<br /> -moz-border-radius: 17px;<br /> -khtml-border-radius: 17px;<br /> -webkit-border-radius: 17px;<br /> }<br /> /*--Estilos do link hover da numeração--*/<br /> .paging a:hover {<br /> font-weight: bold;<br /> }

Agora é so criar um html/javascript, add esse codigo e pronto

<div class="main_view"><div class="window"><div class="image_reel"><img src="url-imagem-1" alt="" /><br /> <img src="url-imagem-2" alt="" /><br /> <img src="url-imagem-3" alt="" /><br /> <img src="url-imagem-4" alt="" /><br /> </div></div><div class="paging"><a href="insira-seu-link-1" rel="1">1</a><br /> <a href="insira-seu-link-2" rel="2">2</a><br /> <a href="insira-seu-link-3" rel="3">3</a><br /> <a href="insira-seu-link-4" rel="4">4</a><br /> </div></div>

Dica: As imgs tem que ser da largura exata, blz. já o tamanho, se poe oq quiser, mais lembrese de trocar, Wight e largura, height e altura, e o codigo pra achar isso é:

.window