Menu y galeria Lightbox Tengo un menu desplegable en javascript, en el que puedo introduccir cosas, y quisiera introducir una galeria de lightbox, pero la he intentado integrar dentro y no lo consigo, mi preguntas son:
¿Como puedo meter la galeria dentro?
¿Puedo introducir un Javascript dentro de otro?
Este es el código del menu, con html:
Cita:
Este es el código de la galeria lightbox con html:<!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>Documento sin título</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2174022: #jQueryUIAccordion */
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css");
/* EndOAWidget_Instance_2174022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2174022" binding="#jQueryUIAccordion" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="jQueryUIAccordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna. </p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est. </p>
<p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. </p>
</div>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2174022: #jQueryUIAccordion
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: false,
autoHeight: true
});
// EndOAWidget_Instance_2174022
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2174022: #jQueryUIAccordion */
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css");
/* EndOAWidget_Instance_2174022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2174022" binding="#jQueryUIAccordion" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="jQueryUIAccordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna. </p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est. </p>
<p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. </p>
</div>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2174022: #jQueryUIAccordion
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: false,
autoHeight: true
});
// EndOAWidget_Instance_2174022
</script>
</body>
</html>
Cita:
Yo pienso que es por los estilos CSS, que no los puedo poner, ya que exceden el número de caracteres que te dejan escribir aqui en el post.<!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>Documento sin título</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #CCC;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 540px;
height: auto;
text-align:left;
}
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #3e3e3e;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 20px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
}
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 20px;
}
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="gallery" class="lbGallery">
<ul>
<li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>
<li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>
<li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: '/images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#999999", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: .6, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
});
});
// EndOAWidget_Instance_2127022
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #CCC;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 540px;
height: auto;
text-align:left;
}
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #3e3e3e;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 20px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
}
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 20px;
}
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="gallery" class="lbGallery">
<ul>
<li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>
<li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>
<li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: '/images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#999999", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: .6, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
});
});
// EndOAWidget_Instance_2127022
</script>
</body>
</html>
(Si necesitais algun ejemplo, o alguna cosa mas, para poder ayudarme, decirmelo y lo incluyo)
Gracias a todos de antemano
