我嘗試使用引導程序製作幻燈片放映,以便滑過圖像。但圖像沒有顯示。只顯示下一個和上一個按鈕。我使用asp.net mvc5帶引導程序的幻燈片放映
這是jQuery的:
$(document).ready(function() {
$myModal = $('#myModal');
$('.row img.img-responsive').on('click', function() { // <-- notice the selector change
var $this = $(this),
src = $this.attr('src'),
html = '<img src="' + src + '" class="img-responsive" />';
//Start
var index = $(this).parent('.row img.img-responsive').index();
var html = '';
html += html;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="' + (index + 2) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>';
html += '</div>';
//End
updateModalBody($myModal, html);
$myModal.modal();
});
$myModal.on('hidden.bs.modal', function() {
updateModalBody($myModal, '');
});
function updateModalBody($modal, html) {
$modal.find('.modal-body').html(html);
$modal.modal('hide');
}
})
$(document).on('click', 'a.controls', function() {
//this is where we add our logic
var index = $(this).attr('href');
var src = $('ul.row li:nth-child(' + index + ') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
} else {
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if (total === newNextIndex) {
$('a.next').hide();
} else {
$('a.next').show()
}
//hide previous button
if (newPrevIndex === 0) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
return false;
});
,這的CSS/HTML:
<div id="tabs-2">
<div class="row">
@foreach (var item in Model.LolaBikePhotos)
{
@model ContosoUniversity.Models.UserProfile
@*<div class="col-lg-3 col-md-4 col-xs-6 thumb">*@
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
@*<a class="thumbnail">*@
<img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />
</div>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content">
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
}
</div>
</div>
謝謝
我必須編輯這個:
html += html;
但我不知道如何改變這一點。
這是您將如何看待它:
您的代碼有問題,我不是ASP開發人員,但請查看Bootstrap Carousel文檔並按照其步驟創建一個工作示例:http://getbootstrap.com/javascript/ #carousel – odedta
如果您仍然遇到問題,請提供您*生成的* HTML - 解析asp.net代碼後得到的標記。 –
你試過這個:src =「@ Url.Content(string.Format(」〜/ Images/Profile/{0}「,item.ImagePath))」? –