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 Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Issue with CSS photo gallery

    I'm trying to make an image gallery and I'm having a small problem. When you click on one of the thumb images it disappears until you click on another thumb image, and so on. I'm want it to stay the same after clicking it but I can't figure out how. Here's my coding. Thanks ahead of time!

    <style type="text/css">
    .gallery {width:485px;padding:10px;position:relative; margin:20px 0;}
    .gallery b.default {position:absolute; left:10px; top:10px; width:530px;}
    .gallery b.default img {display:block; margin:0 auto 10px auto;border:1px solid #666;}
    .gallery ul {list-style:none; padding:0; margin:0; width:60px; position:relative; float:right;}
    .gallery ul li {display:inline; width:60px; height:85px; float:left;}
    .gallery ul li a img {width:50px; height:75px;border:1px solid #666;}
    .gallery ul li a:active, .gallery ul li a:focus {white-space:normal; border:1px solid #666;}
    .gallery ul li a:active b, .gallery ul li a:focus b {position:absolute; left:-306px; top:0; width:500px; height:435px;z-index:20;}
    .gallery ul li a:active img, .gallery ul li a:focus img {margin:0 14px 10px auto; width:auto; height:auto; border:1px solid #666;}
    </style>

    <div class="gallery"><b class="default"><img src="images/image1.jpg" alt="" /></b>
    <ul>
    <li><a href="#nogo"><b><img src="images/image1.jpg" alt="" /></b></a></li>
    <li><a href="#nogo"><b><img src="images/image2.jpg" alt="" /></b></a></li>
    <li><a href="#nogo"><b><img src="images/image3.jpg" alt="" /></b></a></li>
    <li><a href="#nogo"><b><img src="images/image4.jpg" alt="" /></b></a></li>
    </ul>
    </div>

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    your .gallery ul li a:active is set to a negative value (left: -306px so it's moving so far to the left that it's no longer visible on the screen
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • Users who have thanked marilynn.fowler for this post:

    vjoho (04-13-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    I know you have put a lot of work into the gallery and trying to stick with CSS only, but there some great JQuery image setups that make image galleries just so easy to use. Lightbox and Shadowbox are two examples that come to mind.

    Lightbox 2: http://www.huddletogether.com/projects/lightbox2/
    Shedding Some Light on Lightbox: http://www.webreference.com/programm...ript/Lightbox/
    VisualLightBox is a free wizard program that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code: http://lightbox2.com/lightbox2-how.html

    Shadowbox (Like Lightbox): http://www.shadowbox-js.com/

    These are just suggestions as you probably have a layout already in mind you want to use.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    vjoho (04-13-2011)

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah I actually changed my gallery to an awesome jquery gallery I saw that had a zoom function. I didn't test out what you said marilynn.fowler but you are probably right. Before I had set up that gallery to use a hover function and then changed it to show the larger image only when active rather then hover. Thanks for the links

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    You're welcome. Forgot to mention the nice zoom function. :P
    ☠ ☠RON☠ ☠


  •  

    Tags for this Thread

    Posting Permissions

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