Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Tonisoueu

[Resolvido] Problema com Slideshow e Lightbox numa mesma página.

Por , em Javascript

Recommended Posts

Tonisoueu    0

Tonisoueu
Postado

Oi gente, depois de muitas tentativas frustradas resolvi recorrer ao fórum. Espero que possam me ajudar.

 

 

Estou criando um site que terá um slideshow no topo e logo abaixo uma outra div contendo uma galeria lightbox. O problema é que só funciona ou um ou outro. Ambos funcionam quando estão sozinhos na página. Quando insiro os códigos dos dois, um pára de funcionar. Existe alguma forma de carregar dois javascripts numa só página? Por favor, me dêem esse help, pessoal.

 

Segue o código da página:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" /><title>Márcia Amaral Arquitetos</title>


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>


<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>



</head>

<body>
<div id="geral"> 
<div id="banner"> 

<div id="slideshow">
    <img src="images/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="images/image2.jpg" alt="Slideshow Image 2" />   
</div>

</div>
<div id="header">
<div id="header_left"></div>
<div id="header_logo"><a href="http://www.marciamaral.com"><img src="images/logo_marcia_amaral.jpg" width="340" height="134" alt="Marcia Amaral" longdesc="http://www.marciaamaral.com" /></a></div>
<div id="header_right"></div>
</div>
<div id="perfil">
<div id="perfil_left"></div>
<div id="perfil_right">
<div id="perfil_right_titulo"></div>
<div id="perfil_right_texto"></div>
<div id="perfil_right_sidebar"></div>
</div>
</div>
<div id="nossotrabalho"><img src="images/nosso_trabalho.jpg" width="1000" height="39" /></div>
<div id="nossotrabalho_texto">rsrsrsrs</div>
<div id="nossotrabalho_lightbox"> <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> </div>
<div id="oquefazemos_titulo"><img src="images/oquefazemos.jpg" width="1000" height="66" /></div>
<div id="oquefazemos">
<div id="oquefazemos_sideleft"></div>
<div id="oquefazemos_text"></div>
<div id="oquefazemos_sideright"></div>
<div id="oquefazemos_base"></div>
<div id="oquefazemos_subbase"></div>
<img src="images/footer.jpg" alt="footer" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="789,66,821,97" href="http://twitter/xxxx" />
  <area shape="rect" coords="830,66,859,97" href="http://facebook/xxx" />
</map>
</div>
<div class="contato"> <?php include("contato.php");?> </div> 
</div> 
<div id="footer"></div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

conflito de bibliotecas, pesquise sobre o noConflit() do jQuery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tonisoueu    0

Tonisoueu
Postado

conflito de bibliotecas, pesquise sobre o noConflit() do jQuery.

 

 

Opa. Obrigado epla dicxa. Não consegui usar corretamente do noconflit. Então tentei um lightbox q também fosse jquery eo conflito acabou. Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito