problema entre lightbox y fade de imagenes

bambanx · #1 (**permalink**) 16/04/2010, 10:08

Hola a todos, estoy haciendo una web en la cual en la cabecera tengo unas imagenes ke cambian haciendo fade para lo cual use el siguiente codigo:

<!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>
<title>SOLID ADVENTURE</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/standard.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

</head>
<body>
<div id="header">
<div id="flashcontent">
<div class="slideshow">
<img src="images/banner5.jpg" width="100%" height="350" alt="banner" />
<img src="images/banner3.jpg" width="100%" height="350" alt="banner" />
<img src="images/banner2.jpg" width="100%" height="350" alt="banner" />
<img src="images/banner.jpg" width="100%" height="350" alt="banner" />

Esto funciona bien el problema es ke mas abajo puse una galeria de fotos usando lightbox pero no funciona si el codigo mencionado anteriormente esta presente, es decir solo puedo usar el codigo para las imagenes de la cabecera o el de la galeria , este es el codigo de lightbox:
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />



<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>

Me funciona bien pero solo cuando saco el codigo de las imagenes de la cabecera, mi pregunta es como puedo haacer para ke funcionen los dos efectos , el de la cabecera y el de la galeria, de ante mano muchas gracias.

caricatos · #2 (**permalink**) 16/04/2010, 10:32

Tema movido desde javascript

mayid · #3 (**permalink**) 16/04/2010, 11:06

Para empezar, no cargues dos veces jquery. Eso da problemas. Luego, vemos que mas hay para arreglar:

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

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

bambanx · #4 (**permalink**) 16/04/2010, 22:09

Hola gracias por tu respuesta, si saco el jquery.min.js no me funciona el fade de imagenes y me funciona la galeria, al contrario si saco el jquery.js me funciona el fade de imagenes pero no la galeria, no se como solucionarlo.

Saludos y gracias

bambanx · #5 (**permalink**) 17/04/2010, 00:39

No me funciona, solo anda el fade de imagenes pero no la galeria, estoy tratando esto ahora pero tampoco ,solo kiero tener el fade de imagenes arriba y una galeri tipo lightbox abajo , si alguien lo sabe ayuda pls lo necesito urgente .
Saludos y gracias

<!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>
<title>SOLID ADVENTURE</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/standard.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/colorbox.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});

$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});

</script>

</head>
<body>
<div id="header">
<div id="flashcontent">
<div class="slideshow">
<img src="images/banner5.jpg" width="100%" height="350" />
<img src="images/banner3.jpg" width="100%" height="350" />
<img src="images/banner2.jpg" width="100%" height="350" />
<img src="images/banner4.jpg" width="100%" height="350" />
<img src="images/banner.jpg" width="100%" height="350" />
</div>

<div id="footer">

<a href="images/1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>

</div>

mayid · #6 (**permalink**) 17/04/2010, 08:05

Cita:

Hola gracias por tu respuesta, si saco el jquery.min.js no me funciona el fade de imagenes y me funciona la galeria, al contrario si saco el jquery.js me funciona el fade de imagenes pero no la galeria, no se como solucionarlo.

O tenes un problema de versiones (tu jquery.min puede ser la version 1.2.x mientras que tu segundo plugin necesita la 1.3.x). O te estas olvidando que la libreria jquery es lo primero que tenes que cargar. Es decir, cargarlo antes que ningun otro archivo o instruccion .js.

Respecto a todo esto, esta fuera de document.ready y no tiene por que funcionar!

Cita:

$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});

Document.ready se ejecuta en cuando el DOM está construido. Es decir, cuando todo el html existe. No podes manipular html que aun no esta insertado en el DOM. Fijate!

bambanx · #7 (**permalink**) 17/04/2010, 21:48

Muchas Gracias por iluminarme y pude solucionarlo baje la ultimaa version de la libreria y corregi lo ke tenia fuera de la funcion :

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});

$("a[rel='sapete']").colorbox({slideshow:true});

$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Gracias .