Работа над плагином jQuery: симулятор видового экрана

Question

Я работаю над плагином jQuery, который нацелен на моделирование движения одной оси камеры. Первый шаг к достижению этого прост: используйте обычную, чистую разметку и получите прототип для работы.

Вот как начать плагин:

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

Вот рабочая демо WIP вещь: http://sandbox.test.everestconseil.com/protoCitroen/home.html

Где я имею вопросы:

1. Есть ли быстрый способ определить, является ли родительский объект для каждой цели (кликабельным анимированным элементом) ссылкой href, и если это необходимо для сохранения этого URL-адреса?
2. Мой клон использует исходное фоновое изображение, чтобы затем анимировать его. Применил его к черно-белым. Но когда вы clik на элементе, url изображения найден, но, кажется, не вводится. Вы что-нибудь видите?
3. Наконец, об анимации элементов: как вы можете видеть в исходном коде, я использую контейнер $ ('# wrapper') для размещения всех анимированных детей. Каковы были бы идеальные свойства, чтобы применить этот кросс-браузер?

Вот исходный код для плагина, полностью прокомментированный.

(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

Я не знаю, если я могу помочь вам всем ... но я делать то, что я могу:

1. Вы можете получить тип родительского используя .is(). или сравнения тэга. Я отправил demo here.

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

2. Я вижу, что вы инъекционный фоновое изображение, но я не уверен, что элемент, который вы имеете в виду - клон? Когда я нажимаю на сетку, фоновое изображение открывается как изображение с правильным URL-адресом, но ничего больше не происходит. Я не вижу никакого кода, чтобы вернуть его в исходное положение.

   Вы используете тег изображения? (Например, <img class="animateMe" src="/image/myimage.jpg"/>. Если это так, вы могли бы определить, что это IMG и извлечь из СРК с помощью сценария выше.

3. У меня есть карта, что я оживляющий с использованием ScrollTo аддон в дополнение к ScrollView аддона. .. вы можете посмотреть на кодирование этих дополнений или даже использовать их!