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

Archive for the ‘Gallery’ Category

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.

    Showkase LogoIf you are looking for a quick way to create a good-looking portfolio website, there is a nice and professional option for that: Showkase.

    Showkase is a self-hosted, PHP-powered and very easy-to-use app for building HTML5 portfolio websites.

    It has a portfolio-focused, simplified admin interface where new pages (about and contact us pages) can be added, galleries can be created and images uploaded.

    Showkase

    Images can be uploading with multiple ways, Showkase auto-creates the thumbnails and they can be ordered with drag ‘n’ drops.

    The galleries can be presented with a choice of multiple viewers (JuiceBox or SimpleViewer) where both supports a chic navigation with thumbnails prev-next and/or bullet navigation options.

    There are 3 built-in themes and new themes can be created with ease (uses Smarty 3 template engine).

    Showkase Demo

    Besides these galleries, there is also a “Library” feature for uploading images and using them within the site.

    Websites created work pretty fast as the app creates lightweight HTML pages and doesn’t make any database queries.

    Also, when it comes to different devices and browsers, Showkase themes are responsive and they work well on tablets + mobile as well.

    The giveaway

    Showkase is giving away 3 Standard licenses ($49/each) to WRD readers.

    In order to join the giveaway, just comment this article and winners will be sent 1 week later (4 Feb 2013) randomly with the query below:

    SELECT * FROM wp_comments WHERE comment_post_id=3627 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck.

    The winners

    Here they are:

    • dan linsky (comment #1066874)
    • Aaron F. (comment #1065950)
    • Barry (comment #1070139)

    Congratulations.

    ayaSlider is a flexible jQuery slider plugin with a very simple usage and setup.

    The slider can display an unlimited number of items  where any HTML can be used for the slides.

    It has few options to define like the easeIn/easeOut values, the delay between each slide and the prev/next selectors.

    ayaSlider

    However, each slide can behave differently with the help of ” the options per slide”. These include the starting points of each animation, opacity, delay, easing and duration to be used.

    ayaSlider doesn’t force any styles, the look and feel can be completely customized with CSS and the options provided.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com