Jump to content

how to display a caption in a gallery

Kikocabas

By Kikocabas
in JavaScript

 Share

Recommended Posts

Kikocabas Newbie

Kikocabas

Posted
Posted

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 comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...