Nice Gallery

Install

All of the files that you need to work with are in the Main folder. In order to install the gallery on your html page, you will need to do the following steps:

1. Copy the gallery assets folder, "nice-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, "nice-gallery", and add it next to your html file.

This folder contains the files needed by the gallery such as the CSS, JavaScript and image files. 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 code/text editor.

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

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="nice-gallery/css/nice-gallery.css" type="text/css" rel="stylesheet">
<script src="nice-gallery/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="nice-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="nice-gallery/js/jquery.nice-gallery.min.js" type="text/javascript"></script>
<!-- End of gallery assets code -->

<!-- Start of gallery markup code -->
<div class="nice-gallery">
    <div class="ng-head">
        <div class="ng-title">An album of great places to visit next summer</div>
        ...
    </div>
    <div class="ng-body">
        <ul class="ng-slides">
            <li>
                <img src="nice-gallery/images/image1.jpg" alt="Image 1">
                <div class="ng-desc">
                    <div class="ng-name">1. Lorem ipsum dolor sit amet, consectetuer adipiscing aenean elit quis</div>
                    <div class="ng-text">Commodo ligula eget dolor aenean massa sociis natoque penatibus et ...</div>
                </div>
            </li>
        ...
</div>
<!-- End of gallery markup code -->

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

        jQuery(".nice-gallery").niceGallery({
            // Image
            imageEffect: "slide",
            imageAnimate: [400, "easeOutQuad"],
            frameRatio: false,
            ...
        });
        
    });
</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 like.

Customize

This section contains a few specific customizations. For other customizations, see the Settings or edit the CSS file directly.

Add images

An image is an <li> element inside <ul class="ng-slides">:

<li>
    <img src="nice-gallery/images/image1.jpg" alt="Image 1">
    <div class="ng-desc">
        <div class="ng-name">1. Lorem ipsum dolor sit amet, consectetuer adipiscing aenean elit quis</div>
        <div class="ng-text">Commodo ligula eget dolor aenean massa sociis natoque penatibus et magnis dis ...</div>
    </div>
</li>

The ng-desc element is optional and can be omitted if there is no description for the image.

The thumb is added as an <li> element inside <ul class="ng-thumbs">:

<li><img src="nice-gallery/images/thumb1.jpg" alt="Thumb 1"></li>

Change width

The gallery width is set from the CSS file:

.nice-gallery {
    ...
    max-width: 758px;
}

When the thumbs are underneath, it is recommended to have this dimension a multiplication of the thumb size, so that the thumbs align well.

For example, by default, there are 11 thumbs in a line underneath, each having 60px width and 3px right margin. If the gallery arrows are on the outside, the padding of 34px on each side should be accounted as well.

60px * 11 + 3px * 10 + 34px * 2 = 758px

Description width

This applies to when the image description is on the side.

The description width can be changed from the CSS file:

.ng-side-desc .ng-desc {
    width: 220px;
    ...
}

Thumbs width

This applies to when the thumbs panel is on the side.

The width of the thumbs panel is can be changed from the CSS file:

.ng-side-thumbs .ng-thumbs {
    width: 189px;
    ...
}

The width should be calculated based on the number of thumb columns that you want to have. By default, there are 3 columns. A thumb has 60px width and 3px right margin.

60px * 3 + 3px * 3 = 189px (The space is used 3 times because of the negative right margin of the thumbs panel.)

Arrows color

The navigation arrows are .png images and by default, the gallery comes with 2 sets of arrows, one black and one white.

When the arrows are on the outside, the black color is used, when the arrows are on the insde, the white color is used.

Which version is used can be changed from the CSS file:

.ng-prev {
    background-image: url("img/prev-white.png");
    ...
}
.ng-next {
    background-image: url("img/next-white.png");
    ...
}
.ng-outside-arrows .ng-prev {
    background-image: url("img/prev-black.png");
    ...
}
.ng-outside-arrows .ng-next {
    background-image: url("img/next-black.png");
    ...
}

Additionally, the sources of the image files are included in the Sources/img folder and they can be used to make the arrows any color that is needed.

Settings

The settings are placed in the JavaScript build code:

jQuery(".nice-gallery").niceGallery({
    // Image
    imageEffect: "slide",
    imageAnimate: [400, "easeOutQuad"],
    frameRatio: false,
    ...
});

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.

Methods

The methods are called through the JS code. The following are all of the available methods, how to call them and what they do:

• open

  jQuery(".nice-gallery").niceGallery("open", 5);

  Opens an image based on the order number supplied.
• prev

  jQuery(".nice-gallery").niceGallery("prev");

  Opens the previous image.
• next

  jQuery(".nice-gallery").niceGallery("next");

  Opens the next image.
• startAutoplay

  jQuery(".nice-gallery").niceGallery("startAutoplay");

  Starts the autoplay.
• stopAutoplay

  jQuery(".nice-gallery").niceGallery("stopAutoplay");

  Stops the autoplay.
• scrollPage

  jQuery(".nice-gallery").niceGallery("scrollPage", 100, true);

  Scrolls the page to a certain position using the scroll animate settings.
  The first parameter specifies the page position to scroll to (in pixles). The second parameter specifies if to animate the scrolling.
• onPageScroll

  jQuery(".nice-gallery").niceGallery("onPageScroll", function() {...});

  Adds a function to be called when the page scrolls.
• onPageAutoScrollFinish

  jQuery(".nice-gallery").niceGallery("onPageAutoScrollFinish", function() {...});

  Adds a function to be called when the page automatic scroll finishes.
• destroy

  jQuery(".nice-gallery").niceGallery("destroy");

  Destroys the gallery. Removes everything that was built when the gallery was initially created.

I have a problem

If you have a problem with the gallery, a few common things to do are:

• Make sure that jQuery is not added multiple times on the page.
  If you already have jQuery on your page, remove it from the gallery assets code. But make sure that your jQuery is added before any gallery JS file.
• Open the browser developer tools (F12) and see if there are any errors shown in the console.
  If there are any error messages shown, try to read and understand what they say. Try to google them to find out more information about what they mean or send the messages to me and I will explain them to you.
• Have a look over the gallery message board, in case the problem has been discussed before and solved.
• Make sure that you have added all of the gallery code (assets, markup, build) to your page.
• Make sure that all of the used files are accessible and loading well (CSS, JS, images).

If you cannot fix the problem, contact me and I will help you. If possible, it would be useful if you could send me a link to where I can look over your implementation so that I can give you specific feedback. If it is not possible to send me a link, just describe the problem to me and I will try to replicate it on my end.

Contact

If you have any questions or need some help, please contact me.

The fastest way that you can get in touch with me is to simply send me an email at contact@creativetier.com.

Another option to send me a message is to use the contact form on my CodeCanyon profile page.

Or you can simply post a message on the gallery message board and I will answer you there.

Credits

Many thanks to the following:

• albumarium.com: For the example images.
• jquery.com: For the jQuery library.
• velocityjs.org: For the Velocity animation engine.

Thank you for using Nice Gallery. If you have the time, please rate it on CodeCanyon.