Hola, tengo una galería hecha a partir de jquery y javascript. He usado un ejemplo y he hecho pocas modificaciones que estaban a mi alcance pero ahora me encuentro con una necesidad referida a este lightbox que no sé como resolver.
Tengo un lightbox que abre una imagen en mayor tamaño, lo que quiero poner es un div con comentarios del estilo de facebook, lo tengo todo hecho simplemente no sé como meter el div dentro del lightbox. Os dejo todos los códigos, ojalá podáis ayudarme, muchisimas gracias.
index.html
Código PHP:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Perfil</title>
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<hr />
<div class="section" id="example">
<h2>Examples</h2>
<h3>Single image</h3>
<a href="images/examples/thumb-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
<div class="single">
<a href="images/examples/image-2.jpg" rel="lightbox" title style ="'background-color:white' "><img src="images/examples/thumb-2.jpg" alt="" /></a>
</div>
</div>
<h3 style="clear: both;">Image set</h3>
<div class="imageRow">
<div class="set">
<div class="single">
<a href="images/examples/dsom.jpg" rel="lightbox[plants]" title=""><img src="images/examples/thumb-1.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="single">
<a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="single last">
<a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
<div class="single last">
<a href="images/examples/grande.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/peque.jpg" alt=<div></div>" /></a>
</div>
</div>
</div>
</div>
<hr />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function(e){
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Abajo os adjunto el lightbox.js porqué en este mensaje he superado el límite de carácteres, muchas gracias!!