Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create a simple CSS gallery without using JavaScript

How to create a simple CSS gallery without using JavaScript

How to create a simple CSS gallery without using JavaScript
 
  • Currently 3.5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 3.5/5 (4 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article demonstrates how to create a simple gallery using only CSS.

The most interesting part is that the gallery replaces the main picture if you click on thumbnails usually this is only possible if you use JavaScript. As a rule, only JavaScript can work with click events.

This gallery uses a trick with anchors in tags a.

HTML code

The gallery consists of two blocks of pictures. One block contains small pictures (thumbnails), and the other large ones.

The gallery can only work if all anchors are unique, like these: pic1, pic2, pic3, pic4, pic5.

<div id="gallery">
  <ul id="navigation">
    <li><a href="#pic1"><img alt="" src="small_nature1.jpg" /></a></li>
    <li><a href="#pic2"><img alt="" src="small_nature2.jpg" /></a></li>
    <li><a href="#pic3"><img alt="" src="small_nature3.jpg" /></a></li>
    <li><a href="#pic4"><img alt="" src="small_nature4.jpg" /></a></li>
    <li><a href="#pic5"><img alt="" src="small_nature5.jpg" /></a></li>
  </ul>
  <div id="full-picture">
    <div><a name="pic1"></a><img alt="" src="large_nature1.jpg" /></div>
    <div><a name="pic2"></a><img alt="" src="large_nature2.jpg" /></div>
    <div><a name="pic3"></a><img alt="" src="large_nature3.jpg" /></div>
    <div><a name="pic4"></a><img alt="" src="large_nature4.jpg" /></div>
    <div><a name="pic5"></a><img alt="" src="large_nature5.jpg" /></div>
  </div>
</div>

CSS code

The block with large pictures must have the width which is equal to the width of one of the large pictures. Also CSS property overflow must have hidden set as a value for this block. Pictures with anchor links must be inside of this block. 

Small pictures must have links with the corresponding anchors which relate them with large pictures.

As a result, after clicking on a small picture, a corresponding large picture will be shown in another block (block with large pictures), actually, technically speaking, it will be scrolled to the corresponding picture in this block.

#gallery {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;
}

#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
}

#navigation li {
  padding: 0;
  margin: 0;
  float: left;
  clear: both;
}

#navigation li a img {
  display: block;
  border: none;
}

#navigation li a {
  display: block;
}

#full-picture {
  width: 500px;
  height: 375px;
  overflow: hidden;
  float: left;
}

Live demo


 

Read also

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Details about "float" property

Details about "float" property

Discussion (total 7 comments)

Dimitris
July 04, 2013 at 01:43 am
Hello,
I use your code and I have three problems
1.If I click on thumbnail then the page go up
2.The full-picture have a red board and I can't remove it
3. I can't add a href in a full-picture

Thanks in advance Dimitris from Greece
Gary Horne
July 04, 2013 at 04:40 am
Great tutorial, thanks.

How could I have 2 columns of thumbnails on the left.

would it be another <ul>

Thanks
Administrator User
Administrator User
July 04, 2013 at 06:40 am
Hello Dimitris!
You have to understand that the gallery uses a trick. So, this gallery was created to show that it's possible to do: pseudo click without JavaScript. I would recommend not to use it for live sites. For such purposes you need to use JavaScript (jQuery) gallery or CSS3 gallery.
Answers on your questions:
1. You can do with CSS3 by pseudo-class target, if you really need it I can do a simple example of using it.
2. I can't see it.
3. You can, just add image inside tag a:
<div id="full-picture">
  <div><a name="pic1"></a><a href="http://basicuse.net"><img alt="" src="large_nature1.jpg"></a></div>
  ...
</div>

Hello Gary Horne!
It can be done by many ways, but yours is the simplest one. Just add one more column after another and increase the width of an element #gallery from 600px to 700px. I have checked, it works for me.
Dimitris
July 04, 2013 at 07:02 am
Thank you for your reply.
Now I understand the code. You are right, I have to use another code with javascript.
However your gallery is amazing. Smart trick!
Norman
July 23, 2013 at 11:18 pm
ON reply of Dimitris number 1
1. You can do with CSS3 by pseudo-class target, if you really need it I can do a simple example of using it.

i really need an example. can u do that?
thanks a lot!!
Administrator User
Administrator User
July 25, 2013 at 01:11 am
Sorry for misunderstanding, but I tried to use target selector in CSS3 and the page was still scrolling to the top. As I know there is no way to prevent this.
Here is article which uses target selector, but has the same problem:
http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3
Administrator User
Administrator User
September 24, 2013 at 06:13 am
Everybody who wanted to know how to do the image slider without page scrolling using only CSS3, read this article:
http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3_without_page_scrolling

Post comment

Quick navigation

basicuse.net
106160485398655174790
html5_css

General navigation