Jump to content

how to display a caption in a gallery


Recommended Posts

Hi,

I'm using the following gallery but I want to display some caption below the active image. Is it possible to add some code to keep using that one or is much easy search another one?

 

Thanks!

<div style="position: relative;"><ul id="gallery"><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_nou.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/2.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/esperando.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pajaros%20en%20la%20cabeza.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_4387.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pezes.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_44881.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/metamorfosis.png" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/img.jpg" /></li></ul></div>
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();});
/* =Gallery-----------------------------------------------*/#gallery { display: none; }#jgal {padding:0;margin:0px;list-style: none; width: 160px; }#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }#jgal li img { position: absolute; top: 0px; left: 160px; display: none; }#jgal li.active img { display: block; width:470px; }#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
Link to post
Share on other sites

Maybe...

<!DOCTYPE html><html><head><title></title><style>/* Gallery */#gallery { display: none; }#jgal {padding:0;margin:0px;list-style: none; width: 160px; }#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }#jgal li img { position: absolute; top: 0px; left: 160px; display: none; }#jgal li.active img { display: block; width:470px; }#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}#title {position:absolute;left:650px;top:100px;width:200px;font-style:italic; }</style><script>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';document.getElementById('title').innerHTML = this.title;});}},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></head><body><div style="position: relative;"><ul id="gallery"><li><img alt="This is title1" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_nou.jpg" /></li><li><img alt="This is title2" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/2.JPG" /></li><li><img alt="This is title3" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/esperando.jpg" /></li><li><img alt="This is title4" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pajaros%20en%20la%20cabeza.jpg" /></li><li><img alt="This is title5" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_4387.JPG" /></li><li><img alt="This is title6" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pezes.jpg" /></li><li><img alt="This is title7" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_44881.jpg" /></li><li><img alt="This is title8" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/metamorfosis.png" /></li><li><img alt="This is title9" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/img.jpg" /></li></ul><span id="title"></span></div></body></html>
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...