...

View Full Version : picture gallery



Kofoed
10-29-2008, 07:56 PM
Hey.


I would like to to make a image gallery like the one on this page...... http://www.loejtegaardirving.dk/galleri.html .......... anybody who can let me in on some secrets:-)

dustywb
10-30-2008, 09:16 AM
That was made using javascript for the most part. If you want to see how it was done just view the page source find the <script> tag and go to the src url and you can see how it was done by looking at that and the page source.

effpeetee
10-30-2008, 02:50 PM
Try this prigram (http://exitfegs.co.uk/AGallery.html)of mine.

You will obviously need to substitute your own images,

Frank


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Gallery</title>
<style type="text/css">
img {
border: none;
}

a {
outline: none;
}

li {
display:inline;
}

#desc {
font-style: italic;
}
</style>


<script type="text/javascript" src="imageGallery.js"></script>

</head>

<body bgcolor=#dddddd>

<ul>
<li><a onclick="toggleMe('para1'); showPic(this); return false;" href="112.jpg" title="Picture 1."><img src="112a.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para2'); showPic(this); return false;" href="85.jpg" title="Picture two"><img src="85a.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para3'); showPic(this); return false;" href="92.jpg" title="Picture three"><img src="92a.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para4'); showPic(this); return false;" href="89.jpg" title="Picture four"><img src="89a.jpg " width="50" height="38"></a></li>
<li><a onclick="toggleMe('para5'); showPic(this); return false;" href="69.jpg" title="Picture five"><img src="69a.jpg" width="50" height="38"></a></li>
<a onclick="toggleMe('para6'); showPic(this); return false;" href="110.jpg" title="Picture six"><img src="110a.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para7'); showPic(this); return false;" href="93b.jpg" title="Picture one"><img src="93a.jpg
" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para8'); showPic(this); return false;" href="winhs13.jpg" title="Picture two"><img src="winhs13a.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para9'); showPic(this); return false;" href="YoungSteve.jpg" title="Picture three"><img src="YoungStevea.jpg" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para10'); showPic(this); return false;" href="Bluebell1.jpg" title="Picture four"><img src="Bluebell1a.jpg
" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para11'); showPic(this); return false;" href="web15.jpg" title="Picture five"><img src="web15a.jpg" width="38" height="50"></a></li>
<li><a onclick="toggleMe('para12'); showPic(this); return false;" href="web17.jpg" title="Picture six"><img src="web17a.jpg" width="50" height="38"></a></li>

</ul>

<!-- Place the title of each image here. -->
<div id="para1" style="display:none; font-size: 1.2em; font-weight: 800;">Mr Keogh and Steven at John's wedding.</div>
<div id="para2" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Achilla Heights - Dorset.</div>
<div id="para3" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Hove. 2007.</div>
<div id="para4" style="display:none; font-size: 1.2em; font-weight: 800;">Steven walking in the Peak District.</div>
<div id="para5" style="display:none; font-size: 1.2em; font-weight: 800;">Steve in the Lake District.</div>
<div id="para6" style="display:none; font-size: 1.2em; font-weight: 800;">Steven, on the Stiper Stones.</div>
<div id="para7" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Hove.</div>
<div id="para8" style="display:none; font-size: 1.2em; font-weight: 800;">Relaxing at Winchester'</div>
<div id="para9" style="display:none; font-size: 1.2em; font-weight: 800;">Steven - quite a few years ago'</div>
<div id="para10" style="display:none; font-size: 1.2em; font-weight: 800;">On the "Bluebell Line" - A preserved Railway.</div>
<div id="para11" style="display:none; font-size: 1.2em; font-weight: 800;">Steven again. Just a boy.</div>
<div id="para12" style="display:none; font-size: 1.2em; font-weight: 800;">EffPeeTee on the right-a few yrs ago.</div>



<!-- Place the name of any image you want to initially display here. Do not give the size of this image. -->
<img id="placeholder" src="steve.jpg">
<div id="DivContent"></div>
<div id="desc">Choose an image to begin</div>

<!-- If you want the smaller images to display at the bottom, place the images in the list above (with the 'onclick' events) here. -->
<img src="112.jpg" style="display: none">
<img src="85.jpg" style="display: none">
<img src="92.jpg" style="display: none">
<img src="89.jpg" style="display: none">
<img src="69.jpg" style="display: none">
<img src="110.jpg" style="display: none">
<img src="93b.jpg" style="display: none">
<img src="winhs13.jpg" style="display: none">
<img src="YoungSteve.jpg" style="display: none">
<img src="Bluebell1.jpg" style="display: none">
<img src="web15.jpg" style="display: none">
<img src="web17.jpg" style="display: none">

</body>
</html>


Javascript. "imageGallery.js"

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Jeremy Keith / Anonymous :: http://www.alistapart.com/articles/imagegallery/
Licensed under: Creative Commons License */

function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

var previousToggle=null;
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
if(previousToggle)previousToggle.style.display="none";
previousToggle=e;
}
return true;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum