Slideshow no meu fórum

[pedro2010]

Qual é minha questão:
Olá, gostaria do código do slideshow deste site aqui. Se alguem puder me arrumar agradeço.

O site é:
http://levelupgames.uol.com.br/perfectworld/
o slideshow se encontra no topo.

Medidas que eu tomei para corrigir o problema:
nenhuma

Imagens do meu problema:
nenhuma

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

Versão do meu fórum:
INVISION

[Oto!]

Olá amigo,

Exatamente eu no momento não possuo o código. Mais há 2 códigos paralelos:

Spoiler:

Spoiler:

Abraços!

[pedro2010]

Como faço para centralizar meu slideshow ?

http://maconariaguild.forumeiros.com/

Usei o 2º slide do 1º spoiler.


Tentei colocar o SlideShow em mensagem na página inicial, e no portal mas não conseguim fiz tudo o que pediu e deu errado, aparecia só as imagens uma em baixo da outra...

Então resolvi criar uma nova página html para ser o indice do fórum =[

[Konai]

Olá,

Para centralizar utilize no começo e no final este código:

Código:

<center> </center>

</center> No Final do código
<center> No Começo do código

[pedro2010]

Olá,

Para centralizar utilize no começo e no final este código:

Código:

<center> </center>

</center> No Final do código
<center> No Começo do código

já tentei mas não deu certo...
vou tentar novamente.

EDIT: não funcionou msm

[Konai]

Olá,

Poderia me passar o código do seu Slide? Tentarei ver o erro.

[pedro2010]

CSS:

Código:

.main_view {
  float: left;
  position: relative;
}
.window {
  height:370px;  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: -2px;
  width: 178px; height:47px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  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;}

SlideShow:

Código:

<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="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner1-1.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-2.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Bannaer3.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-4.jpg" 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>

[Konai]

Olá,

CSS Troque o seu por este:

Código:

.main_view {
  float: left;
  position: relative;
}
.window {
  height:370px;  width: 790px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
  position: center;
  bottom: 40px; right: -2px;
  width: 178px; height:47px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  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;}

SlideShow troque o seu por este:

Código:


<div style="text-align: center;"><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="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner1-1.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-2.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Bannaer3.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-4.jpg" 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>
</div>


Resulta?

[pedro2010]

Olá,

CSS Troque o seu por este:

Código:

.main_view {
  float: left;
  position: relative;
}
.window {
  height:370px;  width: 790px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
  position: center;
  bottom: 40px; right: -2px;
  width: 178px; height:47px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  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;}

SlideShow troque o seu por este:

Código:


<div style="text-align: center;"><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="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner1-1.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-2.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Bannaer3.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-4.jpg" 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>
</div>


Resulta?

não resultou

[Dury]

Olá,

Painel de controle ->> Módulos ->> HTML e Javascript ->> Gestão das páginas HTML ->> Criar uma página HTML ->>
Marque a opção "Você deseja utilizar o início e o final da página do seu fórum" e marque Não.
Cole o seguinte código:

Código:

<style>.main_view {
  float: left;
  position: relative;
}
.window {
  height:170px;  width: 690px;
  overflow: hidden;
  position: relative;
}
.image_reel {
  position: absolute;
  top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
  position: absolute;
  bottom: 40px; right: -2px;
  width: 178px; height:47px;
  z-index: 999; /*--Assures the paging stays on the top layer--*/
  text-align: right;
  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="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner1-1.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-2.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Bannaer3.jpg" alt="" /></a>
<a href="http://www.elitejogos.com/"><img src="http://i1177.photobucket.com/albums/x346/pedropianho/Banner-4.jpg" 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>

Painel de controle ->> Visualização ->> Página principal ->> Geral ->> Conteúdo da mensagem ->>
Cole este iframe:

<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="No" width="100%" height="100" style= " top: 0%; left: 0%;height: 50%;width: 100%;" src="ENDEREÇO_DA_PAGINA_HTML"></iframe>

Até mais!

[pedro2010]

Obrigado jeffrey