Um slideshow em jquery e iframe

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

Resolvido Um slideshow em jquery e iframe

Mensagem por NIKESLB em 27/08/11, 07:17 pm

Qual é minha questão:
Olá, pretendo fazer um slideshow em jquery e colocar por baixo dar barra de navegação. Ou seja, vou ter que utilizar o iframe para o implementar neste local.
Criei a página JS e pus para aplicar a todas as páginas, também criei o HTML retirando a opção: "Você deseja utilizar o início e o final da página do seu fórum ?".

O problema é que ao retirar a opção já não tenho o jquery, então tentei colocar o jquery externo: script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js no head da página html em questão. Mas parece não querer aceitar esse pedaço de cod, não dá nem para visualizar nem gravar.

Como resolver o problema?

Endereço do meu fórum:
http://ffkingdom.4umer.net

Versão do meu fórum:
PUNBB


Última edição por NIKESLB em 28/08/11, 06:48 pm, editado 1 vez(es)
avatar

NIKESLB
Nível 8

Masculino
Inscrito dia : 02/07/2008
Mensagens : 111
Pontos Ativos : 148

Ver perfil do usuário http://ffkingdom.4umer.net/

Resolvido Re: Um slideshow em jquery e iframe

Mensagem por Luciano98 em 27/08/11, 08:40 pm

Olá!

Substitua por esse código:
Código:
document.write('<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>');

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: Um slideshow em jquery e iframe

Mensagem por NIKESLB em 28/08/11, 09:50 am

nada ainda.

Tenho algum código na css que faz parte desse slide. A página HTML é esta:
http://ffkingdom.4umer.net/h3-lol (página independente do forum)

O resultado deveria ficar assim:
http://ffkingdom.4umer.net/h4-test (página depende do forum)

O código da página é este:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ffkingdom.4umer.net/10117.js"></script>

</head>
<body>

<div class="rotator">
  <ul>
    <li class="show"><a href="#link1"><img src="http://farm3.static.flickr.com/2546/4014001088_af37e74e1c.jpg" width="500" height="313"  alt="pic1" /></a></li>
    <li><a href="#link2"><img src="http://amicie.a.m.pic.centerblog.net/06539757.jpg" width="500" height="313"  alt="pic2" /></a></li>
    <li><a href="#link3"><img src="http://spd.fotolog.com/photo/13/41/95/x_vaniiiha_gb/1259178239677_f.jpg" width="500" height="313"  alt="pic3" /></a></li>
    <li><a href="#link4"><img src="http://gamersmafia.com/storage/users_files/28/28882/verano1.jpg" width="500" height="313"  alt="pic4" /></a></li>
  </ul>
</div>

</body>
</html>
Resumindo, tem as tags de abrir e fechar uma página, o conteúdo do slideshow com 4 imagens. E no head acrescentei
Código:
<script src="http://ffkingdom.4umer.net/10117.js"></script>

E na página JS tem esse código:
Código:
document.write('<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>');

function theRotator() {
  //Set the opacity of all images to 0
  $('div.rotator ul li').css({opacity: 0.0});
 
  //Get the first image and display it (gets set to full opacity)
  $('div.rotator ul li:first').css({opacity: 1.0});
     
  //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
 
  setInterval('rotate()',6000);
 
}

function rotate() { 
  //Get the first image
  var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

  //Get next image, when it reaches the end, rotate it back to the first image
  var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
 
  //Un-comment the 3 lines below to get the images in random order
 
  //var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );
       

  //Set the fade in effect for the next image, the show class has higher z-index
  next.css({opacity: 0.0})
  .addClass('show')
  .animate({opacity: 1.0}, 1000);

  //Hide the current image
  current.animate({opacity: 0.0}, 1000)
  .removeClass('show');
 
};



