If you want to organize your photos in a gallery, then here are some options that I’ve created for you. Feel free to adapt this as you see fit.
Photo galleries are great for a large number of photos to display. If you only have a few photos to display, or want to display photos in a slideshow manner, see the section called Photo Slideshows below.
I will walk you through some of the major coding concepts. Otherwise, it’s up to you to play around with the HTML and CSS to adjust to your website. Please let me know if you have questions.
Dynamic photo slideshows are even more complicated than static photo galleries. Let’s skim over a tutorial to get an idea of what’s involved.
We can work through the key pieces of code that you need to understand in order to adapt the code for your own website.
Photo slideshows are great for less than than a dozen photos or so. If you’d like to showcase all of your photos on a webpage, then go with a photo gallery. If you want to highlight a few important photos on a home page or content page, then go with a short slideshow.
Note: The more photos you add, the more complicated the code gets and the more you’ll have to work to re-write the code to fit your needs.
Example 1: Automatic slideshow with no captions
Example 2: Automatic slideshow with captions and play/pause buttons, very complicated code
Example 3: Automatic slideshow with captions when you hover
Example 4: Automatic slideshow with captions all the time
You could also download the code from the first example we looked at and edit that code as well.