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

Archive for the ‘Gallery’ Category

Slider.js is a slideshow engine built with jQuery and uses CSS3 and/or HTML canvas for the transitions.

Items can have a text-caption with links and users can browse it with a pagination or using the prev-next links.

Slider's design can be completely changed as there is support for theming and interactions can be customized using the well-documented API.

Slider.js

The data source is JSON and, besides the 13 available CSS transitions, there 10 built-in and good-looking canvas functions.

P.S. The web page of the resource is also includes valuable information on CSS and canvas animations.

Slidorion is a jQuery image slider plugin that functions in parallel with an accordion displaying the related contents for each slide.

There are multiple built-in effects ('fade, slideLeft, overRight, overDown an more..) to be used for transitions.

The slide to be displayed on initial load can be defined and it can be set to autoplay (hover-on-pause exists) or only manual browsing by clicking each accordion tab.

Also, few other options exist for a better customization like the speed of transitions and interval between each slide.

Slidorion

Basic jQuery Slider is a non-complicated and lightweight (4.6kb minified) content slider plugin that can present any HTML content.

It is not feature-rich and includes only the essential functionality combined with clean semantic mark-up.

Basic jQuery Slider

There are 2 built-in animation types: fade + slide and navigation can be accomplished with prev-next controls, buttons and keyboard.

And, settings like rotation speed, animation duration and pause on hover exist for a better customization.

Ideal Forms is a lightweight framework, built on the top of jQuery, for creating good looking and user-friendly forms.

It converts standard <input> elements into ones with rounded corners having an attractive focus effect. And, radio + checkbox elements are completely customized.

No images are used, they requires minimal HTML syntax and can be completely styled with CSS (comes with 3 themes).

The framework is unobtrusive and degrades gracefully with JavaScript disabled.

jQuery Ideal Forms

Flux Slider is an image slider using CSS3 animations for creating good looking 2D or 3D transitions.

It requires jQuery or Zepto.js, inspired from the transitions of Nivo Slider jQuery plugin and mimics them without using traditional JavaScript-timer-based animations.

Flux Slider

Currently, there are 10+ transitions including Bars-Bars3D, Blinds-Blinds3D, Cube, Zip and more.

It can display a pagination and/or prev-next controls for browsing through the items.

Also, there are functions provided for auto-playing the slides and displaying captions with each.

P.S. The slider can be controlled with custom events with its API as well.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • 0 Comments
  • Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects (like curtain and mosaic).

    It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that can also display thumbnails) or the auto-slideshow functionality.

    Diapo jQuery Slideshow Plugin

    The plugin is mobile-ready and has options to enable-disable features for mobile usage.

    Transitions can also be customized by defining sliced rows-columns, the transition period and more.

    FlexSlider is a lightweight (4kb minified) jQuery content slider plugin that is fully responsive, works great in any resolution and adapts itself nicely.

    It uses unordered lists, any HTML content can be placed inside each <li> and they will be converted into slides.

    FlexSlider jQuery Plugin

    Items can be browsed with the help of navigation buttons, keyboard or an auto-slideshow feature.

    There are built-in animations offered for the transitions: fade and slide. And, it is possible to define the slide + duration speeds.

    FlexSlider also has some options to improve usability like "pausing on action" or pausing on hover".

    Similar to the The Wall plugin for MooTools that was shared few days ago, Mosaiqy is a jQuery plugin for presenting images in a Mosaic-like grid interface.

    The images are displayed inside randomly moving columns and rows where CSS3 transitions are used for the animations.

    Mosaiqy jQuery Image Gallery

    Once a thumbnail is clicked, the original version is loaded inside the grid with a nice slideIn/Out effect.

    It retrieves images from a JSON/JSONP data source which makes integrating with image hosting services pretty easy and there are already demos for Flickr, Instagram and Panoramio.

    Mosaiqy has multiple configuration options like the speed of transitions, delay between each, number of columns/rows, looping on/off and more.

    The Wall is a MooTools plugin for creating an endless grid of contents or coda sliders which can be browsed vertically and/or horizontally.

    It is very flexible and can be positioned inside/over any element whether it is a <div> or an <image> (like the logo of the resource).

    MooTools - The Wall

    The gallery (wall) generated can be browsed with dragging the interface to the direction desired. Transitions and their speed can be customized and a callback after any user interactions help customizing it more.

    Besides dragging, it can be moved to a selected coordinate which is nice for adding prev-next functionality.

    There are also various other features like reverse dragging and automatic slideshows.

    TN3 Gallery is a professional and very flexible jQuery image gallery plugin for displaying and rotating a collection of images in various ways.

    It works cross-browser (including mobile), has multiple transition effects, can show captions and present the thumbnails horizontally or vertically.

    TN3 Gallery

    The plugin can automatically generate these thumbnails with or without resizing them on the server-side (with the help of a PHP file) and enable users to browse the gallery by clicking to these thumbnails.

    Thumbnails are not the only way to view the images, there are also prev-next buttons, mouse-wheel + keyboard support, auto-slideshow and, optionally, bullet-type-of-navigation can be used rather than thumbnails.

    A lovely feature is the ability to present multiple albums with each album having its own thumbnail and caption to help users better understand "what is inside".

    TN3 Gallery Multiple Albums

    TN3 Gallery can use XML as the data source which is great for integrating the gallery with 3rd party software like CMS applications.

    For maximum customization, the API comes to the aid in every point with functions to change everything.

    There are also many other features like Flickr integration, skinning, fullscreen display, support for Cufon or @font-face and more.

    It comes in 3 flavors;

    • Lite: with limited features and free
    • Pro: with all the features and licenses to a single site
    • Multi-Site: with all the features and licenses to unlimited sites

    How to join the giveaway?

    In order to win one of the 5 Pro Licenses, just comment to this post and winners will be selected on 20 June 2011 (1 week later) with the query below:

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

    Good luck!

    Uptime Robot
    feed-holder
    FeedBurner
    • ManageWP
    • PSD to HTML
    • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
      PSD to HTML