i am coding a new website for my photographs, all in xhtml and css. the site is one column, with horizontal nav bars that are div elements. there is one (gallerynav) which contains seven photo galleries, another below it (gallerynav2) which contains an unordered list of numbers, which i would like to make links to the photographs, which will then open into a div element below (photos). how do i link the photographs in gallerynav2 to open into another div element in the same page?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
photo gallery code problems in xhtml
- Thread starter natrone
- Start date
ChrisHirst
IS-IT--Management
use javascript forum216
Chris.
Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems
So long, and thanks for all the fish.
Chris.
Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems
So long, and thanks for all the fish.
- Thread starter
- #3
Divs don't work like windows. You treat them like any other element. Give them a unique ID, and manipulate their properties, CSS and otherwise, by retrieving the ID.
For example, you can toggle their visibility, set their position, and change their contents. But JavaScript is the right forum to learn how.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Haiku workshop and community.
For example, you can toggle their visibility, set their position, and change their contents. But JavaScript is the right forum to learn how.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Haiku workshop and community.
elegidito
Programmer
- Jan 19, 2002
- 358
I wrote this a little while ago to display images in a gallery I had, maybe it will get you started.
hope that helps..
"Whether you think that you can, or that you can't, you are usually right." - Henry Ford
Code:
<html>
<script>
function preLoadem()
{
images = ["pict0000.JPG","PICT0033.JPG"];
preloaded = new Array();
for (x=0;x<images.length;x++)
{
preloaded[x] = new Image();
preloaded[x].src = images[x];
}
}
function doImages(val)
{
images = ["pict0019.JPG","PICT0015.JPG","PICT0040.JPG","PICT0035.JPG","pict0000.JPG","PICT0033.JPG"];
startVal = (document.forms[0].startNum.value *1) + val;
if ((startVal+4) <= images.length && startVal>=0){
daNums = new Array();
for (x=startVal;x<(4+startVal*1);x++)
{
if (x==startVal) {document.forms[0].startNum.value = x};
//num = (x >= images.length || x<0) ? Math.abs((Math.abs(x)-images.length)) : x; alert(x+":"+num);
daNums[daNums.length] = images[x];
}
document.getElementById('a0').src = daNums[0];
document.getElementById('a1').src = daNums[1];
document.getElementById('a2').src = daNums[2];
document.getElementById('a3').src = daNums[3];
}
}
function doPreview(src)
{
d=document.getElementById('i1');
d.src = src;
d.style.cursor = "hand";
}
</script>
<body onLoad=doImages(0);preLoadem()>
<center><img width=256 height=192 src=default.jpg id=i1 onClick="window.open(this.src,'x','width=512,height=384')"><BR><BR>
<span style="vertical-align:middle">
<img onClick=doImages(-1) height=20 src=arrowleft.jpg style='position:relative;top:-12px;'>
<img id=a0 height=48 width=64 onClick=doPreview(this.src)>     <img id=a1 height=48 width=64 onClick=doPreview(this.src)>
    <img id=a2 height=48 width=64 onClick=doPreview(this.src)>     <img id=a3 height=48 width=64 onClick=doPreview(this.src)>
<img src=arrowright.jpg style='position:relative;top:-14px;' onClick=doImages(1)>
<form><input type='hidden' name='startNum' value=0></form></center>
</body>
</html>hope that helps..
"Whether you think that you can, or that you can't, you are usually right." - Henry Ford
JavaScript taste bad... You'll lose visitors who don't allow JS to run on their box... *insert typical rant here*
You may want to try using a server side technology, that way if a user is surfing w/o JavaScript they can still use your gallery and you don't have to download full images your not intrested in veiwing.
You may want to try using a server side technology, that way if a user is surfing w/o JavaScript they can still use your gallery and you don't have to download full images your not intrested in veiwing.
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
- Locked
- Question