Извлечение элемента из плагина jCarousel

Question

У меня есть вопрос относительно плагина jCarousel (от sorgalla). Как правильно удалить элементы из него?

Вы можете видеть, как далеко я ушел here. Попробуйте удалить несколько элементов, а затем прокрутите вправо, в конце концов вы увидите «emtpy scroll», и именно от этого я пытаюсь избавиться.

Я пробовал использовать remove(); Функция jQuery вместо изменения css для отображения: none; но это создает странное белое пустое место, где раньше был элемент. Если вы посмотрите на jquery.jcarousel.js в строке 400, вы увидите функцию удаления, но я не уверен, как ее использовать.

Любая помощь очень ценится. Благодаря!

Answer 1

Вы, например, имеете смысл, за исключением того, что вы выходите за пределы плагина, jCarousel не знает, чтобы обновить себя. Из документов, похоже, будет работать метод remove(), о котором вы говорили. Тем не менее, это мои испытания, я никогда не мог заставить объект jCarousel на самом деле «делать правильные вещи» и обновлять его кнопки, прокручивать и т. Д.

Из-за этого я написал дополнительный метод для класса jCarousel, который делает именно это. Вы вызываете removeAndAnimate (1), чтобы удалить первый элемент в карусели и перестроить все, чтобы кнопки next/prev были включены/отключены, работает.

Также стоит отметить, что функция remove() jCarousel предотвращает удаление объекта, который в настоящее время отображается, что именно мы хотели сделать (разрешить пользователю удалять изображение из карусели, нажав на него , например).

Реализация для removeAndAnimate (I):

removeAndAnimate: function(i) { 

     var e = this.get(i); 

     var d = this.dimension(e); 

     if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px'); 

     e.remove(); 
     this.options.size--; 

     var di = this.options.visible != null ? Math.ceil(this.clipping()/this.options.visible) : null; 
     var li = this.list.children('li'); 
     var self = this; 

     if (li.size() > 0) { 
      var wh = 0, i = this.options.offset; 
      li.each(function() { 
       self.format(this, i++); 
       wh += self.dimension(this, di); 
      }); 

      this.list.css(this.wh, wh + 'px');    
     } 

     this.scroll(0,true); 
     this.buttons(); 

    } 

Я рекомендую это размещение непосредственно после осуществления удалить(). Чтобы получить доступ к экземпляру jCarousel себя с JQuery, вне функций обратного вызова:

var carousel = $("#mycarousel").data("jcarousel"); 
carousel.removeAndAnimate(1); 

Это должно работать!

Answer 2

Я нашел, где проблема с белыми коробками. Формат JCarousel() не заменяет имена классов, а просто добавляет новый. Я переписал эту функцию и она хорошо работает для меня:

format: function(e, i) { 
     // remove all class names matches 'jcarousel-item' at the start 
     $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, ''); 
     // add new class names 
     var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({ 
      'float': 'left', 
      'list-style': 'none' 
     }); 
     $e.attr('jcarouselindex', i); 
     return $e; 
} 

Answer 3

Я объединил оба ваших ответов, потому что никто не работал для меня ..

Я добавил его в моей инициализации пользовательской функции

carousel.removeAndAnimate = function(i) { 
      var counter = 1;  
      var itemsHTML = new Array(); 
      var e = this.get(i); 
      children = e.parent().find("li"); 
      $(e).remove() 
      $.each(children,function(){ 
       if(counter != i) { 
        itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
       } 
       counter++; 
      }); 
      this.size(this.options.size -1); 
      this.reset(); 
      counter = 1; 
      carousel = this; 
      $.each(itemsHTML, function(k, v){ 
       if(v != null) { 
        carousel.add(counter, v[0].innerHTML); 
        counter++; 
       } 
      }); 
      this.reload(); 
     } 

Это хорошо работает ..

Вы можете добавить дополнительные улучшения, например, прокрутку назад к позиции, которая только что была удалена.

Answer 4

$.jcarousel.fn.extend({ 
    removeAndAnimate: function(index) { 

     var itemsHTML = new Array(); 
     var counter = 0; 

     // Me guardo los que quedan 
     for(i = 0; i < this.size(); i++) 
     { 
      if(i != (index - 1)) 
       itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html(); 
     } 

     // Configuro uno menos y borro todo 
     this.size(this.options.size -1); 
     this.reset(); 


     // Vuelvo a cargarlos 
     counter = 0; 
     for(i = 0; i < itemsHTML.length; i++) 
     { 
      this.add(counter++, itemsHTML[i]); 
     } 

     this.reload(); 
    } 
}); 

ПРИМЕНЕНИЕ

var carousel = jQuery('#mycarousel').data('jcarousel'); 
carousel.removeAndAnimate(1); 

Answer 5

Моя другое решение, чтобы добавить класс к моему загруженного содержимого и удалить все элементы, которые не имеют этого класса в DOM.После «удаления» carousel.reset() эти элементы систематически теряют добавленный класс.

Вы сможете затем удалить белые коробки с:

$("li:not(.the_class)").remove(); 

Добавить это только после того, как функции carousel.add().

Это хорошо работает, и вам даже не нужно добавлять какие-либо функции в вашу карусель.

Это решение «легко перейти», и щелчок по кнопкам «предыдущая/следующая» может отображать белый квадрат. Чтобы удалить его, примените то же решение к обратному вызову buttonNextCallback/buttonPrevCallback.