I have created a simple image gallery of 50 microbes for my website. Here is everything that you need to use it on your own sites.

Featured Microbes

This is a simple javascript project that I built to display a random "Featured Microbe" on my website. It is really not very complicated. The javascript defines an array, which is then populated with information about fifty different microbes. A random index number is selected each time the page is loaded, and the corresponding information is plugged into the html document. This code is styled using the associated css file.


All of the files for this gallery are available in my GitHub repo at https://github.com/weebeasties/featured_microbe.

  • README.md: This file
  • index.html: A sample implementation of the gallery with instructions.
  • LICENSE: The MIT license file for this repo
  • microbe_list.md: A full listing of all 50 microbes in this gallery
  • css/microbes.css: The style sheet for the gallery. It is expected to be in ./css/microbes.css
  • js/microbes.js: The javascript for the gallery. It is expected to be in ./js/microbes.js
  • images/microbes/: The images for the gallery. All were obtained from PHIL. A listing of all the microbes can be found here. Clicking on any of the displayed images will link you to their source page directly.
  • webpage_code.md: Some simple html code to get the gallery into a page.


To use these resources on your own site, the process is pretty simple.

  1. Place a copy of microbes.css in your /css folder.
  2. Place a copy of microbes.js in your /js folder.
  3. Place the /microbes folder and it's images into your /images folder.
  4. Copy the html from webpage_code and paste into the correct parts of your web page.

That's it! The gallery should now appear in your page. Feel free to tweak the css to fit the look and feel of your page. You can also edit the js file to add, delete, or modify the entries. Have fun!

Like somethat that you read here? Feel free to share it.