/    Sign up×
Community /Pin to ProfileBookmark

Add functionality to image gallery script

There’s this script that makes a simple image gallery out of an unordered list of images:

[CODE]
<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++) {
var url = li[i].getElementsByTagName(‘img’)[0].src;
var url_array = url.split(‘/’);
var j = url_array.length – 1;
var thumb_path = ‘tnimages/’;
li[i].style.backgroundImage = ‘url(‘ + thumb_path + url_array[j] + ‘)’;
li[i].title = li[i].getElementsByTagName(‘img’)[0].alt;
gal.addEvent(li[i],’click’,function() {
var im = document.getElementById(‘jgal’).getElementsByTagName(‘li’);
for (k=0; k<im.length; k++) {
im[k].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>[/CODE]

demo is here: [url]http://monc.se/kitchen/stew/gallery/[/url]

My question is how would I go about adding an image description that appears below(or next to, or whatever) the active image? You don’t have to solve this for me, a good hint or two is fine.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@astupidnameMay 23.2009 — My question is how would I go about adding an image description that appears below(or next to, or whatever) the active image?[/quote]
The same way you are positioning and altering display of the img's in the li's, add a p to each and do same as the img's, something like:

/* 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: 220px; display: none; }
[COLOR="Red"]#jgal li p {position:absolute; top:420px; left:220px; display:none; }[/COLOR]
#jgal li.active img { display: block; }
[COLOR="Red"]#jgal li.active p { display:block; }[/COLOR]
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

Just a suggestion, should work out well, I would think.
×

Success!

Help @evanct spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...