#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Question Click thumbnail and make it larger image (image gallery) w/o javascript?


    Hi all,

    Is there a way to make a thumbnail that is clicked on, become the larger image to the left? In other words, if thumbnail image #2 is clicked, how can that image become the larger image and all the other's remain display:none?

    I know how to do this using javascript, but would like to stay away from relying on javascript if possible.

    Code:
    <table style="width:700px;">
    <tr>
    <td style="width:80%;vertical-align:top;">
    <div id="pic1">
    <img src="http://lorempixel.com/530/400/nature/1" alt="Pic1" style="border:1px solid #000"/>
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 1.</div>
    </div>
    <div id="pic2" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/2" alt="Pic2" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 2.</div>
    </div>
    <div id="pic3" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/3" alt="Pic3" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 3.</div>
    </div>
    <div id="pic4" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/4" alt="Pic4" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 4.</div>
    </div>
    <div id="pic5" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/5" alt="Pic5" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 5.</div>
    <div id="pic6" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/6" alt="Pic6" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 6.</div>
    <div id="pic7" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/7" alt="Pic7" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 7.</div>
    <div id="pic8" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/8" alt="Pic8" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 8.</div>
    <div id="pic9" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/9" alt="Pic9"  />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 9.</div>
    <div id="pic10" style="display:none;">
    <img src="http://lorempixel.com/530/400/nature/10" alt="Pic10" />
    <div style="width:95%;padding:5px;background-color:#DDDDDD;">Description 10.</div>
    </td>
    <td style="width:10%;vertical-align:top;">
    <div style="padding:0 0 2 0;"><a href="#pic1"><img src="http://lorempixel.com/65/65/nature/1" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic2"><img src="http://lorempixel.com/65/65/nature/2" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic3"><img src="http://lorempixel.com/65/65/nature/3" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic4"><img src="http://lorempixel.com/65/65/nature/4" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic5"><img src="http://lorempixel.com/65/65/nature/5" style="border:1px solid #000"></a></div><br>
    </td>
    <td style="width:10%;vertical-align:top;">
    <div style="padding:0 0 2 0;"><a href="#pic6"><img src="http://lorempixel.com/65/65/nature/6" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic7"><img src="http://lorempixel.com/65/65/nature/7" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic8"><img src="http://lorempixel.com/65/65/nature/8" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic9"><img src="http://lorempixel.com/65/65/nature/9" style="border:1px solid #000"></a></div><br>
    <div style="padding:0 0 2 0;"><a href="#pic10"><img src="http://lorempixel.com/65/65/nature/10" style="border:1px solid #000"></a></div><br>
    </td>
    </tr>
    </table>
    I'm using pic holders for demo purposes.

    I know this isn't the best way to do this, but I've tried using purely css image galleries but don't know css well enough to make all the adjustments needed to make it fit into my needs. So this code above is basically my "mock up", I"m just wondering how I can now enable the thumnails to become the main image when clicked individually.

    Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    67
    Rep Power
    0
    I haven't tried this myself... but... maybe you could use the css pseudo selector :visited...

    So... wrap your images in a link. when the use clicks the link, I should become "visited", and then you could make whatever elements you want larger using the sibling selector...

    Does this help... to vague? I'm not even sure if it would work. Remember to put a onclick="return false" on your links too....
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3
    Thanks for the reply. I went with another solution using <label>'s and radio buttons.

IMN logo majestic logo threadwatch logo seochat tools logo