Post
Ask Question

Image Bubbles Animation Using jQuery


Introduction

In this article we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website.

Description

We will take the form of an easy to use jQuery plugin. Since most of the work is done by the plugin. To be able to use the plugin, you will need to include imgbubbles.css and imgbubbles.js in the head of the page. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle and the full image which will be automatically resized to fit into the screen.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.

img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

img2.gif

img3.gif

Step 3 :  In this step we are adding four images in the "Images" folder of the project.

img4.jpg

Step 4 : In this step add the imgbubbles.css file to your Styles folder.

img5.jpg

Right-click on the sagscroller.css file->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" type="text/css" href="Styles/imgbubbles.css" />

Step 5: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section.

<style type="text/css">
        #orbs li
        {
            width: 65px;
            height: 60px;
        }
        #orbs li img
        {
            width: 53px;
            height: 56px;
        }
        #squares li
        {
            width: 45px;
            height: 40px;
        }
       
        #squares li img
        {
            width: 31px;
            height: 31px;
        }
</style>

Step 6: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

img4.1.jpg

Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 7.

Step 7: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in head section or the body section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 8: In this step we have to write the jQuery code which is given below.

<script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('ul#orbs').imgbubbles({ factor: 1.75 })
            $('ul#squares').imgbubbles({ factor: 2.5 })
        })
</script>

 Step 9: In this step you will see the body code of the Default2.aspx page which is given below.

Body Code:

<body>
    <form id="form1" runat="server">
    <div>
        <h4>
            1.75x magnification</h4>
        <ul id="orbs" class="bubblewrap">
            <li><a href="http://www.c-sharpcorner.com">
                <img src="Images/csharpcorner.gif" alt="Add to Csharpcorner" /></a></li>
            <li><a href="http://www.facebook.com/">
                <img src="Images/facebook.jpg" alt="Add to Facebook" /></a></li>
            <li><a href="http://www.skype.com/intl/en/home">
                <img src="Images/skype.jpg" alt="Add to Facebook" /></a></li>
            <li><a href="http://wordpress.com/">
                <img src="Images/Wordpres.jpg" alt="Add to Facebook" /></a></li>
        </ul>
        <h4>
            2.5x magnification</h4>
        <ul id="squares" class="bubblewrap">
            <li>&nbsp;<a href="http://www.c-sharpcorner.com"><img src="Images/csharpcorner.gif"
                alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://www.facebook.com/"><img src="Images/facebook.jpg" alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://www.skype.com/intl/en/home"><img src="Images/skype.jpg"
                alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://wordpress.com/"><img src="Images/Wordpres.jpg" alt="Add to Facebook" /></a></li>
        </ul>
    </div>
    </form>
</body>

Step 10: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Bubbles effect using jQuery</title>
<link rel="stylesheet" type="text/css" href="Styles/imgbubbles.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/imgbubbles.js"></script>
<style type="text/css">
        #orbs li
        {
            width: 65px;
            height: 60px;
        }
        #orbs li img
        {
            width: 53px;
            height: 56px;
        }
        #squares li
        {
            width: 45px;
            height: 40px;
        }
       
        #squares li img
        {
            width: 31px;
            height: 31px;
        }
</style>
<script type="text/javascript"> 
        jQuery(document).ready(function ($) {
            $('ul#orbs').imgbubbles({ factor: 1.75 })
            $('ul#squares').imgbubbles({ factor: 2.5 })
        })
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h4>
            1.75x magnification</h4>
        <ul id="orbs" class="bubblewrap">
            <li><a href="http://www.c-sharpcorner.com">
                <img src="Images/csharpcorner.gif" alt="Add to Csharpcorner" /></a></li>
            <li><a href="http://www.facebook.com/">
                <img src="Images/facebook.jpg" alt="Add to Facebook" /></a></li>
            <li><a href="http://www.skype.com/intl/en/home">
                <img src="Images/skype.jpg" alt="Add to Facebook" /></a></li>
            <li><a href="http://wordpress.com/">
                <img src="Images/Wordpres.jpg" alt="Add to Facebook" /></a></li>
        </ul>
        <h4>
            2.5x magnification</h4>
        <ul id="squares" class="bubblewrap">
            <li>&nbsp;<a href="http://www.c-sharpcorner.com"><img src="Images/csharpcorner.gif"
                alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://www.facebook.com/"><img src="Images/facebook.jpg" alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://www.skype.com/intl/en/home"><img src="Images/skype.jpg"
                alt="Add to Facebook" /></a></li>
            <li>&nbsp;<a href="http://wordpress.com/"><img src="Images/Wordpres.jpg" alt="Add to Facebook" /></a></li>
        </ul>
    </div>
    </form>
</body>
</html>

Step 11: In this step we are going to run the Default2.aspx page by pressing F5.

img6.jpg

Now you are able to scroll all images automatically by moving the mouse.

img7.jpg

img8.jpg

img9.jpg

img10.jpg

Resources

Powerful Image Zoom Effect Using JQuery
Menu with blend effect using jQuery
Sliding Effect using jQuery
Power Image Zoom Tour Using JQuery


Similar Articles