close
ADVERTISEMENT

Learn languages

Create own dictionaries, translate, learn words and play games — anywhere, any device.

Try it
Learn words
ADVERTISEMENT

JSoccer

3D browser game

Play
JSoccer

Getting started

  1. Download
  2. Add links to required files on your webpage
  3. Create your gallery
  4. Full screen mode
  5. Slider
  6. Slider with links
  7. Albums
  8. Gallery height the same as viewport
  9. Custom background and text colours
  10. Different background and text colours for each photo

Download

Download .zip or .tar.gz archive with jGallery files. All examples published on this subpage there are placed in files below.

If you want to use npm enter in command line:

npm install jgallery

Add links to required files on your webpage

In <head> section, put links to required js and css files:

<link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jgallery.min.css?v=1.6.1" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jgallery.min.js?v=1.6.1"></script>

If you need touch gestures(swipe events) support, put link like below in <head> section:

<script type="text/javascript" src="js/touchswipe.min.js"></script>

Create your gallery

In <body> section, create html element(e.g. <div>) and put links to your photos. You have to put also Javascript code, to initialize your jGallery. Example:

HTML API
<div id="gallery">
    <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>

Full screen mode

If you want to display your photos on full screen, you should change JavaScript code:

HTML API
<div id="gallery">
    <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { mode: 'full-screen' } );
} );
</script>

Slider

If you want to display your photos on slider, you should create code:

HTML API
<div id="gallery">
    <img src="images/large/1.jpg" alt="Photo 1" />
    <img src="images/large/2.jpg" alt="Photo 2" />
    <img src="images/large/3.jpg" alt="Photo 3" />
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { mode: 'slider' } );
} );
</script>

Albums

If you want to catalog photos, you should use html code like below:

HTML API
<div id="gallery">
    <div class="album" data-jgallery-album-title="Album 1">
        <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
        <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
        <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
    </div>
    <div class="album" data-jgallery-album-title="Album 2">
        <a href="images/large/4.jpg"><img src="images/thumbs/4.jpg" alt="Photo 4" /></a>
        <a href="images/large/5.jpg"><img src="images/thumbs/5.jpg" alt="Photo 5" /></a>
        <a href="images/large/6.jpg"><img src="images/thumbs/6.jpg" alt="Photo 6" /></a>
    </div>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>

Custom background and text colours

If you want to specify custom background colors and text colors, you need TinyColor. Put link to this library in <head> section:

HTML API
<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

In <body> section, create JavaScript and html code like below:

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { backgroundColor: 'black', textColor: 'white' } );
} );
</script>
<div id="gallery">
    <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>

Different background and text colours for each photo

If you want to specify different background colors and text colors for each photo, you need TinyColor. Put link to this library in <head> section:

HTML API
<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

Photos with custom background color must have "data-jgallery-bg-color" attribute. Photos with custom text color must have "data-jgallery-text-color" attribute.

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>
<div id="gallery">
    <a href="images/large/1.jpg">
        <img src="images/thumbs/1.jpg" alt="Photo 1" data-jgallery-bg-color="#3E3E3E" data-jgallery-text-color="#FFFFFF" />
    </a>
    <a href="images/large/2.jpg">
        <img src="images/thumbs/2.jpg" alt="Photo 2" data-jgallery-bg-color="#010301" data-jgallery-text-color="#CDE897" />
    </a>
    <a href="images/large/3.jpg">
        <img src="images/thumbs/3.jpg" alt="Photo 3" data-jgallery-bg-color="#EAF037" data-jgallery-text-color="#21408A" />
    </a>
</div>