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.
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
-
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>
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 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>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).