dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help editing a CSS or alternative javascript gallery? How to make it on click?

  1. #1
    Join Date
    Dec 2010
    Posts
    4

    Unhappy Help editing a CSS or alternative javascript gallery? How to make it on click?

    Please assume you're speaking to a novice who has built a website by piecing together html.

    I'm using this gallery for images of album covers, so when you hover your mouse over a thumbnail it comes up with the big album art, with one mp3 player etc. I've got this working fine. This is the original code I've been editing (without any of my changes):

    http://www.cssplay.co.uk/articles/ga...s/gallery.html

    The problem is I can't figure out how to make the big image/info stay when I CLICK, rather then hover. (At the moment it disappears as soon as you move your mouse away). I don't mind it changing when you hover over the thumbnails, but I want it so that as soon as you click, that image stays in the main left hand side of the page until you click another.

    Whats the code for this and where do I add it in to the original code? I tried piecing it in but it didn't work. Simple explanations please with exactly what I need to write and where I need to put it would be hugelyyyy helpful!!
    Please help.

    Thanks!

  2. #2
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    You need to use the :focus pseudo-class to handle the mouse clicks. Use the same styles for it as for the hover class. For :hover, set z-index property to a higher value than that of a base span. That way, the image will not be blocked by the currently selected ( :focus(ed) ) image. See the parts of the code highlighted in red.
    Note: if you don't want to display the image on hover, simply remove the :hover code (code located between /* HOVER START */ and /* HOVER END */ comment delimiters).

    Hope this helps.

    Code:
    /*** MODIFIED CSS START ***/
    #container a.gallery span {position:absolute; display: block; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden; z-index: 1;}
    
    /* HOVER START */
    #container a.gallery:hover {border:1px solid #fff;}
    #container a.gallery:hover img {border:4px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff; z-index: 10;}
    /* HOVER END */
    
    #container a.gallery:focus {border:1px solid #fff;}
    #container a.gallery:focus img {border:1px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:focus img, #container a.slidei:focus img {float:right;}
    #container a.gallery:focus span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
    /*** MODIFIED CSS END ***/

  3. #3
    Join Date
    Dec 2010
    Posts
    4
    Thanks so much for that reply!!

    Sounds like it will work which fills me with hope -
    Unfortunately I didn't understand a word. Where do I put it in the exiting code? It (to me) doesn't look like I just place it as it isnt in triangle brackets?

    Sorry for being so ignorant! Please don't give up on me, I really need to get this working!

    Thank you so much for the effort

  4. #4
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Sure, no problem.

    Here is the complete CSS code:

    Simply replace <style type="text/css"></style> and whatever code that goes between them with this:

    Code:
    <style type="text/css">
    body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
    
    #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; background:#fff url(http://www.cssplay.co.uk/articles/gallery/images/back.jpg) 75px 10px no-repeat; border:1px solid #aaa;}
    
    #container ul {width:198px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}
    
    #container li {float:left;}
    
    #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(http://www.cssplay.co.uk/articles/gallery/images/p1_t.jpg); height:93px; width:60px;}
    #container a.slideb {background:url(http://www.cssplay.co.uk/articles/gallery/images/p2_t.jpg); height:93px; width:60px;}
    #container a.slidec {background:url(http://www.cssplay.co.uk/articles/gallery/images/p3_t.jpg); height:93px; width:60px;}
    #container a.slided {background:url(http://www.cssplay.co.uk/articles/gallery/images/p4_t.jpg); height:60px; width:93px;}
    * html #container a.slided {width:91px; w\idth:93px;}
    #container a.slidee {background:url(http://www.cssplay.co.uk/articles/gallery/images/p5_t.jpg); height:60px; width:93px;}
    #container a.slidef {background:url(http://www.cssplay.co.uk/articles/gallery/images/p6_t.jpg); height:60px; width:93px;}
    * html #container a.slidef {width:91px; w\idth:93px;}
    #container a.slideg {background:url(http://www.cssplay.co.uk/articles/gallery/images/p7_t.jpg); height:60px; width:93px;}
    #container a.slideh {background:url(http://www.cssplay.co.uk/articles/gallery/images/p8_t.jpg); height:93px; width:60px;}
    #container a.slidei {background:url(http://www.cssplay.co.uk/articles/gallery/images/p9_t.jpg); height:93px; width:60px;}
    #container a.slidej {background:url(http://www.cssplay.co.uk/articles/gallery/images/p10_t.jpg); height:93px; width:60px;}
    #container a.slidek {background:url(http://www.cssplay.co.uk/articles/gallery/images/p11_t.jpg); height:60px; width:93px;}
    * html #container a.slidek {width:91px; w\idth:93px;}
    #container a.slidel {background:url(http://www.cssplay.co.uk/articles/gallery/images/p12_t.jpg); height:60px; width:93px;}
    
    /*** MODIFIED CSS START ***/
    #container a.gallery span {position:absolute; display: block; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden; z-index: 1;}
    
    
    #container a.gallery:hover {border:1px solid #fff;}
    #container a.gallery:hover img {border:4px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff; z-index: 10;}
    
    #container a.gallery:focus {border:1px solid #fff;}
    #container a.gallery:focus img {border:1px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:focus img, #container a.slidei:focus img {float:right;}
    #container a.gallery:focus span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
    /*** MODIFIED CSS END ***/
    
    </style>

  5. #5
    Join Date
    Dec 2010
    Posts
    4
    Did exactly what you said (understood this time, ha thank you!) but its still not working. Hover is, click isnt. Again, apologies if i'm being stupid....

    Heres the entire code, the original from the link I gave you, with your alterations but none of mine (to keep it simple):


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title> it's a dogs life - photo gallery</title>
    <meta name="Author" content="Stu Nicholls" />

    <style type="text/css">
    body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}

    #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; background:#fff url(http://www.cssplay.co.uk/articles/ga...mages/back.jpg) 75px 10px no-repeat; border:1px solid #aaa;}

    #container ul {width:198px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}

    #container li {float:left;}

    #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(http://www.cssplay.co.uk/articles/ga...ges/p1_t.jpg); height:93px; width:60px;}
    #container a.slideb {background:url(http://www.cssplay.co.uk/articles/ga...ges/p2_t.jpg); height:93px; width:60px;}
    #container a.slidec {background:url(http://www.cssplay.co.uk/articles/ga...ges/p3_t.jpg); height:93px; width:60px;}
    #container a.slided {background:url(http://www.cssplay.co.uk/articles/ga...ges/p4_t.jpg); height:60px; width:93px;}
    * html #container a.slided {width:91px; w\idth:93px;}
    #container a.slidee {background:url(http://www.cssplay.co.uk/articles/ga...ges/p5_t.jpg); height:60px; width:93px;}
    #container a.slidef {background:url(http://www.cssplay.co.uk/articles/ga...ges/p6_t.jpg); height:60px; width:93px;}
    * html #container a.slidef {width:91px; w\idth:93px;}
    #container a.slideg {background:url(http://www.cssplay.co.uk/articles/ga...ges/p7_t.jpg); height:60px; width:93px;}
    #container a.slideh {background:url(http://www.cssplay.co.uk/articles/ga...ges/p8_t.jpg); height:93px; width:60px;}
    #container a.slidei {background:url(http://www.cssplay.co.uk/articles/ga...ges/p9_t.jpg); height:93px; width:60px;}
    #container a.slidej {background:url(http://www.cssplay.co.uk/articles/ga...es/p10_t.jpg); height:93px; width:60px;}
    #container a.slidek {background:url(http://www.cssplay.co.uk/articles/ga...es/p11_t.jpg); height:60px; width:93px;}
    * html #container a.slidek {width:91px; w\idth:93px;}
    #container a.slidel {background:url(http://www.cssplay.co.uk/articles/ga...es/p12_t.jpg); height:60px; width:93px;}

    /*** MODIFIED CSS START ***/
    #container a.gallery span {position:absolute; display: block; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden; z-index: 1;}


    #container a.gallery:hover {border:1px solid #fff;}
    #container a.gallery:hover img {border:4px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff; z-index: 10;}

    #container a.gallery:focus {border:1px solid #fff;}
    #container a.gallery:focus img {border:1px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:focus img, #container a.slidei:focus img {float:right;}
    #container a.gallery:focus span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
    /*** MODIFIED CSS END ***/
    </style>
    </head>
    <!--[if lte IE 6]>
    <style>
    #ads {display:none;}
    #adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
    </style>
    <![endif]-->

    <body>
    <h2>TUTORIAL</h2>
    <h2>Creating an Photograph Gallery using CSS only</h2>

    <div id="container">
    <ul>
    <li><a class="gallery slidea" href="#nogo"><span><img src="../images/p1.jpg" alt="Alpha" title="Alpha" /><br />ALPHA<br />Photographed by Dorota Mrowka, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slideb" href="#nogo"><span><img src="../images/p2.jpg" alt="Minie" title="Minie" /><br />MINIE<br />Photographed by Josť Antonio Assis, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slidec" href="#nogo"><span><img src="../images/p3.jpg" alt="Megan" title="Megan" /><br />MEGAN<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slided" href="#nogo"><span><img src="../images/p4.jpg" alt="Nancy" title="Nancy" /><br />NANCY<br />Photographed by Philip Keller, courtesy of the stock.xchng</span></a></li>

    <li><a class="gallery slidee" href="#nogo"><span><img src="../images/p5.jpg" alt="Missy" title="Missy" /><br />MISSY &amp; PANDA<br />Photographed by Kat Shurtz, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slidef" href="#nogo"><span><img src="../images/p6.jpg" alt="Stray pup" title="Stray pup" /><br />STRAY PUP<br />Photographed by Bethan Hazell, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slideg" href="#nogo"><span><img src="../images/p7.jpg" alt="Rolo" title="Rolo" /><br />ROLO<br />Photographed by Paul Leach, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slideh" href="#nogo"><span><img src="../images/p8.jpg" alt="Gigio" title="Gigio" /><br />GIGIO<br />Photographed by Davide Guglielmo, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slidei" href="#nogo"><span><img src="../images/p9.jpg" alt="Westy pup" title="Westy Pup" /><br />WESTY PUP<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>

    <li><a class="gallery slidej" href="#nogo"><span><img src="../images/p10.jpg" alt="Giga Byte" title="Fishing" /><br />GIGA BYTE<br />Photographed by Jefras, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slidek" href="#nogo"><span><img src="../images/p11.jpg" alt="Puppy" title="Puppy" /><br />PUPPY<br />Photographed by Clodiney Cruz, courtesy of the stock.xchng</span></a></li>
    <li><a class="gallery slidel" href="#nogo"><span><img src="../images/p12.jpg" alt="Buffy" title="Buffy" /><br />BUFFY<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
    </ul>
    </div>
    <div id="ads">
    <object data="ads.htm" type="text/html" width="728" height="90"></object>
    </div>
    <!--[if lte IE 6]>
    <div id="adsie">
    <script type="text/javascript">
    google_ad_client = "pub-6651950180071236";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "FFFFFF";
    google_color_bg = "FFFFFF";
    google_color_link = "697210";
    google_color_url = "E09222";
    google_color_text = "330000";
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
    <![endif]-->


    </body>
    </html>

  6. #6
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Unfortunately :focus doesn't work on Safari (and probably not on IE either) only on FireFox. I am sorry for the confusion.
    I don't know if this works for you, but I added the feature you needed using JavaScript:

    Just copy this code like before (replacing the <style></style> tags) and <script></script> tags that appear underneath them are the JavaScript needed to handle the mouse click event.



    Code:
    <style type="text/css">
    body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
    
    #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; background:#fff url(http://www.cssplay.co.uk/articles/gallery/images/back.jpg) 75px 10px no-repeat; border:1px solid #aaa;}
    
    #container ul {width:198px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}
    
    #container li {float:left;}x
    
    #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(http://www.cssplay.co.uk/articles/gallery/images/p1_t.jpg); height:93px; width:60px;}
    #container a.slideb {background:url(http://www.cssplay.co.uk/articles/gallery/images/p2_t.jpg); height:93px; width:60px;}
    #container a.slidec {background:url(http://www.cssplay.co.uk/articles/gallery/images/p3_t.jpg); height:93px; width:60px;}
    #container a.slided {background:url(http://www.cssplay.co.uk/articles/gallery/images/p4_t.jpg); height:60px; width:93px;}
    * html #container a.slided {width:91px; w\idth:93px;}
    #container a.slidee {background:url(http://www.cssplay.co.uk/articles/gallery/images/p5_t.jpg); height:60px; width:93px;}
    #container a.slidef {background:url(http://www.cssplay.co.uk/articles/gallery/images/p6_t.jpg); height:60px; width:93px;}
    * html #container a.slidef {width:91px; w\idth:93px;}
    #container a.slideg {background:url(http://www.cssplay.co.uk/articles/gallery/images/p7_t.jpg); height:60px; width:93px;}
    #container a.slideh {background:url(http://www.cssplay.co.uk/articles/gallery/images/p8_t.jpg); height:93px; width:60px;}
    #container a.slidei {background:url(http://www.cssplay.co.uk/articles/gallery/images/p9_t.jpg); height:93px; width:60px;}
    #container a.slidej {background:url(http://www.cssplay.co.uk/articles/gallery/images/p10_t.jpg); height:93px; width:60px;}
    #container a.slidek {background:url(http://www.cssplay.co.uk/articles/gallery/images/p11_t.jpg); height:60px; width:93px;}
    * html #container a.slidek {width:91px; w\idth:93px;}
    #container a.slidel {background:url(http://www.cssplay.co.uk/articles/gallery/images/p12_t.jpg); height:60px; width:93px;}
    
    /*** MODIFIED CSS START ***/
    #container a.gallery span {position:absolute; display: block; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden; z-index: 1;}
    
    /* 
    #container a.gallery:hover {border:1px solid #fff;}
    #container a.gallery:hover img {border:4px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff; z-index: 10;}
    */
    
    #container a.gallery.focus {border:1px solid #fff;}
    #container a.gallery.focus img {border:1px solid #fff; float:left; margin-right:5px;}
    #container a.slideb.focus img, #container a.slidei:focus img {float:right;}
    #container a.gallery.focus span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
    /*** MODIFIED CSS END ***/
    
    </style>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {						   
    	$('a.gallery').click(function() {
    		$('a.gallery').removeClass('focus');
    		$(this).addClass('focus');
    		
    		return false;
    	});
    });
    </script>

    Also, if you wish to add the hover effect as well, un-comment (remove /* */) from this piece of code:
    Code:
    /* 
    #container a.gallery:hover {border:1px solid #fff;}
    #container a.gallery:hover img {border:4px solid #fff; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff; z-index: 10;}
    */

  7. #7
    Join Date
    Dec 2010
    Posts
    4
    BRILLIANT!!! Thank you SO much!

    So at the moment the javascript works in firefox, but not google chrome. Obviously I'm aiming for it to work on all browsers if I can. Any idea how to make this compatible across all browsers?

    You're amazing I truely appreciate the help and time, thank you.

  8. #8
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Are you sure about the Google Chrome thing? Because it works fine when I test it. Could you perhaps send me a link to your work, so I can look at it?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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