Threaded Mode | Linear Mode

*tommy* · 03-10-2011 07:09 AM

In this tutorial I will show you how to create a cool looking, killer photogallery using the latest coding techniques.

We will use the new HTML5 language, CSS3 and jQuery cross-browser JavaScript library.

You can check how it will look like by visiting the demo gallery, click here to see the demo.

This tutorial only shows the front end.

Step 1

First let's create the base of our HTML document:

Code:

<!DOCTYPE html>

<html>

  <head>

    <title>Photogallery Demo - HTML5, CSS3, jQuery</title>

    <meta charset="utf-8">

  </head>

  <body>

    <!-- ... -->

  </body>

</html>

As you can see, with the new HTML the Doctype thingy became more friendly and easier, and with the help of the new meta declaration it's really easy to determine the charset of our site.

Let's create the body of our document:

Code:

<body>

  <div id="pagewrap">

    <header>

      <!-- HEADER -->

    </header>

    <section id="content">

      <!-- MAIN CONTENT -->

    </section>

    <footer>

      <!-- FOOTER -->

    </footer>

  </div>

</body>

The page will consists of 3 parts, a header, the main content and the footer.

We have a lot more tags at our disposal with HTML5 now, so our code will look more clear and coherent.

For now the header will only have an <h1> tag with the name of the gallery.

Code:

<header>

  <h1>NAME of YOUR GALLERY</h1>

</header>

The main stuff comes within the section

Code:

<section id="content">

  <ul id="filter"> </ul>

  <div class="clear"> </div>

  <ul id="photos"> </ul>

  <div class="clear"> </div>

</section>

Filter will have the filter links and the photos obviously the images.

Code:

<ul id="filter">

  <li><a href="#all">All</a></li>

  <li><a href="#europe">Europe</a></li>

  <li><a href="#africa">Africa</a></li>

  <li><a href="#usa">United States</a></li>

</ul>

The 'photos' will have a little bit more content:

Code:

<ul id="photos">

  <li>

    <a rel="gal" class="gallery" href="images/europe1.jpg">

      <img src="images/europe1_thumb.jpg" alt="Europe 1" title="Europe 1" />

    </a>

    <span class="help">europe</span>

    <div class="mask"> </div>

  </li>

  <li>

    <a rel="gal" class="gallery" href="images/usa1.jpg">

      <img src="images/usa1_thumb.jpg" alt="USA 1" title="USA 1" />

    </a>

    <span class="help">usa</span>

    <div class="mask"> </div>

  </li>

  <!-- etc... -->

</ul>

What we have here is a thumbnail with a link that points to the larger image. The 'rel' and 'class' attribute will be used by the fancybox image viewer.

Our footer has only the copyright info:

Code:

<footer>

    &copy;Gallery 2011.

  </footer>

*tommy* · 03-10-2011 07:10 AM

Step 2 Creating the style (CSS)

First we'll have to create a .css file, let's call it gallery.css. We have to call it in the head section of our document, like this:

Code:

<head>

  <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" />

</head>

Let's create the default styles:

Code:

/* html5 */

header,footer,section{ display:block; }

/* Default */

h1,ul{ margin:0; padding:0; }

ul{ list-style:none; }

img{ border:none; }

body{

  margin:0;

  padding:0;

  text-align:center;

  color:#333;

  font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;

  font-size:13px;

  letter-spacing:-1px;

}

We add a 'display:block;' setting to our new HTML5 elements so they will act basically like a div.

Now let's give a style to the h1 and to the header

Code:

h1{

  padding:32px 0 0 0;

  font-size:20px;

  font-weight:normal;

  text-align:center;

  text-shadow:1px 1px #eee;

}

header{

  height:90px;

  background:#e7e7e7;

  background: -moz-linear-gradient(0% 100% 90deg, #d4d4d4, #e7e7e7);

  background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#d4d4d4), to(#e7e7e7));

  -moz-border-radius:4px;

  -webkit-border-radius:4px;

  border-radius:4px;

  -moz-box-shadow:0 0 5px #acacac;

  -webkit-box-shadow:0 0 5px #acacac;

  box-shadow:0 0 5px #acacac;

}

Now let's do the pagewrap:

Code:

#pagewrap{

  margin:10px auto 0 auto;

  width:960px;

  text-align:left;

}

The top margin will be 10px, the left and right margin is set to auto, width is set to 960px so it will be ok with a 1024×768 resolution as well. Since we applied a center alignment for the body, here in the pagewrap we have to reset it to left.

The main content gets a top and bottom margin of 10 px so it's separated from the header and the footer.

Code:

#content{

  margin:10px 0;

}

Code:

