Working on a jQuery plugin : viewport simulator

Question

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);

Answer 1

I don't know if I can help you with everything... but I do what I can:

1. You can get the parent type using .is(). or comparing the tagname. I posted a demo here.

    $('.clickable').click(function(){
     if ( $(this).is('a') ) {
      alert( 'TRUE! -> url = ' + this.href ); 
     } else { 
      alert( this.tagName );
     }
    })
   

2. I can see you injecting the background image, but I'm not sure what element you are referring to - the clone? When I click on the grid, the background image opens as an image with the correct url but nothing else happens. I don't see any code to return it to it's original position.

   Are you using an image tag? (e.g. <img class="animateMe" src="/image/myimage.jpg"/>. If so, you could determine that it's an img and extract out the src using the script above.

3. I have a map that I've been animating using the ScrollTo addon in addition to the ScrollView addon... you could look at the coding of these addons or even use them!