Superdit.com » plugin

JQuery Plugin For Rotating Image

aditia rahman — Sun, 04 Dec 2011 06:50:12 +0000

Creating a jquery plugin is easier than it sound, first time I heard about creating 3rd party plugin sounds scary, maybe need more deeper understanding about the platform, but not in jquery. Well I just feel something missing if I have been using jquery for a while not to creating a plugin.

Few month ago I have created a simple tutorial to rotating image using jquery, now it would be nice if I can used as a plugin, and now it a chance to learning simple jquery plugin.

demo | download

Now just straight to the plugin code, this is the code I put on file jquery.rotate.js

(function( $ ) {
    $.fn.myrotate = function() {
        var img = this.find("img");
        var imgpos = img.position();
        var x0, y0;

        $(window).load(function() {
            img.removeAttr("width");
            img.removeAttr("height");

            x0 = imgpos.left + (img.width() / 2);
            y0 = imgpos.top + (img.height() / 2);
        });

        var x, y, x1, y1, drag = 0;

        img.css({
            "cursor": "pointer",
            "position": "relative"
        });

        img.mousemove(function(e) {
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - x0;
            y = y1 - y0;

            r = 360 - ((180/Math.PI) * Math.atan2(y,x));

            if (drag == 1) {
                img.css("transform","rotate(-"+r+"deg)");
                img.css("-moz-transform","rotate(-"+r+"deg)");
                img.css("-webkit-transform","rotate(-"+r+"deg)");
                img.css("-o-transform","rotate(-"+r+"deg)");
            }
        });

        img.mousedown(function() {
            if (drag == 0) {
                drag = 1;
                img.css("-webkit-box-shadow", "0 0 5px #999");
                img.css("-moz-box-shadow", "0 0 5px #999");
                img.css("box-shadow", "0 0 5px #999");
            } else {
                drag = 0;
                img.css("-webkit-box-shadow", "0 0 2px #999");
                img.css("-moz-box-shadow", "0 0 2px #999");
                img.css("box-shadow", "0 0 2px #999");
            }
        });

        img.mouseleave(function() {
            drag = 0;
        });
    };
})( jQuery );

The idea is similar from before, to get the image center point and get the cursor coordinate using javascript Math we can find the radian, and rotate the image using CSS. Here are a sample usage

There are some problem when you are getting image width and height directly from html tag in webkit browser, even when we are using jquery, there are a thread from stackoverflow offer many solution for this.

Slide Navigation Using JQuery With Easing Plugin

aditia rahman — Wed, 07 Sep 2011 00:26:20 +0000

Few days ago I browse the apple official site and looking some mac product, the navigation at apple mac page are using an easing effect, it separating each product by the category, I love the effect when user click on the navigation it like the products appear and disappear one by one, with the easing effect on the end movement, like bouncing on the vertical line.

If you see the source code on apple page, seems they are still using prototype.js, once are the most popular javascript framework, before the appearance of jquery. In this post I want to create something like the apple mac navigation menu using jquery easing plugins.

Demo | Download

The apple mac page not only dealing with the effect but also with the selected navigation, and for the easing effect I use jQuery easing plugin, although it is an old plugin, but it still work or maybe you can use jquery ui bounce effect for the alternative.

HTML

The html code are mostly the same as when you are create an image slideshow using the the overflow css property, and syncronize the nave of product container and navigation so it can be easily manipulated by jquery.


    
        
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
        
         
            
            
            
            
            
            
        
        
    


    Browser
    Apple
    Construction
    Cake

CSS

* {
    font-family: Arial, "Free Sans";
}
.container {
    border: 5px solid #0099cc;
    width: 700px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px 0;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#container_wide {
    width: 2800px;position: relative;
}
.product_container {
    text-align: center;
    width: 700px;
    float: left;
    position: relative;
}
.product_container a {
    margin: 0 12px;
    position: relative;
}
.nav {
    width: 700px;
    background: #0099cc;
    margin: 0 auto;
    text-align: center;
    border: 5px solid #0099cc;
    border-bottom-width: 10px;
    -webkit-border-radius: 0 0 .3em .3em;
    -moz-border-radius: 0 0 .3em .3em;
    border-radius: 0 0 .3em .3em;
}
.nav a {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    margin-right: 10px;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover {
    color: #e3e3e3;
}

JQuery

The jquery code will move each item one by one from it specific product container with a time delay, when you are creating image slideshow simply just move the div container, and the image will change.

But in this case we cannot do that cause if we move the container all the item will be move as well, but the container still needed to make the product alignment tidy.

$(document).ready(function() {
    var displayed = "product_browser";
    var cindex = 0; // current index (displayed product)

    function loopMoveLeft(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveLeft(el.next(), move);
            }, 100);
        }
    }

    function loopMoveRight(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveRight(el.prev(), move);
            }, 100);
        }
    }

    function slideItem(obj_el) {
        var product = $(obj_el).attr("id").replace("nav_", "");
        var contid = 'product_' + product;

        // current displayed element
        var elFirst = $("#"+displayed+" a:first-child");
        var elLast = $("#"+displayed+" a:last-child");
        var total_el = $("#"+displayed).children().length;

        var index = $(obj_el).index();

        // new element to displayed
        var el_f = $("#"+contid+" a:first-child");
        var el_l = $("#"+contid+" a:last-child");
        var total_new = $("#"+contid).children().length;

        var movement = -700 * index;

        if (cindex > index) {
            loopMoveRight(elLast, movement);
            setTimeout(function() {
                loopMoveRight(el_l, movement)
            }, (total_el + 1) * 100);
        } else if (cindex < index) {
            loopMoveLeft(elFirst, movement);
            setTimeout(function() {
                loopMoveLeft(el_f, movement)
            }, (total_el + 1) * 100);
        }

        cindex = index;
        displayed = contid;

        return (total_el + 5 + total_new) * 100;
    }

    var timeout;

    $(".product_nav").click(function() {
        $(".product_nav").unbind('click');
        timeout = slideItem(this);

        // prevent abusive click
        setTimeout(function() {
            $(".product_nav").bind('click', function() {
                timeout = slideItem(this);
            });
        }, timeout);
    });
});

You can see on code above this example mostly using the setTimeout to make each item move in sequence, the bind and unbind used for preventing abusive click from user and it still using setTimeout too.

Demo | Download

Easy JQuery Circular Gallery Using RadMenu Plugin

aditia rahman — Fri, 24 Jun 2011 10:45:15 +0000

Today post, let’s playing a little code with JQuery and JQuery RadMenu Plugin, cause lately I’ve been thinking about creating circular image gallery my self, and my search stop here for a moment when finding this cool plugins.

This plugin is really cool you can creating a circle from many html element that you defined, which means you don’t have to create a formula to set all the element position to create a circle form.

Plugin: RadMenu

All Code




    JQuery Circle Gallery

This example only follow the original example at the plugin page, with a little style modification and added selected image on the center of the circle, just take some attention to css position for this. If you want more advance tutorial you can read addyosmani jquery roudrr blog post, he explain step by step how to create a circle form from a set of images.

Download Demo

Jquery Tooltip Plugins and Tutorial Collection

aditia rahman — Thu, 20 Jan 2011 10:55:41 +0000

There are so many solution that offer out there for creating tool tip based on jQuery, even in the jQuery UI milestone the tool tip has been included in the project here is the jquery ui tooltip milestone, but if you need now sure you have to use the 3rd plugins or create by yourself, in this post I try to collect all that I can found including the link to the step by step tutorial.

Ready To Use Plugins

This section is for you who want to make it done in easier and faster way, most of this plugins not explain how it inside the plugins, of course you don’t want to know right? this is why you using the plugin, just to know how to use and modify it.

Superdit.com » plugin

JQuery Plugin For Rotating Image

demo | download

Slide Navigation Using JQuery With Easing Plugin

HTML

CSS

JQuery

Easy JQuery Circular Gallery Using RadMenu Plugin

All Code

Jquery Tooltip Plugins and Tutorial Collection

Ready To Use Plugins

1. jQuery Tools Tooltip

2. qTip jQuery Plugin

3. jTip – a jQuery Tool Tip

4. jQuery Plugin Tooltip

5. TipTip jQuery Plugin

6. aToolTip

7. mb Tooltip

8. vTip

9. Tipsy

10. Simpletip

Other Available Plugins

Tutorials

1. Simple Tooltip by Soh Tanaka

2. Colortip by Tutorialzine

3. Better Tooltip by Jon Cazier (Nettuts)

4. jQuery Horizontal Tooltips Menu by Queness

5. Digg Style Post Sharing Tool by Queness

6. Coda Popup Bubbles by jQuery For Designer

7. Create a Simple CSS + Javascript Tooltip with jQuery by Queness

8. jQuery Tooltips by David Walsh

9. Poshy Tip by Vadikom

Other Available Tutorials

ExtBox: An Extcore lighbox plugin