问题
I'm using slidejs from http://www.slidesjs.com/ and I wanted to refresh the list of images, because I need to add and remove images on the fly.
Is there any way to do this? I've tried to use the delete $.fn.pluginName but no luck.
Thanks
回答1:
I recently had the same issue and manage to solve it by changing the plugin.
Here's my solution:
Add these following lines before 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);
}
};
Then, change the content of return $.fn[pluginName] = function(options,the_args) {
to this:
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;
};
This way, you could call other functions of the plugin like goto
.
In the code, you just need to call the refresh function like this:
$("#id_of_container").slidesjs("refresh");
or, if you want to refresh and jump to another slide, call it like this:
$("#id_of_container").slidesjs("refresh",number_of_slide);
where number_of_slide
is an int number starting at 0;
回答2:
I've come up with a (rather funky) solution. It might not be the best way since heavy DOM manipulations/starting the plugin is used, but I hope you get the idea. The result can be 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();
});
I hope this solution gives you a hint in the good direction!
回答3:
Here is my copy and paste solution. Removes single current tab.
$('#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();
来源:https://stackoverflow.com/questions/16043600/refresh-slidejs