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" />
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<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" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<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.