Buscando en internet, encontré una galería de imágenes muy interesante y me gusto. La implemente en mi código, la galeria me muestra dos partes la parte de los thumbnails a la izquierda y las fotos en tamaño natural a la derecha.
Mi problema es el siguiente:
Los thumbnails que me muestra, son una pequeña parte de la imagen a tamaño completo, y lo que necesito es que me muestre la imagen en miniatura, no importa si no tiene proporción, igual en las fotos grandes se ve todo bien.
El codigo que uso es el siguiente:
Código PHP:
<script type='text/javascript'>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
<style type='text/css'>
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 200px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<body>
<ul id="gallery">
<li><a href="1.jpg" rel="lightbox[roadtrip]"><img src="1.jpg" alt="Image 1"></a></li>
<li><a href="2.jpg" rel="lightbox[roadtrip]"><img src="2.jpg" alt="Image 2"></a></li>
</ul>
</body>