$(document).ready(function() {     
  //Load the slideshow
  theRotator();
  $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

incluindo o que disse com:
Código:
document.write('<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>');

Mesmo assim parece não querer pegar o js incluindo o JQuery :S
avatar

NIKESLB
Nível 8

Masculino
Inscrito dia : 02/07/2008
Mensagens : 111
Pontos Ativos : 148

Ver perfil do usuário http://ffkingdom.4umer.net/

Resolvido Re: Um slideshow em jquery e iframe

Mensagem por Luciano98 em 28/08/11, 04:08 pm

Olá!

Retire o script que eu lhe mandei anteriormente da página Javascript.

Substitua esse código pelo da página independente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ffkingdom.4umer.net/10117.js"></script>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>

</head>
<body>

<div class="rotator">
  <ul>
    <li class="show"><a href="#link1"><img src="http://farm3.static.flickr.com/2546/4014001088_af37e74e1c.jpg" width="500" height="313"  alt="pic1" /></a></li>
    <li><a href="#link2"><img src="http://amicie.a.m.pic.centerblog.net/06539757.jpg" width="500" height="313"  alt="pic2" /></a></li>
    <li><a href="#link3"><img src="http://spd.fotolog.com/photo/13/41/95/x_vaniiiha_gb/1259178239677_f.jpg" width="500" height="313"  alt="pic3" /></a></li>
    <li><a href="#link4"><img src="http://gamersmafia.com/storage/users_files/28/28882/verano1.jpg" width="500" height="313"  alt="pic4" /></a></li>
  </ul>
</div>

</body>
</html>

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: Um slideshow em jquery e iframe

Mensagem por NIKESLB em 28/08/11, 05:31 pm

bem tou um pouco confuso. Como a página está independente, esqueci-me que não pegava a css do forum, então acrescentei.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ffkingdom.4umer.net/10047.js"></script>
<script src="http://ffkingdom.4umer.net/11436.js"></script>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>


<style type="text/css">

/* rotator in-page placement */
    div.rotator {
  position:relative;
  height:345px;
  margin-left: 15px;
  display:none;
}

/* rotator css */
  div.rotator ul li {
  float:left;
  position:absolute;
  list-style: none;
}
/* rotator image style */ 
  div.rotator ul li img {
  border:1px solid #ccc;
  padding: 4px;
  background: #FFF;
}
    div.rotator ul li.show {
  z-index:500
}
</style>
</head>
<body>

<div class="rotator">
  <ul>
    <li class="show"><a href="#link1"><img src="http://farm3.static.flickr.com/2546/4014001088_af37e74e1c.jpg" width="500" height="313"  alt="pic1" /></a></li>
    <li><a href="#link2"><img src="http://amicie.a.m.pic.centerblog.net/06539757.jpg" width="500" height="313"  alt="pic2" /></a></li>
    <li><a href="#link3"><img src="http://spd.fotolog.com/photo/13/41/95/x_vaniiiha_gb/1259178239677_f.jpg" width="500" height="313"  alt="pic3" /></a></li>
    <li><a href="#link4"><img src="http://gamersmafia.com/storage/users_files/28/28882/verano1.jpg" width="500" height="313"  alt="pic4" /></a></li>
  </ul>
</div>

</body>
</html>

Acrescentei a CSS, mas não dava em nada. Fiquei na dúvida se o jquery funcionava ou não, então acrescentei a libraria jquery, mesmo num js que é o:
http://ffkingdom.4umer.net/11436.js

Mas o resultado é sempre o mesmo, não dá em nada:
http://ffkingdom.4umer.net/h3-lol
avatar

NIKESLB
Nível 8

Masculino
Inscrito dia : 02/07/2008
Mensagens : 111
Pontos Ativos : 148

Ver perfil do usuário http://ffkingdom.4umer.net/

Resolvido Re: Um slideshow em jquery e iframe

Mensagem por NIKESLB em 28/08/11, 06:48 pm

contornei o problema. Problema resolvido
avatar

NIKESLB
Nível 8

Masculino
Inscrito dia : 02/07/2008
Mensagens : 111
Pontos Ativos : 148

Ver perfil do usuário http://ffkingdom.4umer.net/

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