Image Bubbles Animation Using jQuery

Sapna
Mar 07, 2012
14.5k
0
0
Article

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.

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.

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

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

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

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.

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.

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> <a href="http://www.c-sharpcorner.com"><img src="Images/csharpcorner.gif"
                alt="Add to Facebook" /></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>
    </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> <a href="http://www.c-sharpcorner.com"><img src="Images/csharpcorner.gif"
                alt="Add to Facebook" /></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>
    </div>
    </form>
</body>
</html>