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