blogfreakz.com » Gallery/Carousel/Slider

jQuery Multi-Node Range and Data Slider

Marvin@Blogfreakz — Wed, 08 Feb 2012 04:35:31 +0000

This is another jQuery slider that would amp up your website’s interface. The multi-node range and data slider, created by EGrappler, is extremely simple to use. It is highly customizable and has many functions aside from providing data selection and filtering.

Click on the image for the demo.

Download the zip file.

CSS

.slider.default

background-color: #D2DBEC;

border: 1px solid #299BC9;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

width: 200px;

height: 4px;

background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);

.inner.default

background: #299BC9;

-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

.draghandle.default

width: 8px;

height: 20px;

background-color: #299BC9;

.draghandle.default.selected

background-color: #ADC7EB;

The above code is for the default theme, and you can change it into your theme name. Aside from the default theme, you can choose from the following theme colors: simple, blue, steel, green, dark-green, orange and red.

When your theme is all set, you can use it like so:

$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});

Add the following in the head section of your HTML file

Add a reference to latest jQuery script
Add a reference to jqslider.js
Add a reference to jqslider.css

Add block element (div) within body of HTML and assign id and call jqslider initialize function.

Incoming search terms for the article:

How to Create Polaroid Images with CSS3

Marvin@Blogfreakz — Thu, 26 Jan 2012 04:23:40 +0000

Create a Polaroid effect with your images using CSS3! Mark of Zurb.com teaches us how to do it in this uber-cool tutorial.

Click on the above image to view the demo.

This is done with only CSS and no Javascript, with no actual text used on the images. It works on a grid of linked images that can randomly switch, just like flipping through a stack of photos. You can use any images you want to set the groundwork.

CSS

ul.polaroids a:after {

content: attr(title);

}

CSS to randomly rotate the images

/* By default, we tilt all our images -2 degrees */

ul.polaroids a {

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

}

/* Rotate all even images 2 degrees */

ul.polaroids li:nth-child(even) a {

-webkit-transform: rotate(2deg);

-moz-transform: rotate(2deg);

}

/* Don’t rotate every third image, but offset its position */

ul.polaroids li:nth-child(3n) a {

-webkit-transform: none;

-moz-transform: none;

position: relative;

top: -5px;

}

/* Rotate every fifth image by 5 degrees and offset it */

ul.polaroids li:nth-child(5n) a {

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

position: relative;

right: 5px;

}

/* Keep default rotate for every eighth, but offset it */

ul.polaroids li:nth-child(8n) a {

position: relative;

top: 8px;

right: 5px;

}

/* Keep default rotate for every eleventh, but offset it */

ul.polaroids li:nth-child(11n) a {

position: relative;

top: 3px;

left: -5px;

}

For the hover effect

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */

ul.polaroids a:hover {

-webkit-transform: scale(1.25);

-moz-transform: scale(1.25);

position: relative;

z-index: 5;

}

Final details

/* Add drop shadows and smooth out the transition (Safari only) */

ul.polaroids a {

-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

}

/* On hover, darken the shadows a bit */

ul.polaroids a {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

}

Note: This requires Safari 4.x and Chrome 5 for you to see the full effect. If you use Firefox, the enlarging transition can’t be viewed.

Incoming search terms for the article:

FlexSlider: A Responsive jQuery Slider

Keith@Blogfreakz — Tue, 10 Jan 2012 13:55:37 +0000

If you’re looking for an elegantly designed content or image slider that can adapt to different screen sizes then I have good news for you. Tyler Smith has created a jQuery slider plugin that utilizes responsive methodology called FlexSlider, which was released for Smashing Magazine.

Aside from the regular features such as fading and sliding animation, and customizable options, it also includes touch gesture in the navigation options. It has been tested on Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. And since it is touch gesture-inclusive, it supports iOS and Android devices as well.

The slider plugin uses simple, semantic markup so it is extremely lightweight (at 5Kb only, minified). You can have a fully responsive slider for your web design in just three easy steps but the best thing about is it’s absolutely FREE to download and use in private and commercial projects. The plugin is released under the MIT license and you may modify the plugin as you wish.

Check out the Live Demo or get the Plugin Download (.zip)
You can find the installation instructions, documentation and release notes at the developer’s site.

Incoming search terms for the article:

Rcarousel: A Continuous jQuery UI Carousel

Keith@Blogfreakz — Mon, 09 Jan 2012 08:50:41 +0000

Before you toss this off as just another slider review, check out this innovative content slider and carousel made with jQuery, called the rcarousel.

Created by front-end developer Wojciech rrh Ryrych, this continuous carousel is basically a jQuery UI widget which latest version (v1.1) was just released recently. Its inherent capabilities from its predecessor include custom events and a simple API.

Rcarousel supports HTML content: just place anything inside a DIV container, install the widget, and that’s it. It is highly customizable and allows the user to navigate through the content with bullets or set the scrolling to auto mode without navigation.

What sets this carousel from the others is that it has the multi carousel feature!

Check out the demo. Cool, isn’t it?

You can customize the rcarousel’s appearance by indicating the number of visible elements and a step (number of elements to scroll by). Another nice feature is loading elements on demand at runtime via API. With little effort you can fetch XML, JSON, parse them and then add elements with ‘append’ method.

Its other features are:
• Many options to choose from
• Simple to use
• Supports IMG images with links
• Auto mode
• Custom pagination

Rcarousel supports many browsers and has been tested successfully in the following:
• Internet Explorer 7+
• Firefox 3.0+
• Chrome
• Opera 10.10+
• Safari 4.0.5+

Click on the following links to download the rcarousel or its source code, and if needed, to report bugs.

If you enjoyed this carousel, you may also want to consider using Ryrych’s jQuery UI mediabox, called
rlightbox2 .

