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 3 of 3
  1. #1
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts

    A tutorial to do something like this

    Anyone know where there is a tutorial around that teaches one how to make a CSS image gallery such as this?

    http://www.cssplay.co.uk/menu/photo_album#nogo

    I contacted the guy that made the site and asked if he made a tutorial... his response was theres no need as you can just look at the source code............. right. Great tutorial... and the source code for that page looks like an atomcc bomb hit it to a noob.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    his code is pretty much semantic. all you needed was the basic html structure and his stylesheet. judging from his answer you are free to use it.
    Code:
    <div id="info">
    
    
    
    <h2>A simple CSS photo-album</h2>
    
    <h3>31th July 2006</h3>
    
    
    
    <div id="album">
    
    <ul class="gallery">
    
    <li><a href="#nogo" tabindex="1">01<img class="landscape" src="gallery/landscape_1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li>
    
    <li><a href="#nogo" tabindex="1">02<img class="landscape" src="gallery/landscape_2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li>
    
    <li><a href="#nogo" tabindex="1">03<img class="portrait" src="gallery/portrait_1.jpg" alt="portrait image 1" title="portrait image 1" /></a></li>
    
    <li><a href="#nogo" tabindex="1">04<img class="portrait" src="gallery/portrait_2.jpg" alt="portrait image 2" title="portrait image 2" /></a></li>
    
    <li><a href="#nogo" tabindex="1">05<img class="landscape" src="gallery/landscape_3.jpg" alt="landscape image 3" title="landscape image 3" /></a></li>
    
    <li><a href="#nogo" tabindex="1">06<img class="portrait" src="gallery/portrait_3.jpg" alt="portrait image 3" title="portrait image 3" /></a></li>
    
    <li><a href="#nogo" tabindex="1">07<img class="landscape" src="gallery/landscape_4.jpg" alt="landscape image 4" title="landscape image 4" /></a></li>
    
    <li><a href="#nogo" tabindex="1">08<img class="landscape" src="gallery/landscape_5.jpg" alt="landscape image 5" title="landscape image 5" /></a></li>
    
    <li><a href="#nogo" tabindex="1">09<img class="portrait" src="gallery/portrait_4.jpg" alt="portrait image 4" title="portrait image 4" /></a></li>
    
    <li><a href="#nogo" tabindex="1">10<img class="portrait" src="gallery/portrait_5.jpg" alt="portrait image 5" title="portrait image 5" /></a></li>
    
    </ul>
    
    </div>
    
    
    
    
    
    </div>
    Code:
    <style type="text/css">
    
    /* default link style - needed to make the :active work correctly in IE */
    
    a, a:visited, a:hover, a:active {
    
    color:#000;
    
    }
    
    /* style the outer cntaining div to fit the landscape, portrait and buttons */
    
    #album {
    
    width:320px; 
    
    height:360px; 
    
    background:#eee url(gallery/deer.jpg) 0 40px no-repeat;
    
    border:1px solid #aaa;
    
    margin:0 auto 20px auto;
    
    }
    
    /* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
    
    .gallery {
    
    padding:0; 
    
    margin:320px 0 0 0; 
    
    list-style-type:none; 
    
    position:relative; 
    
    width:320px;
    
    }
    
    /* remove the default image border */
    
    .gallery img {
    
    border:0;
    
    }
    
    /* make the list horizontal */
    
    .gallery li {
    
    float:left;
    
    }
    
    /* style the link text to be central in a surrounding box */
    
    .gallery li a, .gallery li a:visited {
    
    font-size:11px;
    
    float:left; 
    
    text-decoration:none; 
    
    color:#000; 
    
    background:#fff; 
    
    text-align:center; 
    
    width:26px; 
    
    height:26px; 
    
    line-height:24px; 
    
    border:1px solid #444;
    
    margin:2px;
    
    }
    
    /* position the images using an absolute position and hide them from view */
    
    .gallery li a img {
    
    position:absolute; 
    
    top:-320px; 
    
    left:0; 
    
    visibility:hidden; 
    
    border:0;
    
    }
    
    /* fix the top position for the landscape images */
    
    .gallery li a img.landscape {
    
    top:-280px;
    
    }
    
    /* fix the left position for the portrait images */
    
    .gallery li a img.portrait {
    
    left:0;
    
    border-left:40px solid #eee;
    
    border-right:40px solid #eee;
    
    }
    
    /* style the hover background color for the text boxes */
    
    .gallery li a:hover {
    
    background:#ddd;
    
    }
    
    /* style the active/focus colors for the text boxes (required for IE) */
    
    .gallery li a:active, .gallery li a:focus {
    
    background:#444; 
    
    color:#fff;
    
    outline:0;
    
    }
    
    /* make the images visible on active/focus */
    
    .gallery li a:active img, .gallery li a:focus img {
    
    visibility:visible;
    
    outline:0;
    
    }
    
    </style>

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Democrazy View Post
    Anyone know where there is a tutorial around that teaches one how to make a CSS image gallery such as this?

    http://www.cssplay.co.uk/menu/photo_album#nogo

    I contacted the guy that made the site and asked if he made a tutorial... his response was theres no need as you can just look at the source code............. right. Great tutorial... and the source code for that page looks like an atomcc bomb hit it to a noob.
    Alternatively, you can go to dynamicdrive.com. They have lots of image galleries there for free.
    Teed


  •  

    Posting Permissions

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