Getting Started

SimpleGallery is a simple javascript plugin to easily and quickly browse a series of images on your websites.

For a correct installation it is advisable to have a minimum knowledge of javascript language and CSS style sheets.

It supports all major browsers.

It is responsive so it adapts to all online display devices.

Step 1: What is needed

To display correctly, simplegallery you need to include the Font Awesome cdn and the CSS file simplegallery.css in the pages.

Add in the <head> tag like this the cdn Font Awesome and simplegallery.css:


<link rel="stylesheet" href=""/>
<link type="text/css" href="css/simplegallery.css" rel="stylesheet">


The next step will be to include simplegallery.js on the page.

We recommend inserting it at the end of the document before closing the <body> tag like this:

<script type="text/javasscript" src="js/simplegallery.js">

Step: 2 markup HTML

At this point it is possible to add the HTML code in very few lines depending on how many images you want to insert.

Important you will have to assign a unique id to the parent tag <div> in our example we have given a "simplegallery" id


<div id="simplegallery">
        <a href=images/img_1.jpeg">
            <img src=images/img_1.jpeg">
        <a href=images/img_2.jpeg">
            <img src=images/img_2.jpeg">
        <a href=images/img_3.jpg">
            <img src=images/img_3.jpg">
        <a href=images/img_4.jpg">
            <img src=images/img_4.jpg">


Step 3: Initialize

Finally, to run the gallery you need to activate it in this way:

<script type="text/javascript">