Blogfreakz - Web Design and Web Development resources » Gallery/Carousel/Slider

Make Your Website Behave Like An Image Slider With Revolver Plugin

Keith@Blogfreakz — Wed, 09 May 2012 06:04:23 +0000

Revolver is a jQuery plugin developed by kernelstudio from codecanyon, and it lets you turn your entire website into a slider. Instead of simply clearing out the entire window and loading the next page, Revolver simply causes the current webpage to slide off the screen and introduces the next one just like your typical image slider.

Click on the image to try the DEMO.

The plugin lets you customize attributes like the speed and of the transition and the animation of the easing. It supports the following browsers: IE7 to IE9, FireFox 4, Safari 5, Opera, and Chrome.

Incoming search terms for the article:

Creating an Accordion Image Gallery with Only CSS

Marvin@Blogfreakz — Mon, 07 May 2012 08:56:32 +0000

In creating animated transitions, Javascript has always been implemented but German web designer Heiko Stiegert has made it using only CSS. You can do this by using CSS3 pseudo-class :target and negation pseudo-class :not () properties together with CSS3 Transition Module. Get the DEMO here.

Check out his tutorial on building an accordion image gallery without Javascript by clicking on the image.

Incoming search terms for the article:

How to Create an Elastic Image Slideshow with Thumbnail Preview

Marvin@Blogfreakz — Thu, 03 May 2012 02:32:56 +0000

Web developer Mary Lou shows an easy-to-follow tutorial on how you can make a cool elastic image slideshow with thumbnail preview. The slideshow automatically adjusts and you can navigate the slides by using thumbnail preview.

Click on the image to view her tutorial.

Check out the DEMO and DOWNLOAD as well.

Incoming search terms for the article:

Slidorion – Accordion and Image Slider Rolled Into One

Keith@Blogfreakz — Wed, 04 Apr 2012 02:57:00 +0000

In web design, there is what we call an accordion, which is used to display a context menu in a limited space. Another is the image slider, a container that displays multiple images one at a time through transitions. And then there’s Ben Holland’s Slidorion, an amalgamation of an accordion and an image slider.

Each image’s title contained in your slider is always visible to the reader. This makes reviewing images much easier because they won’t have to resort to trial-and-error unlike with most image sliders, wherein they’ll still have to click on each of the buttons to check images. It’s an efficient alternative for the typical image slider.

Be sure to visit the author’s GitHub page here and show your appreciation or if ever you encounter any issues with the plugin.

See the details and demos, and get the direct download.

Incoming search terms for the article:

Photo Wall – Display Photos Like Google’s Image Search

Keith@Blogfreakz — Tue, 03 Apr 2012 05:04:20 +0000

Do you know that animated effect that you see on Google when you’re doing an image search? Well, thanks to a jQuery plugin created by Creotiv called Photo Wall, you can now mimic the same effect on your website! This plugin is great, especially if your website features lots of photos and albums.

Click on the image above to see the demo.

You need jQuery versions 1.7.1 and above to make this work. As courtesy, feel free to show your support to the author of the code by forking his GitHub page. You will also find the link to the source code, the installation instructions, and the download over there.

Incoming search terms for the article:

Create a Slideshow With HTML5

Keith@Blogfreakz — Mon, 02 Apr 2012 10:54:59 +0000

Finally, there’s no need for you to upload a PowerPoint (.pps) file and embed a code on your webpage just to be able to display a slideshow presentation. Here’s a great script I found over at AjaxShake that’ll teach you how to create an amazing slideshow in an HTML5 environment!

The code is created by Luke Mahe and Marcin Wichary. Using it is pretty easy and simple; just copy/paste the code in a new file and save it in your hard drive. Once you’re ready to use it, you can just edit the content to your liking. Two templates are also available.

Click on the respective links for more info about the code and its demo.

Incoming search terms for the article:

JQuery Bubble Slideshow

Marvin@Blogfreakz — Wed, 28 Mar 2012 01:35:35 +0000

Martin Angelov’s jQuery bubble animation effect is ideal for portfolio or gallery websites. It is very easy to use and highly customizable though it doesn’t work well with older versions of IE since it utilizes CSS3.

You can also use this effect to create backgrounds and headers. Since the plugin is made to resize automatically, you can tweak its CSS properties easily.

Click on the image for the DEMO.

HTML

Index.html

Bubble Slideshow Effect with jQuery | Tutorialzine Demo

Javascript and jQuery

jQuery.bubbleSlideshow.js

// This is the Bubble class. It takes left and top
// coordinates, size (diameter) and a image URL

function Bubble( left, top, size, imgURL ){

                    this.top     = top;
                    this.left     = left;
                    this.size    = size;

                    // This places the center of the
                    // circles on the specified position:

                    top -= size/2;
                    left-= size/2;

                    this.elem = $('',{
                                         'class':'bubble',
                                         'css'            : {
                                                             'width'                           : size,
                                                             'height'     : size,
                                                             'top'                                : top,
                                                             'left'                                : left,
                                                             'background-position': (-left)+'px '+(-top)+'px',
                                                             'background-image': 'url('+imgURL+')'
                                         }
                    });

}

// The fly from method takes a starting position, time,
// and a callback function, executed when the animation finishes.

Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

                    time = time || 250;
                    callBack = callBack || function(){};

                    startX -= this.size/2;
                    startY -= this.size/2;

                    // Offsetting the element

                    this.elem.css({
                                         'display'                                                                 : 'block',
                                         'backgroundPositionX'                : -startX,
                                         'backgroundPositionY'                : -startY,
                                         'left'                                                                                             : startX,
                                         'top'                                                                                             : startY
                    });

                    // Animating it to where it should be

                    this.elem.animate({
                                         'backgroundPositionX'                : -this.left,
                                         'backgroundPositionY'                : -this.top,
                                         'left'                                                                                             : this.left,
                                         'top'                                                                                             : this.top
                    }, time, 'easeOutCirc', callBack );

};

