Broad Network

HTML5 Image Gallery and Image Enlargement with ECMAScript

Foreword: In this article I show you how to design an image gallery and I give you code to enlarge and restore each image to its original size.

By: Chrysanthus Date Published: 28 Mar 2016


An image gallery is a web page with images under the same title. The images are usually arranged in a regular fashion (rows and columns). In this article I show you how to design an image gallery and I give you code to enlarge and restore each image to its original size. To achieve this, you need basic knowledge in ECMAScript, HTML, DOM and CSS.

Image Gallery Technique
- Each image goes into an HTML figure element, which should have an HTML figcaption element.
- All images should be of the same size; all enlarged (maximized) images should be of the same size, for consistency.
- All figure elements should be of the same size.
- All figure elements should have the CSS inline-block display property; in that way they can be placed in rows and columns

In the following example, there are four images with two images per row and two rows (read and try it you need actual images: myImg1.jpg, myImg2.jpg, etc.):

    <h1>Title of Gallery</h1>

        <figure style="display:inline-block"><img src="myImg1.jpg"><br><figcaption>Caption 1</figcaption></figure>
        <figure style="display:inline-block"><img src="myImg2.jpg"><br><figcaption>Caption 2</figcaption></figure>
        <figure style="display:inline-block"><img src="myImg3.jpg"><br><figcaption>Caption 3</figcaption></figure>
        <figure style="display:inline-block"><img src="myImg4.jpg"><br><figcaption>Caption 4</figcaption></figure>


Image Enlargement and Restoration Technique
- For each figure element, you use the same image from the same source.
- You use two different img tags for this same image, and the two different tags are coded on the same place in the HTML document.
- One img tag has the smaller dimension and the other has the bigger dimension.
- The smaller dimension is the default dimension, which is shown initially; and the bigger dimension is not shown (initially).
- The img tag for the bigger dimension is typed in front of the tag for the smaller dimension.
- When a particular mouse even occurs on the smaller dimension, the bigger dimension is shown to cover the smaller dimension.
- When a particular mouse even occurs on the bigger dimension, it is removed and the smaller dimension is shown.

The following code shows how to enlarge and reduce each of the images in the above gallery (read and try it):

<style type="text/css">
    img.large {width:500px; height:500px; display:none; position:absolute; z-index:2}
    img.small {width:200px; height:200px}
<script type="text/ecmascript">
    var size = "small"
    function maxRest(ID)
            if (size == "small")
                    document.getElementById(ID).style.display = "inline";
                    size = "big";
                    document.getElementById(ID).style.display = "none";
                    size = "small";

    <h1>Title of Gallery</h1>

        <figure style="display:inline-block"><img src="myImg1.jpg" id="I1A" onclick="maxRest('I1A')" class="large"><img

src="myImg1.jpg" id="I1B" onclick="maxRest('I1A')" class="small"><br><figcaption>Caption 1</figcaption></figure>
        <figure style="display:inline-block"><img src="myImg2.jpg" id="I2A" onclick="maxRest('I2A')" class="large"><img

src="myImg2.jpg" id="I2B" onclick="maxRest('I2A')" class="small"><br><figcaption>Caption 2</figcaption></figure>


        <figure style="display:inline-block"><img src="myImg3.jpg" id="I3A" onclick="maxRest('I3A')" class="large"><img

src="myImg3.jpg" id="I3B" onclick="maxRest('I3A')" class="small"><br><figcaption>Caption 3</figcaption></figure>
        <figure style="display:inline-block"><img src="myImg4.jpg" id="I4A" onclick="maxRest('I4A')" class="large"><img

src="myImg4.jpg" id="I4B" onclick="maxRest('I4A')" class="small"><br><figcaption>Caption 4</figcaption></figure>


The image element at the large size should not be higher in resolution (pixels) than the image at the server, otherwise there would be lost of resolution for the large image.

That is it for this part of the series.


Related Links

Surrounding a Web Page Image with Text
Advantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
Drawing a Histogram in HTML Canvas
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library


Become the Writer's Fan
Send the Writer a Message