Creating an animated gallery with Fotorama

A Fotorama gallery is a simple but very nice looking gallery for websites, it uses HTML, JavaScript (Don't worry you don't have to code any JavaScript to get it working) and CSS3. Just add the dependancies below to the header (or at the bottom of your body if you're a speed freak) to get started.

http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.css

http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.js

Once that's complete, all you need to do is make a page with a div with the class 'fotorama' and add your images into it. When you load your web page, fotorama will start up and provide you with the best looking gallery.

On a side note, if you add the following to the fotorama div, you'll get a nice icon set below the gallery slider.

data-nav="thumbs"

If you need any more information on how to modify or interface with Fotorama, visit its website: http://fotorama.io/


Published at

Tags: jQuery,CSS3,Fotorama

Luke Alderton

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Josh on Using Umbraco Route Hijacking and posting to it
14 Jan 2019, 15:17 PM
By Shane on Xamarin Forms multiple instances of same app open
14 Dec 2018, 05:33 AM
By Daler on Xamarin MasterDetailPage has large margin/padding at top
3 Dec 2018, 06:30 AM
By JM on Solved: You need to use a Theme.AppCompat theme (or descendant) with this activity
10 Oct 2018, 13:36 PM
By praveen on Xamarin Forms - Working with threads
5 Oct 2018, 12:05 PM
By Lee Messenger on Umbraco Get Current Member or Member By ID
4 Sep 2018, 10:57 AM
By Naufil on How to open a modal window for a custom datatype in the Umbraco back office
30 Jul 2018, 12:40 PM
By Trevor on Replacing the Xamarin Header/Navigation bar with a custom view/template
19 Jul 2018, 18:36 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development