tengo dos javascript uno un slide panel y otro efecto lightbox dentro de una pagina php resulta que solo uno me funciona . si quito uno el tro funciona y viceversa.
los tengo ubicado en header.php este header es llamado a traves de un include en otra pagina producto.php si coloco el java que me produce el lightbox entre los heads no funciona para que lo haga debo ponerlo en el header.
como hago para que funcionen los dos codigos? alguna ayuda les dejo parte del codigo del header
Código PHP:
<!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" />
<title>Simple Slide Panel</title>
<head>
[COLOR="Red"]<!-- java efecto slide panel -->[/COLOR]
<script type="text/javascript" src="jquery.js"></script>
[COLOR="Red"]<!-- java efecto slide panel -->[/COLOR]
[COLOR="Red"]<!-- java efecto lightbox -->[/COLOR]
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
[COLOR="Red"]<!-- java efecto lightbox -->[/COLOR]
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 738px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24 url(sld_images/panel.jpg) repeat;
height: 250px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 10px #422410;
background: url(sld_images/btn-slide.jpg) no-repeat center top;
}
.btn-slide {
background: url(sld_images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 0px 5px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
#profileImage { float:left; width:105px; margin: 30px 15px 15px 15px;}
#profileImage img { border: 2px solid #422410; }
div#profileText { float:right; width:350px; color:#fff;}
div#profileText a { color:#F68A1A;}
.wordpress {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/wordpress.gif) bottom left no-repeat;
List-style:none;
}
.clickideas {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/cli.gif) bottom left no-repeat;
List-style:none;
}
.pownce {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/pow.gif) bottom left no-repeat;
List-style:none;
}
.flickr {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/flickr.gif) bottom left no-repeat;
List-style:none;
}
.blog {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/blog.gif) bottom left no-repeat;
List-style:none;
}
.mail {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(sld_images/mail.gif) bottom left no-repeat;
List-style:none;
}
</style>
</head>
<body>
<div id="panel">
<div id="profileImage">
<img src="sld_images/nikko.jpg" alt="">
</div>
<div id="profileText">
<h2>Super oferta!</h2>
Hola mi nombre es Nikko, xyberneticos es mi blog personal. Vivo en argentina, actualmente desarrollador Freelance.
<img src="images/perfiles.gif" alt="">
<ul>
<li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
<li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
<li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
<li class="flickr">My Photos <a href="http://www.flickr.com/photos/xyberneticos/">Flickr</a></li>
<li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
<li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
</ul>
</div>
</div>
<p class="slide"><a href="#" class="btn-slide">Super oferta!</a></p>
<!-- fin slide panel -->
</html>
<?php
/*
?>
de esta forma solo funciona el efecto lightbox