#filter{

  float:left;

  display:inline;

}

#filter li{

  float:left;

  display:inline;

  margin:0 4px 0 0;

  padding:12px 20px;

  background:white;

  border:1px solid white;

}

Code:

#filter li:hover{

  cursor:pointer;

  background:#e7e7e7;

  border:1px solid #ccc;

  -moz-border-radius:2px;

  -webkit-border-radius:2px;

  border-radius:2px;

  -moz-box-shadow: inset 0 0 4px #cfcfcf;

  -webkit-box-shadow: inset 0 0 4px #cfcfcf;

  box-shadow: 0 0 4px #cfcfcf inset;

}

#filter .active,

#filter .active:hover{

  cursor:default;

  background:#e7e7e7;

  border:1px solid #ccc;

  -moz-border-radius:2px;

  -webkit-border-radius:2px;

  border-radius:2px;

  -moz-box-shadow: inset 0 0 4px #cfcfcf;

  -webkit-box-shadow: inset 0 0 4px #cfcfcf;

  box-shadow: 0 0 4px #cfcfcf inset;

}

Here we need the .active class, it will be used by the javascript later.

Code:

#filter li a,

#filter li a:hover,

#filter li:hover a,

#filter li:hover a:hover{

  color:black;

  text-decoration:none;

}

This part is responsible for the photo list:

Code:

#photos{

  float:left;

  display:inline;

  margin:0 0 0 16px;

}

#photos li{

  float:left;

  display:inline;

  position:relative;

  margin:10px 12px 0 0;

  width:220px;

  height:146px;

  border:1px solid #e3e3e3;

  -moz-border-radius:4px;

  -webkit-border-radius:4px;

  border-radius:4px;

  text-align:center;

}

#photos li:hover{

  border:1px solid #b5b5b5;

  -moz-box-shadow:0 0 4px #b5b5b5;

  -webkit-box-shadow:0 0 4px #b5b5b5;

  box-shadow:0 0 4px #b5b5b5;

}

Code:

#photos li img{

  max-width:200px;

  margin:6px auto 0 auto;

}

#photos li .help{

  display:none;

}

#photos li .mask{

  position:absolute;

  display:none;

  left:0;

  top:0;

  width:100%;

  height:100%;

  z-index:10;

  background:rgba(0,0,0,0.7);

  -moz-border-radius:4px;

  -webkit-border-radius:4px;

  border-radius:4px;

}

Code:

.clear{

  clear:both;

}

*tommy* · 03-10-2011 07:11 AM

Step 3: JavaScript (jQuery)

First we need to add some JavaScript file to our header:

Code:

<head>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <!--[if IE]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

  <![endif]-->

  <script src="fancybox/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

  <script src="fancybox/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

  <script src="gallery.js"></script>

</head>

OK, some explanation for this.

The first file is the jQuery framework. You can download it and use it from your own site, but hey, it's a lot easier.

The next file will make sure that browsers that don't support HTML5 will display our gallery properly.

File #3 and 4 is an image viewer (FancyBox)

and finally the gallery.js that will contain our code.

This is our JavaScript code:

Code:

$(document).ready(function(){

  //variables (cache):

  var hash = '',

      help = '',

      href = '',

      picHref = '',

      filter = $('#filter'),

      filter_item = '',

      photos = $('#photos'),

      photo_list_item = '',

      mask = '';

  //hash:

  $(window).bind('hashchange',function(){

    hash = window.location.hash.substring(1);

    if (!hash || hash == '') hash = 'all';

    //mask creation:

    photos.children().each(function(){

      photo_list_item = $(this);

      mask = $(this).find('.mask');

      help = $(this).find('.help').html();

      picHref = photo_list_item.find('a');

      if (help !== hash && hash !== 'all'){

        mask.fadeIn(1000);

        //image removal from gallery:

        picHref.attr('rel','');

      }else{

        picHref.attr('rel','gal');

        if (mask.css('display') !== 'none') mask.fadeOut(0);

      }

    });

    //filter modification:

    filter.children().each(function(){

      filter_item = $(this);

      href = $(this).find('a').attr('href');

      if (filter_item.hasClass('active')) filter_item.removeClass('active');

      if (href == '#' + hash) filter_item.addClass('active');

    });

  });

  $(window).trigger('hashchange');

  //fancybox:

  $('a.gallery').fancybox();

});

That's it

*boon* · 08-08-2011 12:24 AM

Thanks this is great.

*raja* · 02-19-2012 11:34 AM

This is a grate tutorial. thanks for sharing

Threaded Mode \| Linear Mode Coding Create a Photogallery using HTML5, CSS3 and jQuery
Author	Message