Обновить slidejs

Question

Я использую slidejs от http://www.slidesjs.com/, и я хотел обновить список изображений, потому что мне нужно добавлять и удалять изображения на лету.

Есть ли способ сделать это? Я пытался использовать delete $ .fn.pluginName, но не повезло.

Благодаря

Answer 1

У меня недавно была такая же проблема и удалось решить ее, изменив плагин.

Вот мое решение:

Добавьте эти следующие строки перед Plugin.prototype.init = function() {:

Plugin.prototype.refresh = function (number){ 
    var $element=$(this.element); 
    var _this = this; 
    this.data = $.data(this); 
    $(this.element).find(".slidesjs-pagination-item").remove(); 
    $.data(this, "total", $(".slidesjs-control", $element).children().not(".slidesjs-navigation", $element).length); 
    $.each($(".slidesjs-control", $element).children(), function(i) { 
     var $slide; 
     $slide = $(this); 
     return $slide.attr("slidesjs-index", i); 
     }); 
    $.each($(".slidesjs-control", $element).children(), function(i) { 
     var $slide; 
     $slide = $(this); 
     return $slide.attr("slidesjs-index", i); 
     }); 
     if (this.data.touch) { 
     $(".slidesjs-control", $element).on("touchstart", function(e) { 
      return _this._touchstart(e); 
     }); 
     $(".slidesjs-control", $element).on("touchmove", function(e) { 
      return _this._touchmove(e); 
     }); 
     $(".slidesjs-control", $element).on("touchend", function(e) { 
      return _this._touchend(e); 
     }); 
     } 
     $element.fadeIn(0); 
     this.update(); 
     if (this.data.touch) { 
     this._setuptouch(); 
     } 
     $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() { 
     return $(this).css({ 
      zIndex: 10 
     }); 
     }); 
     if (this.options.navigation.active) { 
     prevButton = $("<a>", { 
      "class": "slidesjs-previous slidesjs-navigation", 
      href: "#", 
      title: "Previous", 
      text: "Previous" 
     }).appendTo($element); 
     nextButton = $("<a>", { 
      "class": "slidesjs-next slidesjs-navigation", 
      href: "#", 
      title: "Next", 
      text: "Next" 
     }).appendTo($element); 
     } 
     $(".slidesjs-next", $element).click(function(e) { 
     e.preventDefault(); 
     _this.stop(true); 
     return _this.next(_this.options.navigation.effect); 
     }); 
     $(".slidesjs-previous", $element).click(function(e) { 
     e.preventDefault(); 
     _this.stop(true); 
     return _this.previous(_this.options.navigation.effect); 
     }); 
     if (this.options.play.active) { 
     playButton = $("<a>", { 
      "class": "slidesjs-play slidesjs-navigation", 
      href: "#", 
      title: "Play", 
      text: "Play" 
     }).appendTo($element); 
     stopButton = $("<a>", { 
      "class": "slidesjs-stop slidesjs-navigation", 
      href: "#", 
      title: "Stop", 
      text: "Stop" 
     }).appendTo($element); 
     playButton.click(function(e) { 
      e.preventDefault(); 
      return _this.play(true); 
     }); 
     stopButton.click(function(e) { 
      e.preventDefault(); 
      return _this.stop(true); 
     }); 
     if (this.options.play.swap) { 
      stopButton.css({ 
      display: "none" 
      }); 
     } 
     } 
     if (this.options.pagination.active) { 
     pagination = $("<ul>", { 
      "class": "slidesjs-pagination" 
     }).appendTo($element); 
     $.each(new Array(this.data.total), function(i) { 
      var paginationItem, paginationLink; 
      paginationItem = $("<li>", { 
      "class": "slidesjs-pagination-item" 
      }).appendTo(pagination); 
      paginationLink = $("<a>", { 
      href: "#", 
      "data-slidesjs-item": i, 
      html: i + 1 
      }).appendTo(paginationItem); 
      return paginationLink.click(function(e) { 
      e.preventDefault(); 
      _this.stop(true); 
      return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1); 
      }); 
     }); 
     } 
     $(window).bind("resize", function() { 
     return _this.update(); 
     }); 
     this._setActive(); 
    if (number){    
     this.goto(number+1); 
    } else { 
     this.goto(0); 
    } 

}; 

