SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photo Gallery using CSS gone wrong.

    I am rewriting an existing webpage. Part of the plan is to replace the existing Javascript driven photo gallery with one that looks and works better using only CSS. The whole thing looks pretty slick and handles about 12 images of a modest size which is all we want.

    It works like this, all the large images are hidden from view until the user does a mouse over on a thumbnail of the same image. then the big image (around 400 px on the long side is all it is) pops up.

    The big images are loaded into a unordered list. The thumbnails are loaded as background images for the list. All of that said, here are a few sniplets of the CSS stuff.
    Code:
    /* The containing box for the gallery. */
    #container {
        position:relative;
        width:770px;
        height:405px;
        margin:20px auto 0 auto;
        border:1px solid #aaa;
        }
    
    /* Removing the list bullets and indentation */
    #container ul {
        padding:0;
        margin:0;
        list-style-type:none;
        }
        
    /* Remove the images and text from sight */
    #container a.gallery span {
        position:absolute;
        width:1px;
        height:1px;
        top:5px;
        left:5px;
        overflow:hidden;
        background:#fff;
        }
    
    /* Adding the thumbnail images */
    #container a.gallery, #container a.gallery:visited {
        display:block;
        color:#000;
        text-decoration:none;
        border:1px solid #000;
        margin:1px 2px 1px 2px;
        text-align:left;
        cursor:default;
        }
    #container a.slidea {
        background:url(../images/Thumb/AHT-1-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slideb {
        background:url(../images/thumb/AHT-2-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidec {
        background:url(../images/thumb/AHT-3-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slided {
        background:url(../images/thumb/AHT-4-t.jpg);
        height:62px;
        width:93px;
        }
    * html #container a.slided {
        width:91px;
        width:93px;
        }
    ------------------------------------------------- Thumb nail loading has been truncated to save space ----------------------------------------

    The problem is this. when the thing runs and loads the thumb images the image used for the FIRST image of 12 total images it ALSO loads for the 11 image out of 12images loaded. and I have no Idea why.
    Last edited by Paul O'B; Mar 17, 2013 at 04:21. Reason: Please use code tags when posting code

  2. #2
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aside from CSS, do you have a link that we can have a look to pin point the issues?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,270
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As mentioned above we will at least need the full css and html to help with this but a link would be better. It sounds like something pretty simple but there is not enough to go on in the above code.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by icombustion View Post
    Aside from CSS, do you have a link that we can have a look to pin point the issues?
    The code has not been put out on the web yet so I have no page for you to look at. I will do one of two things.

    1. take a screen shot and paste it here. along with the code.

    2. get permission to promote the code to production as is so we can solve the problem quicker. The error is nothing more than a nuisance. Even though thumb nail AHT-1-t.jpg populates it's own space AND the space for AHT-11-t.jpg, when you hover over the 11th position, the correct large image comes up.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    snap shot of the problem and full code

    sshot-1.png To the left is a snapshot of what the code produces. Notice that the first and 11th (out of 12) images are identical. They should not be. It is interesting to note that when a mouse is hovered over the 11th image the correct full size image pops up. Below is all of the HTML and CSS code.

    ----------------------HTML---------------------------------
    Code:
    	<div id="container">
    	  <ul>
    	    <li>
    	      <a class="gallery slidea" href="#nogo">
                <span>
    	          <img src="./images/AHT-1.jpg" alt="Truck" title="Trucks" />
    	          <br />
    	          Trucks
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slideb" href="#nogo">
                <span>
    	          <img src="./images/AHT-2.jpg" alt="Trailer" title="Trailer" />
    	          <br />
    	          Trailer
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidec" href="#nogo">
                <span>
    	          <img src="./images/AHT-3.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	         Photographed by Anderson Photography
    	       </span>
    	     </a>
    	    </li>
    	    <li>
    	      <a class="gallery slided" href="#nogo">
                <span>
    	          <img src="./images/AHT-4.jpg" alt="Truck cab" title="Truck cab" />
    	          <br />
    	          Truck cab
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidee" href="#nogo">
                <span>
    	          <img src="./images/AHT-5.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidef" href="#nogo">
                <span>
    	          <img src="./images/AHT-6.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slideg" href="#nogo">
                <span>
    	          <img src="./images/AHT-7.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slideh" href="#nogo">
                <span>
    	          <img src="./images/AHT-8.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidei" href="#nogo">
                <span>
    	          <img src="./images/AHT-9.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidej" href="#nogo">
                <span>
    	          <img src="./images/AHT-10.jpg" alt="Horse Handlers" title="Horse Handlers" />
    	          <br />
    	          Horse Handlers
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidea" href="#nogo">
                <span>
    	          <img src="./images/AHT-11.jpg" alt="Horse tralers" title="Horse tralers" />
    	          <br />
    	          Horse tralers
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	    <li>
    	      <a class="gallery slidel" href="#nogo">
                <span>
    	          <img src="./images/AHT-12.jpg" alt="Airplane" title="Airplane" />
    	          <br />
    	          Airplane
    	          <br />
    	          Photographed by Anderson Photography
    	        </span>
    	      </a>
    	    </li>
    	  </ul>
    </div>
    -----------------------------------------CSS------------------------------------------------

    Code:
    /* The containing box for the gallery. */
    #container {
        position:relative;
        width:770px;
        height:405px;
        margin:20px auto 0 auto;
        border:1px solid #aaa;
        }
    
    /* Removing the list bullets and indentation */
    #container ul {
        padding:0;
        margin:0;
        list-style-type:none;
        }
        
    /* Remove the images and text from sight */
    #container a.gallery span {
        position:absolute;
        width:1px;
        height:1px;
        top:5px;
        left:5px;
        overflow:hidden;
        background:#fff;
        }
        
    /* Adding the thumbnail images */
    #container a.gallery, #container a.gallery:visited {
        display:block;
        color:#000;
        text-decoration:none;
        border:1px solid #000;
        margin:1px 2px 1px 2px;
        text-align:left;
        cursor:default;
        }
    #container a.slidea {
        background:url(../images/Thumb/AHT-1-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slideb {
        background:url(../images/thumb/AHT-2-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidec {
        background:url(../images/thumb/AHT-3-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slided {
        background:url(../images/thumb/AHT-4-t.jpg);
        height:62px;
        width:93px;
        }
    * html #container a.slided {
        width:91px;
        width:93px;
        }
    #container a.slidee {
        background:url(../images/thumb/AHT-5-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidef {
        background:url(../images/thumb/AHT-6-t.jpg);
        height:62px;
        width:93px;
        }
    * html #container a.slidef {
        width:91px;
        width:93px;
        }
    #container a.slideg {
        background:url(../images/thumb/AHT-7-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slideh {
        background:url(../images/thumb/AHT-8-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidei {
        background:url(../images/thumb/AHT-9-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidej {
        background:url(../images/thumb/AHT-10-t.jpg);
        height:62px;
        width:93px;
        }
    #container a.slidek {
        background:url(../images/thumb/AHT-11-t.jpg);
        height:62px;
        width:93px;
        }
    * html #container a.slidek {
        width:91px;
        width:93px;
        }
    #container a.slidel {
        background:url(../images/thumb/AHT-12-t.jpg);
        height:60px;
        width:93px;
        }
        
    /* set the size of the unordered list to neatly house the thumbnails */
    #container ul {
          width:198px;
          height:405px;
    }
    #container li {
            float:left;
    }
    
    /* move the thumbnails into the correct position */
    #container ul {
        margin:5px;
        float:right;
        }
        
    /* change the thumbnail border color */
    #container a.gallery:hover {
        border:1px solid #fff;
        }
        
    /* styling the :hover span */
    #container a.gallery:hover span {
        position:absolute;
        width:372px;
        height:372px;
        top:10px;
        left:75px;
        color:#000;
        background:#fff;
        }
        
    #container a.gallery:hover img {
        border:1px solid #fff;
        float:left;
        margin-right:5px;
        }
        
    #container a.slideb:hover img, #container a.slidei:hover img {
        float:right;
        }
    Last edited by Paul O'B; Mar 17, 2013 at 09:49. Reason: Please use code tags when posting code

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,270
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    On the 11th slide you have specified slidea instead of slidek.

    Code:
    		<li> <a class="gallery slidea" href="#nogo"> <span> <img src="./images/AHT-11.jpg" alt="Horse tralers" title="Horse tralers" /> <br />
    						Horse tralers <br />
    						Photographed by Anderson Photography </span> </a> </li>
    				<li> <a class="gallery slidel" href="#nogo"> <span> <img src="./images/AHT-12.jpg" alt="Airplane" title="Airplane" /> <br />
    						Airplane <br />
    						Photographed by Anderson Photography </span> </a> </li>
    		</ul
    Change it to slidek and the correct thumbnail will appear.


    Code:
    				<li> <a class="gallery slidek" href="#nogo"> <span> <img src="./images/AHT-11.jpg" alt="Horse tralers" title="Horse tralers" /> <br />
    						Horse tralers <br />
    						Photographed by Anderson Photography </span> </a> </li>
    				<li> <a class="gallery slidel" href="#nogo"> <span> <img src="./images/AHT-12.jpg" alt="Airplane" title="Airplane" /> <br />
    						Airplane <br />
    						Photographed by Anderson Photography </span> </a> </li>
    		</ul>

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is GREAT news. I feel foolish to have missed something so simple and obvious, but I don't even care. Great Job finding the error, and thanks a million.

    If you ever need help with IBM's WMQ Series let me know and I will be able to return the favor (I hope).

    Cheers
    Bill


Bookmarks

Posting Permissions

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