Incoming search terms for the article:

The Wall – Draggable & Endless Content Galleries For MooTools

Mufti Ali — Tue, 12 Jul 2011 16:13:59 +0000

The Wall is plugin for MooTools that enables you to create an endless grid. You choose the number of elements, The Wall will see to the rest. Every moment you may know the position of your wall or move it where you like better by clicking or dragging it.

With The Wall you decide the position of your contents punctually. Every plug is ready to hold your contents, pictures, videos, texts, everything. You are the one who chooses how to show your information.

With The Wall you may have an endless grid or an original draggable coda slider, if you like better. You’re right! The Wall can work in a traditional or draggable coda fuctionality. 2 functions and a new and original interaction system.

Requirements: MooTools 1.3.2+
Demo: http://wall.plasm.it
License: MIT License

Incoming search terms for the article:

Fathom.js – Present JavaScript in Its Native Environment

Mufti Ali — Tue, 28 Jun 2011 05:17:29 +0000

Fathom.js is javascript library that allow you to create presentation with javascript. Write your slideshow in HTML, style it with CSS and control it with some jQuery-powered JavaScript. When you’re done, Fathom.js even lets you sync the video of your presentation quickly and easily.

It has some customization option that allow you to configure Fathom.js to suit your needs, such as displayMode, margin, portable, video , timeline and more.

Fathom.js comes with mouse, keyboard and scroll bar navigation built in and provides a simple API for creating your own custom interfaces.

Requirements:
Demo: http://markdalgleish.com/presentations/jquerymobile/
License: MIT License

Incoming search terms for the article:

Chop Slider – Animated jQuery Slider With Unlimited Transition Effects

Mufti Ali — Tue, 21 Jun 2011 13:24:22 +0000

Chop Slider is the awesome animated jQuery slider taht come with unlimited transition effects. Chop Slider uses full power of CSS3 animation. It has own CSS3 support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers. It allows you to be fuly creative and create your own transition effects.

Chop Slider has a lot of flexible settings to make your transition unique. It has built in control navigation and captions control. The file size is about 3Kb minified and gzipped. Chop Slider support for Internet Explorer v6+, Firefox v3+, Google Chrome v4+, Safari v4+ and Opera v10+.

Requirements: jQuery Framework
Demo: http://www.idangero.us/cs/
License: MIT License

Incoming search terms for the article:

PhotoSwipe – The Web Image Gallery For Mobile Device

Mufti Ali — Fri, 27 May 2011 08:13:03 +0000

Inspired by the iOS photo viewer and Google images for mobile, PhotoSwipe is a HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Features

Optimised for mobile devices running a WebKit browser.
Runs on modern desktop browsers, including Internet Explorer 8 and above.
Multiple input options including swipe gestures (both mouse and screen touches), keyboard control and an interactive on screen toolbar.
Responsive to device orientation changes.
Automatically scales images to maximise screen size and orientation.
Zoom / pan and rotate images (as of v1.0.4 – experimental iOS devices only)
Works with your markup and semantic structure. Does not enforce any specific markup.
Supports image captions.
Slideshow feature to automatically play through images in the gallery.
Uses hardware acceleration where possible for smoother transitions and effects.
Can be integrated into jQuery Mobile.
Comprehensive customisation options:
Presentation controlled via CSS
Set whether the gallery loops or not i.e. when you reach the end, is the next image the first image, or does the gallery show a bounce effect to indicate that you have reached the end.
Hide or show captions and toolbar
Change caption and toolbar positions
Set the speeds of all animations used, from sliding in to fading.

PhotoSwipe comes with an example site to help you get started. There are two distributions of the library:

The default distribution optimised for WebKit and Mozilla based browsers. This distribution uses standard DOM querying and manipulation. It also uses CSS3 transformations for animations.
The jQuery distribution that uses jQuery as it’s engine.

It is recommended for WebKit based mobile devices to use the default distribution. This distribution will run faster. It does not require jQuery (so one less library to download to your mobile device). It also uses CSS3 to achieve animation effects. This is extremely noticable when running on an iOS device as animation will use hardware acceleration and will feel more “native” to the device. The default distribution will also work on desktop WebKit browsers (such as Chrome and Safari) as well as Firefox.

The current version supports mobile handsets running WebKit based browsers, i.e. iOS, Android and Blackberry 6. PhotoSwipe also runs on the desktop and has been tested on Chrome, Firefox, Safari and Internet Explorer 8 and above.

Requirements: -
Demo: http://www.photoswipe.com/latest/examples/jquery-mobile.html
License: MIT LIcense

Incoming search terms for the article:

Flux Slider – CSS3 Animation Based Image Transitions

Mufti Ali — Mon, 23 May 2011 13:46:53 +0000

Flux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin. Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

The aim is to use hardware acceleration where possible to improve performace on less powerful devices, such as mobiles & tablets.Flux requires a browser which supports CSS3 transformations and has been built to use either jQuery or Zepto.js as they share the same API. For mobile deployment Zepto is recommended due to its <5k deployment footprint.

Requirements: CSS3 Transformations Enable Browser
Demo: http://www.joelambert.co.uk/flux/
License: MIT License

Incoming search terms for the article:

Skitter – Feature Rich jQuery Slideshow Plugin With 22 Classy Animations

Mufti Ali — Thu, 21 Apr 2011 02:26:33 +0000

Skitter is a feature rich jQuery slideshow plugin that comes with 22 unique and smooth animations. It has various transition options for customization like speed, interval and animation effects. Skitter offers pagination and navigation controls that allow users to drive the slideshow as they like.

Requirements: jQuery Framework
Demo: http://thiagosf.net/projects/jquery/skitter/
License: Free License