Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Multiple divs interacting

    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!

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Combine image swapping with a 2 dimensional array (album x images)

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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}).

    Code:
    <!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. ;)

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    If I have time tomorrow, I can probably find a way to edit that to do what you want to do.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •