PDA

View Full Version : How can I alter this code to display captions from alt tags

laurakincaid
07-24-2010, 02:52 PM
Hello all,

Looking for some help to alter a gallery script, very kindly provided for use here: http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed.

Here is the 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();
});


Here is the HTML, which I have enclosed within a div box positioned absolutely on the page:

<ul id="gallery">
<li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li>
<li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li>
<li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li>
<li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

And here is the CSS:


/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; 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: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#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; }
#capt

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->


I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received.
TinyScript
07-24-2010, 05:12 PM
<html><head>
<style>
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; 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: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#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; }
#capt

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }


#display{position:absolute;top:300px;left:300px}


</style>
<![endif]-->
</style>



</head><body>
<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');


var display= document.getElementById("display")


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';

display.innerHTML=this.getElementsByTagName('img')[0].alt


});
}
},

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>
<ul id="gallery">
<li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li>
<li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li>
<li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li>
<li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

<div id="display"></div>

</body>
</html>
laurakincaid
07-24-2010, 06:43 PM
Hi,

First off, thanks for the quick reply! I managed to get this to work on its own but not within the page as I'd originally created it. Perhaps you could take a quick look at the code and see whether it could be made to work within this. I forgot to mention on the last post that I'd already modified the original code once to use separate thumbnail images, rather than shrinking the original image and centring it. Maybe this is interfering with your solution?

NB CSS is held within a separate file.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>myriad</title>
<link href="../myriad.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<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 = "thumbs2/";
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 (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>
</head>

<body>

<div class="background" style="position:relative; width:1080px; height:740px"> <!--this is the main box -->


<!--this is the header -->
<div class="textintro" style="position:absolute; top:30px; left:10px; width:800px; height:150px;"><img src="../images/header-portfolio.gif" width="680" height="150" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="17,65,172,95" href="../typesetting.html" />
<area shape="rect" coords="203,70,366,96" href="../proofreading.html" />
<area shape="rect" coords="399,69,547,97" href="../photography.html" />
<area shape="rect" coords="584,69,666,94" href="../design.html" />
<area shape="rect" coords="92,112,138,127" href="../about.html" />
<area shape="rect" coords="171,111,256,128" href="../portfolio.html" />
<area shape="rect" coords="286,113,350,127" href="../contact.html" />
<area shape="rect" coords="381,114,430,128" href="../terms.html" />
<area shape="rect" coords="21,112,62,127" href="../index.html" />
</map></div>



<!--main content -->


<!--this is the gallery -->
<div class="fontmain" style="position:absolute; top:210px; left:50px; width:970px; height:530px;">

<ul id="gallery">
<li><a href="PDFs/aroma_chap.pdf" target="_blank"><img src="images2/aroma_chap.gif" alt="brief: design and typeset an aromatherapy textbook // new chapter page {university project}"></a></li>
<li><a href="PDFs/aroma_table2.gif" target="_blank"><img src="images2/aroma_table.gif" alt="brief: design and typeset an aromatherapy textbook // page with table {university project}"></a></li>
<li><a href="PDFs/aroma_gloss2.gif" target="_blank"><img src="images2/aroma_gloss.gif" ></a></li>
<li><a href="PDFs/nazi_spread2.gif" target="_blank"><img src="images/nazi_spread.gif" ></a></li>
<li><a href="PDFs/aids_chap2.gif" target="_blank"><img src="images2/aids_chap.gif" ></a></li>
<li><a href="PDFs/vamp2.gif" target="_blank"><img src="images/vamp1.gif" ></a></li>
<li><a href="PDFs/jd_cover2.jpg" target="_blank"><img src="images2/jd_cover.jpg" ></a></li>
<li><a href="PDFs/jd_innerpages1a.jpg" target="_blank"><img src="images2/jd_innerpages1.jpg"></a></li>
<li><a href="PDFs/jd_innerpages2b.jpg" target="_blank"><img src="images2/jd_innerpages2.jpg" ></a></li>
<li><a href="PDFs/jd_innerpages3c.jpg" target="_blank"><img src="images2/jd_innerpages3.jpg" ></a></li>
<li><a href="PDFs/ed_leaflet2.jpg" target="_blank"><img src="images2/ed_leaflet.jpg" ></a></li>
</ul>


</div>


<!--this is the caption -->
<div class="fontmain" style="position:absolute; top:705px; left:250px; width:450px; height:30px;">This is where the caption will be displayed.</div>



<!--standard content -->



<!--this is the copyright jazz -->
<div class="textintro" style="position:absolute; top:755px; left:10px; width:250px; height:30px;"><img src="../images/footer.gif" /></div>


</div>




</body>
</html>


I don't have the page uploaded anywhere yet as I'm trying to sort out my hosting account just now but if necessary I can upload it somewhere else temporarily so you can see it in action.

The other solution I was considering was creating the gallery as a separate web page and then embedding it within the div box that currently holds the main content. But if the thumbnail mod is causing problems, I'm guessing this won't work either.