Handmade picture gallery: #slideshow

Example of a picture gallery

Example of a slideshow picture gallery

Slideshows are a very common picture gallery type. Unfortunately I did not manage to find a simple and highly editable slideshow on the web, so I developed my own in few days. I publish it here, feel free to modify and customize it, it’s made for !

Demo & code

Go to this page to see the code and the output

As you can see, the slideshow is automatically played when the page is loaded. The visitor can select an image to see it in details (this action will pause the slideshow).

I tried to make the CSS code as compact as possible. You have here the minimum to display your slideshow in a readable way. It seems long because of all the comments, actually it’s not so much.

The javascript part is the most complex one. Read carefully the comments if you want to understand how it works.

Have a nice code exploration !

About Nicolas Form

I'm Nicolas Form, multi-skill programmer, aesthete and joyful French guy. On this blog I share my tips and tutorials about programming and IT in general. I am freelance, so you can also contact me about a website, an Android app or any other software you need. Check my portfolio and drop me a line!
This entry was posted in Web and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web

Handmade picture gallery: #slideshow

by Nicolas Form time to read: 1 min
0