Я использую «rcarousel - непрерывный карусель UQuery UI», расположенный по адресу http://ryrych.github.io/rcarousel/. После создания карусели я хочу изменить содержимое на одной из карусельных панелей. Я мог бы легко изменить содержание с помощью следующего сценария: $('#carousel').find('input.change').click(function(){$(this).parent().parent().find('div.display').html('New content');});
Динамическое изменение содержимого на rcarousel
Проблема в том, что если вы перейдете на другую панель, а затем назад, «измененная» панель вернется к исходному содержимому.
Живой пример находится по адресу http://tapmeister.com/test/ryrych-rcarousel/examples/dynamic.php, а скрипт включен ниже.
var active=true;
$("#carousel").rcarousel(
{
visible: 1,
step: 1,
width: 780,
height: 240,
speed: 500,
startAtPage: 2,
start: function() {
var carousel=$(this),parent=carousel.parent();
$('#next-slide').click(function(){if(active) {carousel.rcarousel("next");}});
$('#prev-slide').click(function(){if(active) {carousel.rcarousel("prev");}});
for (var i = 0; i < carousel.rcarousel("getTotalPages"); i++) {
$("<a />",{href:'#','class':'carousel-bullet off'})
.bind("click", {page: i},
function(event) {
if(active) {
carousel.rcarousel("goToPage", event.data.page);
event.preventDefault();
}
}
)
.appendTo("#carousel-pages");
}
// mark first page as active
$("a:eq(0)", "#carousel-pages")
.removeClass("off")
.addClass("on")
.css("background-image", "url(images/page-on.png)");
$("#next-slide, #prev-slide, .carousel-bullet")
.hover(
function(){
if(active){$(this).css("opacity", 0.7);}
},
function(){
if(active){$(this).css("opacity", 1.0);}
}
);
},
pageLoaded: function(event, data) {
$("a.on", "#carousel-pages")
.removeClass("on")
.css("background-image", "url(images/page-off.png)");
$("a", "#carousel-pages")
.eq(data.page)
.addClass("on")
.css("background-image", "url(images/page-on.png)");
}
}
);
<div id="carousel-container">
<div id="carousel">
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 0</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 1</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 2</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 3</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 4</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
<div class="slide">
<div class="sub-slide">
<img src="images/throbber.gif" class="throbber" alt="Please Wait" />
<div class="display">Display 5</div>
</div>
<div class="buttons">
<input class="change" type="button" value="change">
</div>
</div>
</div>
<a href="#" id="next-slide" class="change-slide"></a>
<a href="#" id="prev-slide" class="change-slide"></a>
<div id="carousel-pages"></div>
</div>
Вы можете проверить HTML карусели и скажите нам, если 'pane' имеет какие-либо' атрибутов данных, ', которые держат ссылки на' content'? Если вы это выясните, просто настройте этот атрибут данных и замените то, что в нем. Если нет, то вам нужно будет повторно создать экземпляр плагина. – Ohgodwhy
@Ohgodwhy. При проверке с помощью Firebug атрибуты не отображаются. Однако заметили, что в HTML включена только текущая панель. Как вы рекомендуете проверять HTML? благодаря – user1032531