Sharp Gallery

Quick instructions

1. Copy the gallery assets folder, sharp-gallery, and add it next to your html file.

2. Copy the gallery html code and add it to your html file.

Detailed instructions

1. Copy the gallery assets folder, sharp-gallery, and add it next to your html file.

This folder contains the files needed by the gallery such as the CSS, JavaScript, jQuery files (among others) and, of course, the images themselves. The folder needs to be with your html file so that the gallery can load the necessary assets.

2. Copy the gallery html code and add it to your html file.

There are multiple templates that the gallery comes with, which provide a starting point in customizing it. Once you have decided which template to use, open the html file in a text editor.

If you do not have a text editor, I use and recommend Sublime Text. It is a great editor and it is free to use by anybody.

After you open the file in an editor, you will see that the needed gallery code is nicely shown by comments:

<!-- Start of gallery assets code -->
<link href="sharp-gallery/css/sharp-gallery.css" type="text/css" rel="stylesheet">
<script src="sharp-gallery/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="sharp-gallery/js/velocity.min.js" type="text/javascript"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> -->
<script src="sharp-gallery/js/jquery.sharp-gallery.min.js" type="text/javascript"></script>
<!-- End of gallery assets code -->

<!-- Start of gallery markup code -->
<div class="sharp-gallery">
    <div class="sg-head">
        <div class="sg-title">Amazing photos from all around the world</div>
        ...
    </div>
    <div class="sg-body">
        <div data-id="image1">
            <img src="sharp-gallery/images/thumb1.jpg" alt="Thumb 1">
            <div class="sg-label">1. Valley of the Gods</div>
        </div>
        ...
    </div>
    ...
</div>
<!-- End of gallery markup code -->

<!-- Start of gallery build code -->
<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery(".sharp-gallery").sharpGallery({
            // Main
            width: 797,
            margin: [30, "auto"],
            ...
        });

    });
</script>
<!-- End of gallery build code -->

Now that you have the gallery up and running on your page, you can start to customize it as you want it.

Markup code

The markup code specifies all of the content of the gallery, such as images, thumbs, description texts, thumb labels, gallery title and so on.

<!-- Start of gallery markup code -->
<div class="sharp-gallery">
    <div class="sg-head">
        <div class="sg-title">Amazing photos from all around the world</div>
        ...
    </div>
    <div class="sg-body">
        <div data-id="image1">
            <img src="sharp-gallery/images/thumb1.jpg" alt="Thumb 1">
            <div class="sg-label">1. Valley of the Gods</div>
        </div>
        ...
    </div>
    <div class="sg-data">
        <div data-id="image1" data-src="sharp-gallery/images/image1.jpg" data-alt="Image 1">
            <div class="sg-text">
                <div class="sg-name">1. The Valley of the Gods</div>
                <div class="sg-desc">Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo ...</div>
                <div class="sg-info">photo by <a href="http://www.creativetier.com" target="_blank">Guy ...</div>
            </div>
        </div>
        ...
    </div>
</div>
<!-- End of gallery markup code -->

This code has 3 main sections: head, body and data.

Head section

<div class="sg-head">
    <div class="sg-title">Amazing photos from all around the world</div>
    <div class="sg-subtitle">We have put together an album of some amazing photos that are sure to delight ...</div>
    <div class="sg-tag">by <a href="http://www.creativetier.com" target="_blank">Guy McWriterson</a></div>
    <div class="sg-tag">on 15/08/2016</div>
</div>

The head contains the title, subtitle and tags. All of these are optional for the gallery, you can remove any of the elements from the head, or you can remove the whole head element, if you want to.

Body section

<div class="sg-body">
    <div data-id="image1">
        <img src="sharp-gallery/images/thumb1.jpg" alt="Thumb 1">
        <div class="sg-label">1. Valley of the Gods</div>
    </div>
    ...
</div>

The body contains the list of thumbs. (Later on, when an image is opened, the stage - the big area that displays an image - will also be dynamically added to the body and positioned automatically where it is needed.)

The code for a thumb is a <div> element with a data-id attribute. This represents the id of the image and when a thumb is clicked, this id is used to know what image data to retrieve and display.

