28th March 2012 Marvin@Blogfreakz · CSS3, Gallery/Carousel/Slider, HTML, Javascript, Tutorials · Comments Off

JQuery Bubble Slideshow

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.

Bubble slideshow JQuery Bubble Slideshow Click on the image for the DEMO.

HTML

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bubble Slideshow Effect with jQuery | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- The plugin stylehseet -->
<link rel="stylesheet" href="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- The bubble slideshow holder -->
<ul id="slideShow"></ul>
<!-- JavaScript includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="assets/jquery.bubbleSlideshow/bgpos.js"></script>
<script src="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

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 = $('<div>',{
                                         '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('<li><img src="'+this+'" /></li>');
                                         });
                                         // 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('<li><img src="'+this+'" /></li>');
                                         });
                                         // 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('<li><img src="'+this+'" /></li>');
                                         });
                                         // 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:

About the author

Marvin@Blogfreakz

Marvin@Blogfreakz

Marvin Bea is a blogger, webmaster and musician from the Philippines. His interests include arts, photography, travel, fitness and health.

Related Posts

Correctly Embed Watermarks In Portrait And Landscape Photos Using Conditional Actions In Photoshop CS6.1

0 Comments

Oregon-Inspired Photoshop Tutorial

0 Comments

Create Google Play’s Tab Navigation Using jQuery And CSS

0 Comments

PS Advanced Compositioning

0 Comments

No comments