...

View Full Version : A tutorial to do something like this



Democrazy
09-14-2011, 12:58 PM
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.

DanInMa
09-14-2011, 02:47 PM
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.
<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>



<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>

teedoff
09-14-2011, 03:00 PM
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 (http://www.dynamicdrive.com). They have lots of image galleries there for free.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum