Least.js - Random and Responsive HiDPI jQuery Gallery

Least.js - Random and Responsive HiDPI jQuery Gallery based on HTML5 and CSS3

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: leastjs.com

1. INCLUDE CSS AND JS FILES

<!-- Responsive viewport for smartphone devices -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- least.js 2 CSS file -->
<link href="src/css/least.min.css" rel="stylesheet" />

<!-- jQuery library -->
<script src="src/js/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- least.js 2 library -->
<script src="src/js/libs/least/least.min.js"></script>

2. HTML

<!-- Least Gallery -->
<section id="least">

  <!-- Least Gallery: Fullscreen Preview -->
  <div class="least-preview"></div>

    <!-- Least Gallery: Thumbnails -->
    <ul class="least-gallery">
      <!-- 1th thumbnail -->
        <li>
          <a href="path-to-your-fullscreen-image default-path:src/media/big/01.jpg" title="AntiVirus" data-caption="<strong>Lorem ipsum dolor</strong> sit amet, consetetur sadipscing" >
            <img src="path-to-your-thumbnail-image default-path:src/media/thumbnails/01.jpg" alt="Alt Image Text" />
          </a>
        </li>
    </ul>

</section>
<!-- Least Gallery end -->

3. JAVASCRIPT

$(document).ready(function(){
    $('.least-gallery').least();
});

4. OPTIONS

least.js 2 has really great options. You can choose between Javascript, CSS3-SASS or HTML-options.

General Javascript options

Random: Choose between RECENT or RANDOM thumbnails

default: 'random': true
options: false or true

Scroll to Gallery: Scroll to fullscreen preview

default: 'scrollToGallery': true
options: false or true

HiDPI: Show '@2x' images on HiDPI devices

default: 'HiDPI': true
options: false or true

If you want to edit some CSS3-SASS options you will need to use grunt or CodeKit. 
To edit the following options (see also below) go to src/scss/assets/_options.scss

/* @group Options */

    /* @group Master */
    $thumbnail-text: true; /* enable (true) or disable (false) thumbnails title text */
    $outline: true; /* enable (true) or disable (false) thumbnails border */
    $loading: "Loading..."; /* default "loading" thumbnails text */
    /* @end */

    /* @group Vars: Colors */
    $color-black: #000;
    $color-white: #fff;
    $color-gray: #666;
    $color-gray-light: #f1f0f0;
    $color-creem: #f5f5f5;
    /* @end */

    /* @group Gallery-Fullscreen */
    $max-fullscreen-size: 960px; /* default size for fullscreen preview */
    /* @end */

    /* @group Gallery-Thumbails */
    $thumbnail-size-width: 240px; /* default "width" size for thumbnails */
    $thumbnail-size-height: 150px; /* default "height" size for thumbnails */
    $text-thumbnail-view: "View Picture"; /* default "view picture" text for thumbnails mouseover */
    /* @end */

/* @end */

To add a description text into your "image-preview" just use the data-caption-element.

<a href="path-to-your-fullscreen-image default-path:src/media/big/01.jpg" title="AntiVirus" data-caption="<strong>Lorem ipsum dolor</strong> sit amet, consetetur sadipscing" >
  <img src="path-to-your-thumbnail-image default-path:src/media/thumbnails/01.jpg" alt="Alt Image Text" />
</a>

Using the HiDPI option

least.js 2 support all HiDPI (Retina) Devices. 
To use this function you will need "@2x"-images.

What does that mean? 
Default size for thumbnails is 240px x 150px and for fullscreen 960px x 600px. 
You also need for the HiDPI option all images in double (2x) size. 
It's 480px x 300px for thumbnails and 1920px x 1200px for fullscreen images.