Aplicação de slides no fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Aplicação de slides no fórum

Mensagem por Gabriel Cutolo em 29/09/11, 02:03 pm

Qual é minha questão:
queria saber se alguem poderia me mandar o html desse slide:
http://www.sohtanaka.com/web-design/examples/image-slider

Endereço do meu fórum:
http://directdesign.forumeiros.com

Versão do meu fórum:
PHPBB3
avatar

Gabriel Cutolo
Nível 8

Masculino
Inscrito dia : 27/07/2011
Mensagens : 143
Pontos Ativos : 241

Ver perfil do usuário http://directdesign.forumeiros.com/

Resolvido Re: Aplicação de slides no fórum

Mensagem por Luciano98 em 29/09/11, 02:34 pm

Olá!

Aqui está:
Código:
<style>
.main_view {
   float: left;
   position: relative;
}
.window {
   height:286px;   width: 790px;
   overflow: hidden;
   position: relative;
}
.image_reel {
   position: absolute;
   top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
   position: absolute;
   bottom: 40px; right: -7px;
   width: 178px; height:47px;
   z-index: 100; /*--Assures the paging stays on the top layer--*/
   text-align: center;
   line-height: 40px;
   background: url(paging_bg2.png) no-repeat;
   display: none;
}
.paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
}
.paging a.active {
   font-weight: bold;
   background: #920000;
   border: 1px solid #610000;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}</style><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function() {

   $(".paging").show();
   $(".paging a:first").addClass("active");

   var imageWidth = $(".window").width();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;

   $(".image_reel").css({'width' : imageReelWidth});
   
   rotate = function(){   
      var triggerID = $active.attr("rel") - 1;
      var image_reelPosition = triggerID * imageWidth;

      $(".paging a").removeClass('active');
      $active.addClass('active');

      $(".image_reel").animate({
         left: -image_reelPosition
      }, 500 );
      
   };
   
   rotateSwitch = function(){      
      play = setInterval(function(){
         $active = $('.paging a.active').next();
         if ( $active.length === 0) {
            $active = $('.paging a:first');
         }
         rotate();
      }, 7000);
   };
   
   rotateSwitch();

   $(".image_reel a").hover(function() {
      clearInterval(play);
   }, function() {
      rotateSwitch();
   });   
   
   //On Click
   $(".paging a").click(function() {   
      $active = $(this);

      clearInterval(play);
      rotate();
      rotateSwitch();
      return false;
   });   
   
});
</script><div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="LINK1"><img src="IMAGEM1" alt="" /></a>
            <a href="LINK2"><img src="IMAGEM2" alt="" /></a>
            <a href="LINK3"><img src="IMAGEM3" alt="" /></a>
            <a href="LINK4"><img src="IMAGEM4" alt="" /></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>
    </div>
</div>
LINK1,LINK2,LINK3,LINK4 = Links que o usuário irá ao clicar na imagem.
IMAGEM1,IMAGEM2,IMAGEM3,IMAGEM4 = Link das imagens na mesma ordem dos links acima.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Aplicação de slides no fórum

Mensagem por Gabriel Cutolo em 29/09/11, 03:35 pm

avatar

Gabriel Cutolo
Nível 8

Masculino
Inscrito dia : 27/07/2011
Mensagens : 143
Pontos Ativos : 241

Ver perfil do usuário http://directdesign.forumeiros.com/

Resolvido Re: Aplicação de slides no fórum

Mensagem por Luciano98 em 01/10/11, 04:49 pm

Olá!

Painel de Controle Seta Módulos Seta Gestão das páginas HTML

Clique em "Criar uma nova página HTML".

Título Seta Escolha o título que quiser
Você deseja utilizar o início e o final da página do seu fórum ? Seta Não
Usar esta página como página inicial? Seta Não

Código HTML:
Código:
<style>
.main_view {
   float: left;
   position: relative;
}
.window {
   height:286px;   width: 790px;
   overflow: hidden;
   position: relative;
}
.image_reel {
   position: absolute;
   top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
   position: absolute;
   bottom: 40px; right: -7px;
   width: 178px; height:47px;
   z-index: 100; /*--Assures the paging stays on the top layer--*/
   text-align: center;
   line-height: 40px;
   background: url(paging_bg2.png) no-repeat;
   display: none;
}
.paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
}
.paging a.active {
   font-weight: bold;
   background: #920000;
   border: 1px solid #610000;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}</style><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>$(document).ready(function() {

   $(".paging").show();
   $(".paging a:first").addClass("active");

   var imageWidth = $(".window").width();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;

   $(".image_reel").css({'width' : imageReelWidth});
   
   rotate = function(){   
      var triggerID = $active.attr("rel") - 1;
      var image_reelPosition = triggerID * imageWidth;

      $(".paging a").removeClass('active');
      $active.addClass('active');

      $(".image_reel").animate({
         left: -image_reelPosition
      }, 500 );
      
   };
   
   rotateSwitch = function(){      
      play = setInterval(function(){
         $active = $('.paging a.active').next();
         if ( $active.length === 0) {
            $active = $('.paging a:first');
         }
         rotate();
      }, 7000);
   };
   
   rotateSwitch();

   $(".image_reel a").hover(function() {
      clearInterval(play);
   }, function() {
      rotateSwitch();
   });   
   
   //On Click
   $(".paging a").click(function() {   
      $active = $(this);

      clearInterval(play);
      rotate();
      rotateSwitch();
      return false;
   });   
   
});
</script><div class="main_view" style="position:absolute;top:0px;left:0px">
    <div class="window">
        <div class="image_reel">
            <a href="LINK1"><img src="IMAGEM1" alt="" /></a>
            <a href="LINK2"><img src="IMAGEM2" alt="" /></a>
            <a href="LINK3"><img src="IMAGEM3" alt="" /></a>
            <a href="LINK4"><img src="IMAGEM4" alt="" /></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>
    </div>
</div>
LINK1,LINK2,LINK3,LINK4 = Links que o usuário irá ao clicar na imagem.
IMAGEM1,IMAGEM2,IMAGEM3,IMAGEM4 = Link das imagens na mesma ordem dos links acima.

Clique em "Confirmar" e guarde o link da página HTML criada.

Agora vá no lugar do fórum que você quer colocar esse slide e utilize esse código:
Código:
<iframe src="LINK" border=0 frameborder=no width=790 height=286 scrolling=no></iframe>
LINK = Link da página HTML que foi criada.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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