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

Introduction

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

Example
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.):

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
</head>
<body>
    <h1>Title of Gallery</h1>
    <article>

        <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>
            <br>
        <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>

    </article>
</body>
</html>

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):

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

</head>
<body>
    <h1>Title of Gallery</h1>
    <article>

        <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>

            <br>

        <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>

    </article>
</body>
</html>

Resolution
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.

Chrys

Broad Network

Related Articles

HTML5 Image Gallery and Image Enlargement with ECMAScript

Introduction

Related Links

Comments