// Helper function for generating random
// values in the [min,max] range

function rand( min, max ){
                    return Math.floor( Math.random()*((max+1)-min) + min);
}

The function creates different bubble objects. It has three parameters: stage, imgURL and func.

Every transition shows a random set of bubbles that vanish when the image moves on to the next.

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

After creating the set of bubbles in LI element and animating them, the next code will show the rest of the plugin since the previous codes are just functions.

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

jQuery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

                                         if(!$.isArray(photos)){
                                                             throw new Error("You need to pass an array of photo URLs as a parameter!");
                                         }

                                         photos = photos.reverse();

                                         var ul = this.addClass('bubbleSlideshow');

                                         $.each(photos,function(){
                                                             ul.append('
');
                                         });

                                         // These methods are available externally and
                                         // can be used to control the bubble slideshow

                                         ul.showNext = function(){
                                                             showNext(ul);
                                         };

                                         ul.showPrev = function(){
                                                             showPrev(ul);
                                         };

                                         ul.autoAdvance = function(timeout){
                                                             timeout = timeout || 6000;
                                                             autoAdvance(ul,timeout);
                                         };

                                         ul.stopAutoAdvance = function(){
                                                             stopAutoAdvance(ul);
                                         };

                                         return ul;
                    };

Below is the script for initializing the slideshow.

Script.js

$(function(){
                    var photos = [
                                         'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
                                         'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
                                         'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
                                         'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
                                         'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
                                         'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
                    ];

                    var slideshow = $('#slideShow').bubbleSlideshow(photos);

                    $(window).load(function(){
                                         slideshow.autoAdvance(5000);
                    });

                    // Other valid method calls:

                    // slideshow.showNext();
                    // slideshow.showPrev();
                    // slideshow.stopAutoAdvance();
});

CSS is then defined below

jQuery.bubbleSlideshow.css

ul.bubbleSlideshow{
                    position:relative;
                    list-style:none;
                    overflow:hidden;
}

.bubbleSlideshow li{
                    position:absolute;
                    top:0;
                    left:0;
}

.bubbleSlideshow li img{
                    display:block;
}

.bubbleSlideshow li div.bubble{                                        
                    -moz-border-radius:50%;
                    -webkit-border-raidus:50%;
                    border-radius:50%;

                    background-repeat:no-repeat;
                    display:none;
                    position:absolute;
}

Incoming search terms for the article:

Display Your Photos with Ultimate Photo Widget!

Keith@Blogfreakz — Thu, 22 Mar 2012 11:10:58 +0000

Ultimate Photo Widget allows you to display photos from your Flickr, Tumblr, and Pinterest accounts. And why the ‘ultimate’ monicker? Pretty much the same answer — because it allows you to display photos from your Flickr, Tumblr, and Pinterest accounts in three different styles: vertical, tiles, and slideshow, and that’s saying a lot!

Hit this image to see the demo!

This widget is created and authored by electrictreehouse and kylinuntitled . To get more info about the widget, go HERE.

Incoming search terms for the article:

jqFancy Transitions: Image Gallery Plugin with Special Transition Effects

Marvin@Blogfreakz — Tue, 13 Mar 2012 01:12:18 +0000

Click on the image above to view the tutorial.

Front-end engineer Ivan Lazarevic created jqFancy Transition, a multi-format plugin that offers several transition animation effects. Check out both the demo and download!

Incoming search terms for the article:

10 Cool jQuery Slider Tutorials

Marvin@Blogfreakz — Mon, 12 Mar 2012 10:31:56 +0000

jQuery is essential in creating a wide range of apps, plugins, and programs designed to help maximize your website design. When used in making sliders, jQuery helps produce lightweight yet extensive and highly useful applications.

Here are 10 tutorial sites on creating highly useful jQuery sliders that can amp up your WordPress blog. Click on each image to visit their respective sites.

TN3 Gallery

This highly customizable slideshow is compatible with all modern desktop and mobile browsers. It boasts of multiple effects and transitions, full-screen and slideshow options, CSS skinning, and more.

Mosaic Slideshow

This tutorial features tile transition effect when you move the images from one slide to another, all using jQuery.

Elastic Image Slideshow with Thumbnail Preview

This tutorial will teach you how to create a responsive slideshow with thumbnail preview. The slideshow automatically adjusts to its container, where you can navigate through the slides with the autoplay option.

Rotating Slideshow

JQuery and CSS are responsible for the cool rotation effect in this tutorial.

MopSlider Content Slider

The MopSlider plugin is generated with PHP, and uses plain txt file as a data source for the configurations. Icons used on this tutorial are courtesy of tonev.deviantart.com.

Apple-Style Slideshow Gallery

This Apple-style slideshow gallery is entirely front-end based with no database or PHP required.

Automatic Image Slider

The automatic image image slider is created with HTML/CSS/Javascript. It also allows you to incorporate SEO into your website and automatically adjusts to sites without Javascript.

Minimalist jQuery Slider

This simple jQuery slider features your image’s description and name.

Panning Slideshow with jQuery

This panning slideshow has a twist, using a different type of transitional animation.

Basic Slideshow with Transparent PNG Frame

This easy tutorial is perfect for beginners and focuses more on working with layered PNG’s in web layouts.