Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Click thumbnail and make it larger (image gallery) w/o javascript?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #162942
    we5inelgr
    Participant

    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.

    <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. :confused:

    Thanks.

    #162998
    GroovyMotion
    Participant

    @Mottie that’s a great demo! Thanks for sharing! :)

    #163000
    we5inelgr
    Participant

    Wow. Awesome. Many thanks.

    I’m currently testing this in I.E. 9 and the main (larger) image didn’t show until I clicked ‘Combatility View.’ in the browser. Is the reason why, the ~ in the .wrapper input:checked class? Just currious.

    I got it to work without having the click the Combatibility View by including:

    <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
    

    found via the link you provided above for “Support needed for IE7 & older” Just seems strange to me that it wouldn’t work in I.E. 9

    Also, the

    <div class="full-image"></div>
    

    right after the wrapper class div, is that kind of like a placeholder? Meaning, there is nothing inside the div’s and it could be placed elsewhere in the html? Currious how that works.

    Again, many thanks!

    #163001
    we5inelgr
    Participant

    oh, and b.t.w, love the opacity on the inactive thumbs. nice touch!

    #163051
    we5inelgr
    Participant

    ah, yes. that’s what was missing (the doctype). Again, many thanks Mottie. Very good work and thanks for the education :) !!

    #255197
    raju0prt
    Participant

    where is @mottie reply?

    #255205
    Mottie
    Member

    @raju0prt I don’t have a copy of the original post I made… not sure why it’s gone now. Sorry!

    #255222
    raju0prt
    Participant

    Thanks for the reply @Mottie. I’ll try search for the solution. Thanks again.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.