...

View Full Version : Multiple divs interacting



sgray6
10-18-2007, 04:25 AM
I am trying to make an image gallery that basically has 3 divs:

1 - a div with a list of "albums"

2 - a div where the images appear

3 - a div with previous/next links to click through the images in an album


I'm building a site with (hopefully) only one real page, so I want all this to happen within divs, but I'm not sure how to make the 3rd div function properly.
Here's what should happen:
When you click a link from the list in div 1, the first image of that album appears in div 2. Div 3 can then be used to click between the next and previous images in that album. When you click on a different link from the list in div 1, it's first image appears in div 2, and div 3 now controls just that album's images, not all the images from all albums.
The 3rd div is the part I don't know how to do / don't know if it's possible.


Any ideas?
Thanks!

Fang
10-18-2007, 08:09 AM
Combine image swapping with a 2 dimensional array (album x images)

Aceramic
10-18-2007, 08:37 AM
Not sure if this is exactly what you're looking for, but it could probably be edited to suit your needs (as I edited it from the source I got it from {which is given credit in my version, although he says that is not required}).


<!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=iso-8859-1" /> <title>Your Name Here</title>

<style type="text/css">
<!--
body {
background-color: #FFFFFF;

}
div.gallery {
position: absolute;
left: 5px;
top: 175px;
}
-->
/* needed for IE to make :active state work first time */
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #003399;
font-weight: bold;
}

a:link {
text-decoration: underline;
}

a:visited {
text-decoration: underline;
color: #000000;
}

a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}

/* common styling for all galleries */
a.gallery, a.gallery:visited {
display:block;
color:#003399;
text-decoration:none;
border:1px solid #000000;
width:60px;
height:40px;
float:left;
margin:3px;
z-index:50;
}
a.slidea {
background:url(image url here);
}

a.slideb {
background:url(image url here);
}

a.slidec {
background:url(image url here);
}

a.slided {
background:url(image url here);
}

a.slidee {
background:url(image url here);
}

a.slidef {
background:url(image url here);
}

a.slideg {
background:url(image url here);
}

a.slideh {
background:url(image url here);
}

a.slidei {
background:url(image url here);
}

a.gallery em, a.gallery span {
display:none;
}
a.gallery:hover {
border:1px solid #003399;
}

a.slidea em {background:url(image url here) 5px 5px no-repeat;}
a.slideb em {background:url(image url here) 5px 5px no-repeat;}
a.slidec em {background:url(image url here) 5px 5px no-repeat;}
a.slided em {background:url(image url here) 5px 5px no-repeat;}
a.slidee em {background:url(image url here) 5px 5px no-repeat;}
a.slidef em {background:url(image url here) 5px 5px no-repeat;}
a.slideg em {background:url(image url here) 5px 5px no-repeat;}
a.slideh em {background:url(image url here) 5px 5px no-repeat;}
a.slidei em {background:url(image url here) 5px 5px no-repeat;}

/* styling for RIGHT gallery */
#container_right {
position:absolute;
width:960px;
height:620px;
background:#FFFFFF;
border:3px solid #003399;
left:0px;
top:0px;
}


#container_right .thumbs {
border: 1px solid #FFFFFF;
width:210px;
height:600px;
position:absolute;
right:10px;
top:10px;

}
#container_right a.gallery:hover span {
display:block;
position:absolute;
width:300px;
height:150px;
top:500px;
right:628px;
padding:5px;
font-style:italic;
color:#003399;
}
#container_right a.gallery:hover span:first-line {
display:block;
position:absolute;
width:300px;
height:150px;
top:500px;
right:628px;
padding:5px;
font-style:normal;
font-size:1.1em;
color:#003399;
}
#container_right a.gallery:active, #container_right a.gallery:focus {
border:1px solid #003399;
}
#container_right a.gallery:active em, #container_right a.gallery:focus em {
display:block;
position:absolute;
width:642px;
height:482px;
top:5px;
right:282px;
color:#FFFFFF;
padding:5px;
border:1px solid #003399;
z-index:50;
}
#container_right h1 {
clear:both;
margin:0;
padding-top:30px;
padding-left:20px;
width:250px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:3em;
font-weight:normal;
color:#003399;
}
#container_right h1 em {
font-size:0.6em;
color:#003399;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #003399;
}
#Layer1 {
position:absolute;
width:201px;
height:38px;
z-index:1;
left: 755px;
top: 745px;
}

a.hr {
background-color:#FFFFFF;
}

</style>



</head>

<body>

<div class="gallery">
<div id="container_right">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slideb" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slidec" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slided" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slidee" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slidef" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slideg" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slideh" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

<a class="gallery slidei" href="#nogo"><em></em><font color="#000000"><span>Description Text goes here.</span></font></a>

</div>

<h1>&nbsp;</h1>
</div>
</div>

<font color="#003399" size="-3" face="verdana">This page uses a CSS Photo Gallery courtesy of Stu Nicholls at <a href="http://www.cssplay.co.uk">CSS Play</a></font>

<br />

<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>


<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-css-blue"
alt="Valid CSS!" />
</a>



<div id="Layer1"><a href="week1.html"><img src="images/Buttons/PreviousButton.jpg" alt="Previous Week Button" width="100" height="35" border="0" /></a><a href="week2.html"><img src="images/Buttons/NextButton.jpg" alt="Next Week Button" width="100" height="35" border="0" /></a></div>



</body>
</html>


I edited out a bit of code that wasn't part of the gallery (as well as all of the long URL's and descriptions) and may have accidentally deleted an extra ending tag or something here or there... If it doesn't work, that's why. ;)

sgray6
10-19-2007, 05:53 AM
Aceramic, thanks but i don't think that's quite what I'm looking for because those previous/next links seem to link to separate html files, which is what i'm trying not to do...

Anyone care to elaborate on Fang's point? I'm new to this and don't really know what that means...
thanks!

Aceramic
10-19-2007, 06:58 AM
If I have time tomorrow, I can probably find a way to edit that to do what you want to do.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum