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).
- 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.
- IE 9+
- Safari 6.0+
- Google Chrome 29+
- Firefox 24+
- iOS 6.0+
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)
│ │ │ ├── [email protected] (HiDPI fullscreen)
│ │ └── thumbnails (Thumbnail images)
│ │ │ ├── 01.jpg (Default thumbnail)
│ │ │ ├── [email protected] (HiDPI thumbnail)
│ └── sass (SASS files)
│ │ └── assets
│ │ │ ├── _global.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _options.scss (SASS options)
│ │ └── templates
│ │ │ ├── _least.scss (least structure)
│ │ ├── style.scss (Original style-file)
─────
-
Download least.js 2 from here or "Clone in Desktop" (Button on the right side)
-
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" />- 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 -->- 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>- 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>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 trueScroll to Gallery
Scroll to fullscreen preview
default: 'scrollToGallery': true
options: false or trueHiDPI
Show '@2x' images on HiDPI devices
default: 'HiDPI': false
options: false or trueGeneral 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>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.
See the complete list of changes here.
For News, updates and support follow me @kamilczujowski on Twitter!
© Copyright 2014 Kamil Czujowski under the MIT License (MIT).