Затем измените содержание return $.fn[pluginName] = function(options,the_args) { к этому:

return $.fn[pluginName] = function(options,the_args) { 
    var the_return=this.each(function() { 
     if (!$.data(this, "plugin_" + pluginName)) { 
      return $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
     } 
    }); 
    if (typeof options=="string"){ 
     var element=this.get(0); 
     if (arguments.length>1){ 
      var the_args=Array.prototype.slice.call(arguments);; 
      the_args.splice(0,1); 
      var plugin=$.data(element, "plugin_" + pluginName); 
      return plugin[options].apply(plugin,the_args); 
     } else { 
      return $.data(element, "plugin_" + pluginName)[options](); 
     } 
    } 
    return the_return; 
}; 

Таким образом, вы могли бы назвать другие функции плагина, такого как goto.

В коде, вам просто необходимо вызвать функцию обновления, как это:

$("#id_of_container").slidesjs("refresh"); 

или, если вы хотите, чтобы обновить и перейти к следующему слайду, назовем его так:

$("#id_of_container").slidesjs("refresh",number_of_slide); 

, где number_of_slide - номер int, начинающийся с 0;

Answer 2

Я придумал (а) фанки решения. Это может быть не самый лучший способ, так как используются тяжелые манипуляции с DOM/запуск плагина, но я надеюсь, что вы получите эту идею. Результатом может быть found on this JSFiddle.

HTML

<input type="button" id="add" value="Add slide!" /> 

<div id="slides"> 
    <img src="http://placehold.it/100x100" /> 
    <img src="http://placehold.it/120x120" /> 
    <img src="http://placehold.it/140x140" /> 
    <img src="http://placehold.it/160x160" /> 
    <img src="http://placehold.it/180x180" /> 
</div> 

JavaScript

// Create a clone of the images array 
var $originalClone = $("#slides").children().clone(); 

// Remove the parent (we'll create it dynamically) 
$("#slides").remove(); 

// Create the new slides, add the children & add it to the DOM 
var $newSlides = $("<div />") 
    .append($originalClone) 
    .appendTo($("body")); 

// Execute the slide plugin 
$newSlides.slidesjs({ 
    width: 940, 
    height: 528 
}); 

$("#add").on("click", function() { 
    // Remove the old slider 
    $newSlides.remove(); 

    // Create a new slider, add the children & add it to the DOM 
    var $newSlides2 = $("<div />") 
     .append($originalClone) 
     .appendTo($("body")); 

    // Add the new image to the newly created slider 
    $("<img />") 
     .attr("src", "http://placehold.it/200x200") 
     .appendTo($newSlides2); 

    // Execute the slide plugin 
    $newSlides2.slidesjs({ 
     width: 940, 
     height: 528 
    }); 

    // In this demo, the button "add slide" can be clicked once 
    $("#add").remove(); 
}); 

Я надеюсь, что это решение дает вам подсказку в правильном направлении!

Answer 3

Это мое решение для копирования. Удаляет одну текущую вкладку.

$('#SLIDESID').slidesjs({ 
    //... 
}); 

// ... later somewhere else ... // 

var currentIndex = $('#SLIDESID').data().plugin_slidesjs.data.current; 

//remove active tab 
$('#SLIDESID [slidesjs-index="' + currentIndex + '"]').remove(); 
$('#SLIDESID [data-slidesjs-item="' + currentIndex + '"]').parent().remove(); 

//reindex tabs 
var tabs = $('#SLIDESID [slidesjs-index]'); 
tabs.each(function(idx, elem){ 
    $(elem).attr('slidesjs-index', idx); 
}); 

//reindex pagination 
$('#SLIDESID [data-slidesjs-item]').each(function(idx, elem){ 
    $(elem).attr('data-slidesjs-item', idx); 
    $(elem).text(idx+1); 
}); 

//tweek plugin data 
$('#SLIDESID').data().plugin_slidesjs.data.total = tabs.length; 
$('#SLIDESID').data().plugin_slidesjs.data.current--; 

//animate to new element by clicking on NEXT 
$('#SLIDESID .slidesjs-next').click();