Creating Slideshow with Titles for Internet Archive Images
We have transferred our photo albums to the Internet Archive. While they offer a way to share (and embed) images, displaying titles is not possible. To display titles, I programmed a new slideshow. My solution is lightweight and built with JavaScript, CSS, and kHTML to run in the web browser.
We have been testing the slideshow for half a year in this blog. Sometimes Internet Archive gets overloaded rendering albums non-functional but most of the time our slideshows have been working very well. Here are instructions on how to use the slideshow on your websites and blogs.
Instructions
To embed Internet Archive image items to your own website or blog, you need to first add Boostrap CSS subset into the head of your html page:
<link rel="stylesheet" href="https://archive.org/download/image-slideshow/bootstrap-5.3.8-subset.min.css" media="print" onload="this.media='all'">
Then include slideshow Javascript code and html to the body of the page. You need to copy and edit the html part of the code for each slideshow. Javascript is needed only once.
A webpage can contain multiple different slideshows. Replace your Internet Archive item IDs with the word basque-country in the HTML code for each slideshow:
<div id="basque-country"></div>
<script>showImages("basque-country");</script>
Lastly, before closing the body tag, load Boostrap Javascript subset:
<script defer src="https://archive.org/download/image-slideshow/bootstrap-5.3.8-subset.min.js"></script>
Here ia an example along with its full HTML source code.
Code repository, license and support
Code repository is available at https://archive.org/details/image-slideshow.
Bootstrap, as well as the subset I created, is released under MIT license. The code I wrote myself is in the Public Domain.
Feel free to share your questions and feedback in the comments of this blog post. I’m happy to help.
Happy hacking,
Santeri

Comments