Image carousel

2024-10-09 2024-10-09
* Moved position marked down

2024-10-08
* Refactoring made to carousel images
* Fixed full size image
* Prettified the position marker

2024-10-02
* Swiping up or down to close image carousel
* Added clickable bottom image position bullets
* Added touch-sensitive navigation symbols

2024-10-01
==========
* Centered close X
* Centered image text
* Added swipe mechanism

2024-09-24
==========
* Fixed text and symbol bug for quick browsing
* Added code and CSS to this page

2024-09-23
==========
* Initial version

Realizing most people were just browsing the craft articles on my site I wanted to enable them to browse the images with their alt texts so they could see the images and get an understanding of the what's on the page. For those who were really interrested they could still read the whole article.

Implemented features

The following acceptance criterias were formulated:

✔ A click on an image should display a full screen overlay of the image.
✔ Indicators for next browsing image/previous images.
✔ The img element alt attribute value should be displayed as text overlay.
✔ A clickable X to close the carousel overlay.
✔ Escape key should close the overlay.
✔ Right or left arrows browse images (previous/next).
✔ Hiding symbols and text after a short delay for full view of image.
✔ Re-displaying the navigation symbols and text upon interaction.
✔ The image carousel should be a stand-alone Javascript class library with image CSS locator as constructor parameter to enably use on any web page.
✔ The displayed image should be shown as large as possible, filling the viewport either horizontally or vertically depending on what's best for size.
✔ Browser window resizing re-positions close symbol and image text.
✔ Non-existing alt-texts for images are supressed.
✔ Finger swipe left and right for changing image on touch devices.
✔ Swiping up or down closes image carousel overlay.
✔ Clickable position bullets for displaying image count and active image.
✔ Hovering navigation elements prevent them from hiding.
✔ Providing an argument to full size image folder path will show full size images in image carousel.
✔ Touching the screen rather than swiping will awaken any sleeping image texts and navigation symbols.

Backlog

Fix touch to view full size image
Check for WCAG issues.
Make image zoomable on touch devices rather than image link.
Larger touch margins for navigation symbols.
More code refactoring.
Update scripts from actual files.
Hide navigation symbols and position marker during full size image view.
Block navigation during full size image view.

Try it out

Click any of the images below to try the image carousel out.

Usage

Include the following files:

Javascript class file for all functionality.
CSS file for styling.

Include references to this file and the CSS file in the HEAD section of your HTML, like below:


<head>
    <script type="text/javascript" src="imageCarousel.js"></script>
    <link rel="stylesheet" href="imageCarousel.css">
</head>

Then make sure to load an instance of the image carousel itself, for example by including it in window.onload, or:


<body onload="new ImageCarousel('.test-image');">

The argument string is the CSS locator for the images to include in the image carousel.

If you want the image carousel to display full size images of the thumbnails on the actual page you may also include a path to full size images.


<body onload="new ImageCarousel('.test-image', './fullsizeimages/');">