en
Visit Templateog体育首页
Submit a Ticket

Categories

en
Visit Templateog体育首页 Account
Submit a Ticket

Categories

og体育首页ONE Subscrioption

og体育首页ONE

“Gallerific” Image Gallery

Template-help.com Team November 15, 2010
galleryjQuery
Rating: 5.0/5. From 1 vote.
Please wait...

This is a Gallery Script that uses “Gallerific” – a universal jQuery plugin for creating all kinds of galleries. You can find full installation and configuration instructions by following this link.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include jquery.galleriffic.js script and jQuery framework:

Two additional script files are optional. jquery.history.js script enables history support for the gallery. jquery.opacityrollover.js script enables opacity rollover effect for gallery thumbnails.

HTML
Below you can see general HTML script representation:

The elements represented here are optional. Each

element defines the following gallery parts:
•  #controls – adds gallery navigation block;
•  #loading – adds a block that displays a spinner image till gallery images are being loaded;
•  #slideshow – adds big image block;
•  #caption – adds image description block;
•  #thumbs – thumbnail images block.

Next you can see thumbnails block markup:

The link ( tag) contains a href reference with a path to a big image. Optionally you can add title and alt attributes. In order to add an extra image you just need to copy a list element (

  • tag) with its content.
    The gallery initialization is placed to the end of HTML coding (just before     closing tag) and contains all the necessary configuration values. The script is well-commented so you can always get to know which attributes to change in order to customize the gallery functionality.

    • 1500 Premium MotoCMS Templates
    This entry was posted in Gallery and tagged gallery, jQuery. Bookmark the permalink.

    Related posts

    JS Animated. How to change slider speed
    January 27, 2020

    This tutorial shows how to change the slider image rotation speed in JS Animated templates. The slider, usually used in the JS Animated templates is called TM_Slider and as any other jQuery based slider it has various settings. Let’s see how to configure it. Open the JS Animated template folder and go to the site […]

    How to display WordPress images in columns and rows
    January 22, 2018

    Hello, this guide is going to show you how to display WordPress images in columns and rows.

    Multipurpose Website Templates. How to manage LightGallery extension
    June 8, 2017

    This tutorial is going to show you how to manage LightGallery plugin. We use it in our templates to implement functional mobile-friendly galleries.

    Submit a ticket

    If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket