Hi community,

i'm working on a jQuery plugin that's aiming to simulate one axis camera movements. The first step to achieving this is simple : use conventional, clean markup, and get the prototype to work.

Heres how to initiate the plugin :

$('#wrapper').fluidGrids({exclude: '.exclude'});

Here's a working demo of the WIP thing : http://sandbox.test.everestconseil.com/protoCitroen/home.html

Where am I having issues :

1. Is there a fast way to detect if parent of each target (clickable animated element) is a href link, and if so to save this url ?
2. My clone uses the original background image to then animate it.fade it to black/white. But when you clik on an element, image url is found, but doesn't seem to be injected. Do you see anything ?
3. Finally, about animation of elements : as you can see in source code, I'm using the container $('#wrapper') to position all animated children. What would be the perfect properties to apply to make this cross browser proof ?

Here's the source code for the plugin, fully commented.

(function($){ $.fn.extend({ //plugin name - fluidGrids fluidGrids: function(options) {

        //List and default values for available options
        var defaults = {
            //The target that we're going to use to handle click event
            hitTarget:      '.animateMe',
            exclude:        '.exclude',
            animateSpeed:   1000
        };

        var options = $.extend(defaults, options);

        return this.each(function() {

            var o = options;

            //Assign current element to variable
            var obj = $(this);

            //We assign default width height and positions to each object in order to get them back when necessary
            var objPosition = obj.position();

            //Get all ready to animate targets in innerViewport
            var items = $(o.hitTarget, obj);

            //Final coords of innerViewport
            var innerViewport = new Object();
            innerViewport.top = parseInt(objPosition.top);
            innerViewport.left = parseInt(objPosition.left);
            innerViewport.bottom = obj.height();
            innerViewport.right = obj.width();

            items.each(function(e){
                //Assign a pointer cursor to each clickable element
                $(this).css("cursor","pointer");

                //To load distant url at last, we look for it in Title Attribute
                if ($(this).attr('title').length){
                    var targetUrl = $(this).attr('title');
                }                   

                //We assign default width height and positions to each object in order to get them back when necessary
                var itemPosition = $(this).position();
                var itemTop = itemPosition.top;
                var itemLeft = itemPosition.left;
                var itemWidth = $(this).width();
                var itemHeight = $(this).height();  

                //Both the original and it's animated clone
                var original = $(this);
                //To give the 
                if (original.css('background-image')){
                    var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, '');
                    var imageToInsert = "<img src="+urlImageOriginal+"/>"                       
                }

                var clone = $(this).clone();


                original.click(function() {
                    $(clone).append(imageToInsert);
                    $(clone).attr("id","clone");
                    $(clone).attr('top',itemTop);
                    $(clone).attr('left',itemLeft);
                    $(clone).css("position","absolute");
                    $(clone).insertAfter(this);                     
                    $(this).hide();     

                    $(clone).animate({
                        top: innerViewport.top,
                        left: innerViewport.left,
                        width: innerViewport.bottom,
                        height: innerViewport.right
                        },
                        obj.animateSpeed);
                    $("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast');

                    //Si l'objet du click est un lien
                    return false;
                  });
            });             
        });
    }
});

})(jQuery);