The thumb contains an <img> element with the path to the thumb image file, as well as the alt text, and a <div> element with the text label that appears over the thumb. The label is optional, if you don't want it displayed over the thumb, you can simply remove this element.

Data section

<div class="sg-data">
    <div data-id="image1" data-src="sharp-gallery/images/image1.jpg" data-alt="Image 1">
        <div class="sg-text">
            <div class="sg-name">1. The Valley of the Gods</div>
            <div class="sg-desc">Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo ...</div>
            <div class="sg-info">photo by <a href="http://www.creativetier.com" target="_blank">Guy McPictureson ...</div>
        </div>
    </div>
    ...
</div>

The data section contains the information necessary when opening the images. When an image is opened, the data for that image is taken from here and used when displaying the image.

The code for an image is a <div> element with a unique data-id attribute. It also has data-src and data-alt attributes as the path and alt text for the image itself.

The element contains a <div> with the overlay text. Within, there are multiple lines of text. Each line is optional, you can keep the ones you want and remove the ones you don't need. Also, the whole text element is optional. If you don't want any text over the image, you can simply remove the whole text div and let the image element empty.

To add an image to the gallery, you simply add the thumb code in the body section, the image code in the data section and the thumb and image files to the sharp-gallery/images folder.

Settings

These are settings that you place in the JavaScript build code:

jQuery(".sharp-gallery").sharpGallery({
    // Main
    width: 797,
    margin: [30, "auto"],
    ...
});

The table below shows all of the settings that are available, their default and possible values, as well as a description about each.

It is not necessary to specify all of the settings in the build code. When a setting is not specified, it will automatically take the default value.

Easing options:

The available easing values for the animation settings are the following:

• • easeInSine
  • easeOutSine
  • easeInOutSine
• • easeInQuad
  • easeOutQuad
  • easeInOutQuad
• • easeInCubic
  • easeOutCubic
  • easeInOutCubic
• • easeInQuart
  • easeOutQuart
  • easeInOutQuart
• • easeInQuint
  • easeOutQuint
  • easeInOutQuint
• • easeInExpo
  • easeOutExpo
  • easeInOutExpo
• • easeInCirc
  • easeOutCirc
  • easeInOutCirc
• • ease
  • ease-in
  • ease-out
• • ease-in-out
  • spring

CSS and JS code

CSS code

You can edit the CSS code to customize anything about the gallery look that you want. The gallery CSS file is named sharp-gallery.css and you can find it in the sharp-gallery/css folder. Open this file in a text editor and you have access to customize all of the gallery styles.

You will need to be familiar with how CSS works in order to make any customizations in the code here but, fortunately, it is not that hard to pick up and learn the basics of how CSS works.

The code is ordered to resemble the structure of the gallery HTML code, to make it easier to understand and work with. Comments are at the head of every section and the styles inside are about elements in that section.

You can play around and experiment with customizing the CSS code in different ways. Don't be afraid of breaking anything because you always have the original file as a backup, in case anything goes wrong.

JavaScript code

For more advanced users, it is also possible to edit the JavaScript code in order to customize anything about the gallery functionality that you want. The JS file included with the gallery files is called jquery.sharp-gallery.min.js and is found in the sharp-gallery/js folder. But this is the minified (compressed) version. What you need is the uncompressed source version that you can find in the Source/js folder and is called jquery.sharp-gallery.js.

When you want to make changes to the JS code, you can delete the old compressed file, copy this source version and paste it in the sharp-gallery/js folder, and rename it to add the .min at the end. Now the gallery is loading and using the uncompressed version to which you can make changes and see the changes live.

After you open this file in a text editor, you can see and edit the uncompressed gallery JavaScript code. You will need to be familiar with JS in order to make any changes here but don't be afraid to experiment as you will always have the original version available as a backup.

The bulk of the code is in the build function, where the gallery is initialized and its functionality built.

After you have made the changes that you want, it is a good idea to compress the file in order to make it a smaller size and decrease the loading time on the user end. But before doing that, remember to save an uncompressed copy for yourself, in case you need it later.

To compress a JS file, you can use the free and very good tool at jscompress.com. That is the same tool I used. Simply copy all of the code from the file and paste it there and after it is compressed, copy the code back to your file. Now the JS file is compressed and ready to go.