Image Carousel

Project Incentive

Before this Carousel element was introduced, there was essentially nothing to find on this website - aside from the acknowledgement a website was there. Additionally, existing pages included little more than plain text. For new projects populating the site, it would be important not just to add images, but dynamic image elements as well.

At time of release, this Carousel element is found in two locations:

  • In a Featured Images component on the Home page.
  • In a Generated Maps storage on the Map Generator project.

Example Carousel

Technical Details

The Carousel is largely handled with JavaScript. I believe purists would prefer to have a more CSS-powered (maybe even CSS-only) Carousel, however CSS isn't a language I have fun working with - and all these projects are ultimately for fun.

The image-fetch part of the feature is nearly the same as the article-fetch from the Home, Projects and News pages (see the Website project page for more on that routine). The fetch returns an array of images.

The Carousel program will load up to three images from the array, one image if there's only one in the array, and two images if you're at either end of the array. onclick events are added to the dynamic content to:

  • Navigate along the array with the navigation buttons.
  • Navigate along the array by clicking on an image on either side of the main view
  • Go to any image of the array by clicking on an image in the panorama at the bottom.
  • Open the image in the new tab by clicking on the main view image.

Future Improvements

I would suspect that in the future, the following features will be implemented for the Carousel element. Some of these were intended to be implemented on launch, but weren't needed in the end (at least for now).

  • Ability to render the Carousel in different sizes.
  • Ability to select which features a Carousel should have (with/without navigation buttons, with/without panorama, with/without new tab opening).
  • Ability to set which image in the array the Carousel loads first (instead of the last systematically).
  • No stretching for images of uneven aspect-ratios.
  • Render the image in a zoom view, rather than opening it in a new tab.

Link to Code

If you'd like to run this Carousel locally, you can find the code in this GitHub repo.