Я пытаюсь реализовать функцию javascript .cycle с помощью некоторых динамических (во время выполнения) изображений. Вот сценарий Java, который у меня есть:
<style type="text/css">
.slideshow
{
margin: auto;
}
.slideshow img
{
padding-left: 20px;
padding-top: 2px;
background-color: #fff;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// trigger an ajax request to the controller action every 5s
// and inject the returned HTML fragment into a div with id="result"
window.setInterval(function () {
$("#GridDatabaseMng").load("/DataBaseMng/Status");
}, 5000);
});
j$ = jQuery.noConflict();
j$(function ($) {
$('.slideshow').cycle({
fx: 'fade',
speed: 300,
timeout: 100,
pause: 1,
});
});
</script>
и вот код бритвы, который я буду использовать, чтобы заполнить мой тег div .slideshow переменным количеством изображений ...
<td>
<div class="slideshow" ondblclick="window.location.href='/Frame/index?id=@signData.SignDataId'"
style="height:160px;padding:2px;border:2px solid red; ">
<!--
<img alt="" src="@Url.Content("~/Content/img/image1.bmp")" />
<img alt="" src="@Url.Content("~/Content/img/image2.bmp")" />
<img alt="" src="@Url.Content("~/Content/img/image3.bmp")" />
-->
@if (signData.Images != null)
{
foreach (Object image in signData.Images)
{
if (i == 0)
{
<img alt="" src="@Url.Content(image.ToString())" height="50px" width="50px"
}
else
{
<img alt="" src="@Url.Content(image.ToString())" height="50px" width="50px" />
}
i = i + 1;
}
}
</div>
</td>
Это некоторый унаследованный код, который, очевидно, «работал», но я не уверен, какова цель приведенного выше оператора if, поскольку он, кажется, делает то же самое - я ни в коем случае (явно) не эксперт Java или HTML и т. д. ...
Что происходит, когда я просматриваю страницу (скажем, у меня есть 3 изображения в signData.Images), я получаю три изображения, показывающие все сразу, что для меня имеет смысл. Я отладил javascrip, и он вызывается. Если я раскомментирую жестко закодированные теги изображений выше (и удаляю свой код бритвы), цикл работает нормально, пока не включится мой setInterval (), и в этом случае цикл останавливается, и все три изображения отображаются вместе (например, как показывает мой код бритвы). ).
Эта страница .cshtml является частичным представлением, которое возвращается контроллером через функцию setInterval (). Поэтому я не уверен, что это команда setInterval (), которая вызывает его остановку, или тот факт, что страница (я думаю (обновляется / перезагружается).
Итак, я думаю, что два моих главных вопроса:
1 - Как я могу продолжать свой цикл с помощью функции setInterval ()?
2 - Как я могу заставить мой код бритвы работать для отображения динамического или переменного списка?
Надеюсь, я предоставил достаточно информации здесь. Я использую файл сценария "cylce-js / jquery.cycle.lite.min.js".
Просто чтобы проконсультироваться о предложении firebug, вот представление о том, что генерируется:
<td>
<div class="slideshow" style="height:160px;padding:2px;border:2px solid red; " ondblclick="window.location.href='/Frame/index?id=2'">
<img width="50px" height="50px" src="/Content/Frames/2_1_11_11.bmp" alt="">
<img width="50px" height="50px" src="/Content/Frames/2_2_12_12.bmp" alt="">
<img width="50px" height="50px" src="/Content/Frames/2_3_13_13.bmp" alt="">
</div>
</td>
Однако я только что понял, что этот блок будет повторяться n раз (он содержится в таблице). Таким образом, каждая строка будет иметь эквивалент этого (даже если значения src будут разными). Может быть, повторяющееся имя класса вызывает проблемы? Однако не уверен, что j $ = jQuery.noConflict (); может быть что-то с этим делать ???
Я посмотрю, смогу ли я немного глубже понять, почему цикл вообще не работает, но приведенный выше html для меня выглядит правильным?
РЕДАКТИРОВАТЬ 2
Ok. После еще нескольких экспериментов, если я изменю свою функцию setInterval () на:
$(document).ready(function () {
// trigger an ajax request to the controller action every 5s
// and inject the returned HTML fragment into a div with id="result"
window.setInterval(function () {
$.post('@Url.Content("~/DataBaseMng/Status")', function (data) { $("#GridDatabaseMng").html(data); });
}, 5000);
});
он делает то же самое. То есть остановите циклический переход и отобразите все теги соответствующим образом за один раз в элементе слайд-шоу. Не уверен, что это что-то значит, но кажется, что как только я заменяю HTML тега-владельца, он останавливает цикл. Основной вид, содержащий частичный вид:
<div class="t-widget t-grid" id="GridDatabaseMng" style="width:100%;">
@Html.Partial("SignDetails", Model)
</div>
так, может быть, я могу что-то сделать в "успехе" функции Post выше, чтобы перезапустить функцию цикла?
РЕДАКТИРОВАТЬ 2
Ok. Вроде как дела идут. Я изменил свой сценарий так:
$("#GridDatabaseMng").load('@Url.Content("~/DatabaseMng/Status")', function () { DoCycle(); });
function DoCycle() {
j$(function ($) {
$('#slideShowId').cycle({
timeout: 100,
speed: 500
});
});
});
}
и это прекрасно работает, когда в моей таблице только одна строка (в которой столбец slideShowId является столбцом). Я думаю, в этом есть смысл, потому что я получаю несколько идентификаторов slideShowId.
Может кто-нибудь сказать мне, как я могу создать уникальные идентификаторы (или имена классов, которые я предполагаю) в этом случае?
Описанный тег - это то, что выше. (div id = "slideShowId" class = "слайд-шоу" ...)
Спасибо