This plugin is no longer maintained –  Random and Responsive HiDPI jQuery Gallery based on HTML5 and CSS3
CSS HTML JavaScript CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
node_modules
src
.gitignore
CHANGELOG.md
Gruntfile.coffee
LICENSE
README.md
config.codekit
demo.html
package.json

README.md

This plugin is no longer maintained




Visit our Homepage for Demo!
## least.js 2 > Random and Responsive HiDPI jQuery Gallery based on HTML5 and CSS3

What's new? (Update: - 10/07/2014)

Version 2.2.0 is available for download now


> [See the complete list of changes here](https://github.com/kamilczujowski/least.js-2/blob/master/CHANGELOG.md).

About least.js 2

  • least.js 2 ist smaller, faster and easier to use and include.
  • least.js 2 is optimized for HiDPI (Retina) Devices.
  • least.js 2 has more options and features.

Browser compatibility

  • IE 9+
  • Safari 6.0+
  • Google Chrome 29+
  • Firefox 24+
  • iOS 6.0+

Directory structure

  leastjs2/
        ├── README.md
        ├── node_module		(Grunt modules)
        ├── Gruntfile.coffee	(Grunt Config)
        ├── package.json		(Grunt Config)
        ├── index.html
        ├── src
        │   └──	css
        │   │	├── least.min.scss	(Minified style.scss)
        │   │ ├── least.min.css.map (Source map)
        │   └──	img
        │   │	├── close.svg
        │   │ ├── loading.svg
        │   └──	js
        │   │	└── libs
        │   │	│    └── jquery
        │   │	│    │	└── 2.0.2
        │   │	│    │	    ├── jquery.min.js
        │   │	└── least
        │   │	│   ├── least.js		(Original .js file)
        │   │	│   ├── least.min.js	(Minified .js file)
        │   │ │   ├── least.min.map (Source map)
        │   └──	media		    (Image folder)
        │   │	└── big	      (Fullscreen images)
        │   │	│   ├── 01.jpg	    (Default fullscreen)
        │   │	│   ├── 01@2x.jpg	(HiDPI fullscreen)
        │   │	└── thumbnails  (Thumbnail images)	
        │   │	│   ├── 01.jpg	    (Default thumbnail)
        │   │	│   ├── 01@2x.jpg	(HiDPI thumbnail)
        │   └──	sass	(SASS files)
        │   │	└── assets
        │   │	│   ├── _global.scss
        │   │	│   ├── _mixins.scss
        │   │	│   ├── _options.scss	(SASS options)
        │   │	└── templates
        │   │	│   ├── _least.scss		(least structure)
        │   │	├── style.scss	      (Original style-file)
        ─────

How to use least.js 2

  1. Download least.js 2 from here or "Clone in Desktop" (Button on the right side)

  2. Add the following code elements before end of </head> tag.

<!-- 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" />
  1. Add the following code elements into <body></body> tag.
<!-- 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" data-subtitle="View Picture" data-caption="Now it's possibe to add an URL-Link into caption text - <a href='http://www.google.com' target='_blank'>GOOGLE</a>" >
            <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 -->
  1. Add the following code elements before end of </body> tag.
<!-- 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>
  1. Now you need to call the Gallery with your class or id.
    Default Gallery: <ul class="least-gallery"> it's also class .least-gallery.
<script>
  $(document).ready(function(){
    $('.least-gallery').least();
  });
</script>

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': false
options: false or true

General CSS3-SASS options

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 */
	/* @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 */
	/* @end */

/* @end */

General HTML options

To add a headline, subheadline and caption text (like headline = Road Trip subheadline ="View picture" and caption="lorem ipsum" ) into your thumbnail & image-preview just use the title=""-element for headline, data-subtitle=""-element for subheadline and data-caption=""-element for caption text.

<a href="src/media/big/02.jpg" title="Train Rails" data-subtitle="View Picture" data-caption="Now it's possibe to add an URL-Link into caption text - <a href='http://www.google.com' target='_blank'>GOOGLE</a>">
    <img src="src/media/thumbnails/02.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.

Changelog

See the complete list of changes here.

Social, Copyright and License

For News, updates and support follow me @kamilczujowski on Twitter!
© Copyright 2014 Kamil Czujowski under the MIT License (MIT).