Simple yet effective animated photo gallery in CSS and JavaScript

Requirements: HTML (basic understanding), JavaScript (very basic understanding), CSS (basic understanding)

Whether you’re creating a photography website or a personal webpage, there are many uses for a sliding gallery. I’m going to show you an extremely simple way to make a beautiful navigable gallery with animated slides, automatic timing, and little load time. It’s super easy to use, customize, and expand!

Click here to see a demo!

 

The Code

First, let’s start with the JavaScript. I’ll explain what each section does after the code. Put the following somewhere between your and tags or in a separate .js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script>
    var slideshow;
    var galleryspeed = 5000; /* Change for time in milliseconds your gallery switches slides */
    var bgcol = "#333333" /* Background colour of the gallery switch buttons */
    var fgcol = "#ee6000" /* Foreground colour of the gallery switch buttons */
    var swidth = 1300 /* width of slides in pixels */ 
    var gallerynum = 0;

    function onLoad () {
            gallerynum = document.getElementsByClassName("galleryslide").length;
            loadgallery();
    }

    function loadgallery() {
        
        document.getElementById("gallerysliderstage").style.width = (swidth * gallerynum) + "px";
        for (i=0; i<gallerynum; i++) {
            var newHTML = document.getElementById("galleryswitcher").innerHTML + "<div class='gswb' id='gswb' onclick='clickbutton(" + i + ")'></div>"
            document.getElementById("galleryswitcher").innerHTML = newHTML;
        }
        document.getElementsByClassName("gswb").item(0).style.backgroundColor = fgcol;
        document.getElementsByClassName("gswb").item(0).setAttribute("rel","sel");
        slideshow = setInterval(function(){nextslide()}, galleryspeed);
    }
    function nextslide() {
        var currpos = 0
        for (i=0; i<document.getElementsByClassName("gswb").length; i++) {
            if (document.getElementsByClassName("gswb").item(i).getAttribute("rel") == "sel") {
                currpos = i;
            }
        }
        if (currpos == (document.getElementsByClassName("gswb").length-1)) {
            gotoslide(0);
        } else { 
            gotoslide(currpos+1);
        }
    }
    function prevslide() {
        var currpos = 0
        for (i=0; i<document.getElementsByClassName("gswb").length; i++) {
            if (document.getElementsByClassName("gswb").item(i).getAttribute("rel") == "sel") {
                currpos = i;
            }
        }
        if (currpos == 0) {
            gotoslide((document.getElementsByClassName("gswb").length - 1));
        } else { 
            gotoslide(currpos-1);
        }
    }
    function clickbutton(sl) {
        gotoslide(sl);
        window.clearTimeout(slideshow);
    }
    function prevclick() {
        prevslide();
        window.clearTimeout(slideshow);
    }
    function nextclick() {
        nextslide();
        window.clearTimeout(slideshow);
    }
    function gotoslide(slide) {
        var sn = slide;
        document.getElementById("gallerysliderstage").style.left = (-swidth * sn) + "px";
        for (i=0; i<document.getElementsByClassName("gswb").length; i++) {
            document.getElementsByClassName("gswb").item(i).style.backgroundColor = bgcol;
            document.getElementsByClassName("gswb").item(i).setAttribute("rel","no");
        }
        document.getElementById("galleryswitcher").getElementsByClassName("gswb").item(sn).style.backgroundColor=fgcol;
        document.getElementById("galleryswitcher").getElementsByClassName("gswb").item(sn).setAttribute("rel","sel");
    }
</script>

We have the code, but we have to style it first. Add the following to your page’s CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
.galleryarea {
    position: relative;
}

#galleryslider {
    width:1300px;
    height:500px;
    overflow:hidden;
    position:relative;
}

#gallerysliderstage {
    position: absolute;
    width: 1000000px;
    height: 500px;
    transition: all 0.8s;
    -moz-transition: all 0.8s; /* Firefox 4 */
    -webkit-transition: all 0.8s; /* Safari and Chrome */
    -o-transition: all 0.8s; /* Opera */
    background-color:#333333;
}

.galleryslide {
    float:left;
    position:relative;
    margin: 0;
    padding: 0;
    border: 0
}

#galleryswitcher {
    position: absolute;
    top: 440px;
    height: 50px;
    line-height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    right: 0;
    background-color:rgba(0,0,0,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index:1;
}

.gswb {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #333333;
    border: 1px solid #cccccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-left: 2px;
}

#gallerynavi {
    position:absolute;
    top:0;
    left:0;
    width: 1300px;
    height: 500px;
    font-size: 100px;
    color: #ffffff;
    text-shadow: 0px 0px 8px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=0);
    opacity: 0;
    transition: all 0.4s;
    -moz-transition: all 0.4s; /* Firefox 4 */
    -webkit-transition: all 0.4s; /* Safari and Chrome */
    -o-transition: all 0.4s; /* Opera */
    z-index: 0;
}

#gallerynavi:hover {
    opacity: 1; 
}

.gleft {
    position: absolute;
    left: 20px;
    top: 175px;
    cursor: pointer;
}

.gright {
    position: absolute;
    right: 20px;
    top: 175px;
    cursor: pointer;
}

Great! Everything is set up and ready. All we need to do it add it somewhere now. Put the following HTML code wherever you want your gallery to show up:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="galleryarea">

<div id="galleryslider"><div id="gallerysliderstage">

<div class="galleryslide">
<img src="gallery/img1.jpg" />
</div>

<div class="galleryslide">
<img src="gallery/img2.jpg" />
</div>

<div class="galleryslide">
<img src="gallery/img3.jpg" />
</div>

<div class="galleryslide">
<img src="gallery/img4.jpg" />
</div>

<div class="galleryslide">
<img src="gallery/img5.jpg" />
</div>

</div></div><!-- END GALLERY SLIDER -->

<div id="galleryswitcher">
 
</div>

<div id="gallerynavi">
<div onclick="prevclick()" class="gleft"></div>
<div onclick="nextclick()" class="gright"></div>
</div>

</div><!-- END GALLERY AREA -->

Finally, we need to initialize the gallery on page load. Modify your tag like so:

1
&lt;body onload="onLoad()">

Your gallery should be there looking beautiful!

Customizing your Gallery

To add or remove slides, simply add a DIV containing your slide content inside the “gallerysliderstage” div. You can put whatever you want inside your slide. The code for your slide should look like this:

1
2
3
<div>
<!-- Your content here -->
</div>

Simple!

You should be able to see some parameters at the beginning of the JavaScript code:

	var galleryspeed = 5000; /* Change for time in milliseconds your gallery switches slides */
	var bgcol = "#333333" /* Background colour of the gallery switch buttons */
	var fgcol = "#ee6000" /* Foreground colour of the gallery switch buttons */
	var swidth = 1300 /* width of slides in pixels */

You can change these parameters to change how your gallery behaves.

  • galleryspeed controls the speed (in milliseconds) at which the gallery automatically switches slides.
  • bgcol controls the colour of the unselected gallery navigation button.
  • fgcol controls the colour of the selected gallery navigation button.
  • swidth controls the width of the gallery overall in pixels.

That’s all you need! Feel free to use and modify this code for your site. If you want to be nice you can credit it to Big Tree World but if you don’t want to I won’t attack you! Enjoy your new gallery!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Digg
  • Email
  • RSS

April 6, 2013 at 2:14 am | Posted in: Tutorials, Web Design | No comments

Leave a Reply

Your email address will not be published. Required fields are marked *