HTML & CSS Book (English)

Step 13 Adding Photo Gallery

Step 13 Adding Photo Gallery

Adding Photo Gallery In the photo gallery page you will have the thumbnails of the images. A thumbnail is small version of an image. When you click the thumbnails, the original image will be opened in a new page.

  • Collect your images and prepare the thumbnails of your images with the size of 200×150 pixels using photo editor software.
  • Copy all images (including thumbnails) to the Images folder.
  • Create the PhotoGallery.html and add the following codes in the content division to create a table with three rows and three columns (Picture X.49). The rows are created with the <tr> (table row) tags. In each row, the columns are created with the <td> (table data) tags.

 

Picture X.49: Creating a tabel with three rows and three columns.

  • Add the thumbnail images and hyperlinks within the <td> tags (Picture X.50). The hyperlinks are given not to the pages but images. Since the value of target attribute is blank ( target=”_blank”), the images will open in a new window.

 

Picture X.50: Adding the thumbnail images and their hyperlinks.

You can define a CSS class for your table.

  • Add class attiribute to the <table> tag to format it with CSS rules: <table class=”tformat”>
  • Add the class selectors to the StyleSheet.css file to format the table (Picture X.51).

 

Picture X.51: Adding CSS class selectors to format the table.

  • Save and run the page to see the result (Picture X.52).

Adding Photo Gallery

Picture X.52: The photo gallery.

  • Click any thumbnail to see that a big version of the image opens in a new window (Picture X.53).

Picture X.53: Opening full-size photo in a new browser window.

Practice: Image Gallery

There are many JavaScript and jQuery image galleries in on the Web you can download and use in your Web sites. Those galleries include slideshow, transition effects, multiple album options, CSS skinning and much more. Google the image galleries on the Web and use any of them in the PhotoGallery.html page to enhance usability and design of the project. There is a sample image gallery in the Picture X.54.

Adding Photo Gallery

Picture X.54: A sample image gallery.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *