Aplicação de slides no fórum

[Gabriel Cutolo]

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

[Luciano98]

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.

[Gabriel Cutolo]

não foi
http://directdesign.forumeiros.com/forum

[Luciano98]

Olá!

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

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

Título Escolha o título que quiser
Você deseja utilizar o início e o final da página do seu fórum ? Não
Usar esta página como página inicial? 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.