/ best free open source web resources /


Awesome CSS Loading Effects for Grid Layout Images

Posted · Category: Gallery, License Free

TutsMix has shared with us some cool CSS loading effects for grid images. You can use them on your portfolio, blog, or anywhere you want. The setup is quite simple. We use Normalize.css as an alternative to the traditional CSS reset, ZURB Foundation to create a responsive grid, Masonry to create a dynamic grid layout, imagesLoaded to check if the images have been loaded, and Infinite Scroll by Paul Irish to load more images and append them to the gallery.


Requirements: JavaScript Framework
Demo: http://tutsmix.com/demo/cool-css-loading-effects-for-grid-images/
License: MIT License

JS Plugin for Viewing Images on Full Screen

Posted · Category: Gallery, MIT License

Intense Images is a stand alone javascript library for viewing images on the full screen. Using the touch/mouse position for panning. All styling of image elements is up to the user, Intense.js only handles the creation, styling and management of the image viewer and captions.

There aren’t many restrictions for the html elements you want to use to activate the Intense image viewer, the one manditory attribute is either a src or a data-image, which needs to point to an image file. You can use data-image if you want to load in a different version of the image to the original source.


Requirements: JavaScript Framework
Demo: http://tholman.com/intense-images/
License: MIT License

Skippr – A Lighter, Faster Slideshow Plugin for jQuery

Posted · Category: Gallery, License Free

Skippr is a super simple slideshow plugin for jQuery. Simply include jquery.skippr.css inside your head tag and jquery.skippr.js just before the closing body tag.

Create a target element with divs inside, one for each slide, and add a background image with css or the style attribute. Skippr targets div tags inside of the selected element with background-images applied to them. Put this target element inside of a container element styled and positioned to your liking. The target element will completely fill it’s parent container element.


Requirements: jQuery Framework
Demo: http://iamapioneer.com/plugins/skippr/
License: License Free

How to Create Four Boxes Slideshow Effect

Posted · Category: Gallery, License Free

Codrops has shared a tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

The slideshow that we are recreating is made up of four tiles that move individually, making the image split while scaling up the new image. This combines into a really nice effect which we will re-implement using 3D transforms, transitions and animations. In addition to that effect we’ll also add two more variations. The aim that we want to keep in mind, is to achieve a super-smooth effect experience.


Requirements: CSS 3D Transforms
Demo: http://tympanus.net/Tutorials/FourBoxes/
License: License Free

How to Recreate Samsung Grid Loading Effect

Posted · Category: Gallery, License Free

If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish Samgsung Grid Loading Effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed.

The idea is to load grid images showing a swiping animation of a colored element first. For that we’ll dynamically add a division that we’ll color with the most prominent color of the associated image and then we’ll animate that element to reveal the image. We’ll add an animation that looks like the one seen on the Samsung site and we’ll also add two more, a swipe to the bottom and a swipe rotation.


Requirements: –
Demo: http://tympanus.net/codrops/2014/05/15/recreating…
License: License Free

Photopile JS – A Pile of Photos Scattered on Surface

Posted · Category: Gallery, MIT License

Photopile JS is a JavaScript/jQuery image gallery that simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile, (enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile. Thumbnails are draggable, enhancing the experience by allowing photos buried deep in the pile to be uncovered.


Requirements: JavaScript / jQuery Framework
Demo: http://photopile-js.com/
License: MIT License

Tilted Content Slideshow with 3D Effect

Posted · Category: Gallery, License Free

The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today Codrops would like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations.

Codrops has shared a tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. Please note that we’ll be using CSS 3D Transforms and CSS Animations which might not work in older or mobile browsers.


Requirements: CSS3
Demo: http://tympanus.net/Tutorials/TiltedContentSlideshow/
License: License Free

Embed Panorama Pictures on Your Website with jQuery

Posted · Category: Gallery, GPL License

jQuery Panorama Viewer helps you embed Panorama Pictures on your website. You can now display your panorama photos on your site with this plugin. To do this, first you have to include the latest jQuery library together with jquery.panorama_viewer.js and panorama_viewer.css into your document’s <head>, and then add your image to your HTML with class name “panorama”. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.


Requirements: jQuery Framework
Demo: http://www.thepetedesign.com/demos/panorama_viewer_demo.html
License: GPL License

Responsive Image Lightbox with Touch Support

Posted · Category: Gallery, MIT License

ImageLightbox.js is a lightbox only for images, not video, text, and iframes at once. No captions, navigation buttons or background cover by default. Nothing that would distract user from the main purpose. Just one source file which is only 4kb in size when minified. No messy markup.

If the default functionality is not enough, you can easily extend the plugin with custom JavaScript functions, change the settings or use a couple of useful method functions. Best of all, images fit to any screen size and are swipe-able (native behavior) on touch capable devices.


Requirements: JavaScript Framework
Demo: http://osvaldas.info/image-lightbox-responsive-touch-friendly
License: MIT License

Flat Style Scattered Polaroid Gallery in JavaScript

Posted · Category: CC License, Gallery

Codrops has made the classic look of Scattered Polaroids and bring it to a next, flat level with some nice effects. It’s a flat-style Polaroid gallery where the items are scattered randomly in a container.

When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.


Requirements: JavaScript
Demo: http://tympanus.net/Development/ScatteredPolaroidsGallery/
License: Creative Commons 2.0 License

Page 2 of 15«123456789»...
Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons