This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
The navigation filter bar is generated automatically from the categories you specify to each image.
- Fully responsive grid and lightbox
- Lazy Load Feature
- The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
- The filter navigation bar is generated automatically from the categories you specify to each thumbnail
- Set the number of images to load at start and when you click the “load more images” button
- Support thumbnails for the grid only to the images you want to improve performance
- Fully Responsive Grid and Lightbox
- Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
- You can specify a static width for each column or specify number of columns
- When specifying the number of columns you can set the minimum width for each column
- CSS3 Effects
- Direction aware hover effect
- Lightbox with slideshow (play, pause, auto-play)
- Easy implementation
- Compatible with Twitter Bootstrap
lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within
<script> tags with the type
text/html. Based on user action or screen width, the content can then be moved from the
<script> tag and then injected into the DOM by lazyBlock.
least.js is ajQuery plugin for Random & Responsive HTML 5, CSS3 Gallery with LazyLoad.
A very lightweight jQuery plugin to lazy load images.This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k<.
A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser’s decisions.
It sorts all types of content and is especially diligent about images, videos, and iframes making sure to load all media before assessing proper widths and heights.
InfiniWall is a script for desktop and mobile that lets you pan/scroll a potentially infinite number of elements on screen. It is obsessively optimized for mobile devices which have limited power and memory and notoriously have troubles handling a large number of tags at the same time (especially images).
The effects of lazy load images can be seen on a number of websites. This technique forces your images to pause the loading process until the reader has viewed that specific area of the page. Web designers can build this onto a webpage through a number of resources, especially jQuery plugins.
xSquare is a responsive jQuery image slider. It has a layout that consists of grids making it useful for variety of web page positions. Though the main purpose of the image slider is within a banner position it can easily be implemented as an image gallery or something similar because it is compatible with lightbox, prettyPhoto etc. The loading of images is done via smart lazyLoad with an implemented loader. Effective sliding transitions make the slider have a more dynamic look. The xSquare responsive image slider gives you the option to place up to 7 images in one slide or to place one effectively sliced photo.