2012-06-08 3 views
2

Я пытаюсь использовать кладку jQuery 3 раза на том же сайте. Каждый блок кода работает независимо, но при попытке использовать все 3 одновременно, работает только последний. Как я могу объединить их для работы, но сохраняя разные значения и селектора, которые у каждого есть?Использование jQuery Masonry Много раз на том же сайте

/** First Instance **/ 
    var $container = $('.smallcolwrap'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.smallcol', 
      columnWidth: function(containerWidth) { 
       return containerWidth/3; }, 
      isAnimated: true 
      }); 
     }); 

    /** Second Instance **/ 
    var $container = $('.slickr-flickr-gallery'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : 'li', 
      columnWidth: 160, 
      isAnimated: true 
      }); 
     }); 

    /** Third Instance **/ 
    var $container = $('.navigationHome'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : 'li', 
      columnWidth: function(containerWidth) { 
       return containerWidth/2; }, 
      isAnimated: true, 
       animationOptions: { 
       duration: 250, 
       easing: 'linear', 
       queue: false 
       } 
      }); 
     }); 
+4

Дайте каждой переменной 'var $ container' уникальное имя, иначе каждая из них перезапишет предыдущую. –

ответ

2

Ничего себе, спасибо Кевин. Я не эксперт JS, но это было легко. Это то, что происходит, слишком долго смотря на это.

/** First Instance **/ 
var $container = $('.smallcolwrap'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.smallcol', 
     columnWidth: function(containerWidth) { 
      return containerWidth/3; }, 
     isAnimated: true 
     }); 
    }); 

/** Second Instance **/ 
var $container1 = $('.slickr-flickr-gallery'); 
    $container1.imagesLoaded(function(){ 
     $container1.masonry({ 
     itemSelector : 'li', 
     columnWidth: 160, 
     isAnimated: true 
     }); 
    }); 

/** Third Instance **/ 
var $container2 = $('.navigationHome'); 
    $container2.imagesLoaded(function(){ 
     $container2.masonry({ 
     itemSelector : 'li', 
     columnWidth: function(containerWidth) { 
      return containerWidth/2; }, 
     isAnimated: true, 
      animationOptions: { 
      duration: 250, 
      easing: 'linear', 
      queue: false 
      } 
     }); 
    }); 
Смежные вопросы