Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Gallery’ Category

Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly.

The plugin is touch-friendly and capable of featuring any HTML content with almost any markup.

It has options for setting the pagination/sliding speed, enabling/disabling auto-play, showing bullet navigation and more.

Owl Carousel

Also, it is possible to define the number of items to be shown on desktop, tablet + mobile separately and Owl Carousel will handle that automatically.

There is also an API for controlling the carousel however we prefer.

S Gallery is another jQuery image gallery plugin that displays images in a responsive grid.

It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely.

Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.

Returning back to the grid view is possible with a click and, also, a fullscreen option exists (uses HTML5 Fullscreen API).

S Gallery

Swiper is a beautiful content slider that is built for mobile and works pretty fast as it uses hardware accelerated transitions (if available).

The slider is lightweight, uses no JavaScript frameworks and has support for “touch events” whose interaction ratio can be customized.

It responds to changes in orientation, has support for vertical + horizontal sliding and comes with built-in pagination control (bullets).

Swiper

Each swipe event brings the next/prev slide but it can be set in free mode as well where the content will be scrolled as much as you swiped.

Swiper can present multiple items at once (carousel), loop infinitely and feature any HTML content.

There is an API that allows controlling the pagination and provides callbacks on major events.

It also works on desktop browsers (mouse events are accepted) and can be extended with plugins.

Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout.

The images are displayed from an unordered list where their order is randomized on each load.

Least.js

Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kinda similar to Google Image search).

The gallery makes use of HTML5-CSS3 features and works good on responsive layouts.

Gallery CSS is a content slider that is built with HTML-CSS and without any JavaScript.

It is an ultra lightweight solution (<1kb gzipped) and comes with an acceptable browser compatibility (IE9+).

There is support for auto-play, items can be browsed with the ready-to-use bullet-navigation or by simply linking to any slide.

The slider can display any HTML and a very useful resource for simple and fast-loading galleries.

Pure CSS Content Slider  - Gallery CSS

Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile.

It has settings for enabling autoplay, defining the animation speed and stopping on hover or not.

The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.

jQuery Responsive Carousel - Flexisel

Animated GIF files are the widely-used format for displaying “loader…” images.

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas.

Sonic - HTML5 Canvas Loaders

It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized.

There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

Bespoke.js is a lightweight (<1kb minified-gzipped) JavaScript framework for crafting totally custom presentations or content sliders.

It is a foundation that offers the base (keyboard + touch support and adding the necessary classes to slide items) and the rest (CSS transitions or any other JS ) can be developed however preferred.

Bespoke.js

There is a JavaScript API provided with all the major events like next, prev, a specific slide, etc. and a plugin system exists for extending it.

Also, the demo includes awesome themes that can be find many use cases to themselves.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • 0 Comments
  • Unslider is a tiny jQuery plugin (<1kb minified and gzipped) for sliding any HTML content.

    It adapts to responsive layouts out-of-the-box and arranges itself automatically if the size of each slide is different.

    Unslider - jQuery Slider Plugin

    The slides can be browsed with the help of a bullet navigation or using keyboards. Optionally, swipe/touch support can be added with jQuery.event.swipe plugin (a plug ‘n’ play solution).

    Speed and delay of the slides can be defined and it has an API for controlling its functions.

    There is no limit on the effects that can be created/applied with Photoshop. Once you have the time, it is possible to fine tune any filter to get great results.

    Once you don’t have that time, using actions created by professionals is a very smart step to get things done quickly and still nicely.

    MightyDeals, the website of creative deals, is now offering a pack of 205 high-quality Photoshop actions for a price of $17 rather than $238.

    MightyDeals Photoshop Actions

    The pack is created by PhotographyPla.net and includes actions for Sunset & Sunrise, Black & White, Fashion, Autumn, Vintage, Faded & Hazy, Light Leaks, Monochromatic, and even more.

    Once an action is applied, it leaves the original image layer untouched but adds the effects as layers.

    MightyDeals Photoshop Actions

    This is not only smart for keeping the original but also gives the power to easily edit and/or any of the effects applied.

    These Photoshop Actions is a very handy set for Photoshop + photography fans and it is only available for the next few hours.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com