幻灯片显示与引导 [英] slide show with bootstrap
本文介绍了幻灯片显示与引导的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用引导进行幻灯片放映，以便您滑过图片。但图像不显示。只显示下一个和上一个按钮。我使用的是asp.net mvc5
这是jquery：
$（document）.ready（function（）{
$ myModal = $（'＃myModal'）;
$（'。img.img-responsive' 'click'，function（）{// < - 注意选择器的改变
var $ this = $（this），
src = $ this.attr（'src'），
html ='< img src ='+ src +'class =img-responsive/>';
//开始
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 nexthref ='+（index + 2）+'下一个& raquo;< / a>';
html + ='< a class =控制先前的href ='+（index）+'>& laquo; 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（）{
//这是我们添加逻辑
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;
//隐藏下一个按钮
if（total === newNextIndex）{
$（'a.next'）。hide ;
} else {
$（'a.next'）。show（）
}
//隐藏上一个按钮
if（newPrevIndex === 0）{
$（'a.previous'）。hide（）;
} else {
$（'a.previous'）。show（）
}
return false;
}）;
这个css / html：
< div id =tabs-2>
< div class =row>
@foreach（Model.LolaBikePhotos中的var项）
{
@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-responsivesrc =/ Images/profile/@item.ImagePathalt = >
< / div>
< div class =modal hide fadeid =myModaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< button type =buttonclass =closedata-dismiss =modalaria-label =关闭>< span aria-hidden =true>& times; ; / span>< / button>
< div class =modal-content>
< div class =modal-body>< / div>
< / div>
<！ - /.modal-content - >
< / div>
<！ - /.modal-dialog - >
< / div>
<！ - /.modal - >
}
< / div>
< / div>
谢谢
这：
html + = html;
但我不知道如何改变。
这是您将会看到的内容：
如果你看一下
中的HTML http://getbootstrap.com/javascript/#carousel
复制第一个并添加一些 Razor ，这应该会为您生成轮播。
@model List< YOUR_MODEL_NAME>
@ {var j = 0;}
< div id =carousel-example-genericclass =carousel slidedata-ride =carousel>
< ol class =carousel-indicators>
@for（var i = 0; i< Model.Count（）; i ++）
{
< li data-target =＃carousel-example-genericdata-slide -to =@ i>< / li>
}
< / ol>
< div class =carousel-innerrole =listbox>
@foreach（Model中的var item）
{
< div class =item @（j == 0？active：）>
< img src =@（string.Format（/ Images / profile / {0}，item.ImagePath））/>
< / div>
@（j = 1）
}
< / div>
< a class =left carousel-controlhref =＃carousel-example-genericrole =buttondata-slide =prev>
< span class =glyphicon glyphicon-chevron-leftaria-hidden =true>< / span>
< span class =sr-only>上一页< / span>
< / a>
< a class =right carousel-controlhref =＃carousel-example-genericrole =buttondata-slide =next>
< span class =glyphicon glyphicon-chevron-rightaria-hidden =true>< / span>
< span class =sr-only>下一页< / span>
< / a>
< / div>
EDIT
下面是一个缩略图的例子，当缩略图被点击它将打开一个模态对话框与其中的轮播。
我创建了一个JSFiddle的方案：
http://jsfiddle.net/u7hxy3zc/1/
您应该使用以下代码作为示例，并在您的视图中使用，重命名所有模型和参数。
注意：以下代码尚未编译可能有语法错误
//显示缩略图
< ; div class =col-md-2>
@for（int i = 0; i
< img src =@ Model [i] .ImageUrldata-id = @idata-action =image/>
}
< / div>
..........删除HTML以示例清除
...模式对话框启动........ .........
< div class =modal-body>
........... CAROUSEL START ............
< div id = carousel-example-genericclass =carousel slidedata-ride =carousel>
< ol class =carousel-indicators>
@for（var i = 0; i
< li data-target =＃carousel-example-genericdata- to =@ i>< / li>
}
< / ol>
< div class =carousel-innerrole =listbox>
@for（var i = 0; i
< div class =itemdata-image-id = @i>
//用于测试的显示i
@i
< img src =@ Model [i] .ImageUrl/>
}
< / div>
...........删除CAROUSEL的剩余...（下一个/上一个按钮）.........
............. CAROUSEL END ...................
然后在末尾添加这个jQuery来触发点击事件：
$（'body'）。on（'click'，'* [data-action =image]'，function（e）{
e.stopPropagation（）;
var img = $（this）;
var currentId = img.data（'id'）;
$（'＃myModal'）。modal（）;
var currentSlide =* [data-slide -to =''+ currentId +'];
var currentImagSlide =* [data-image-id ='+ currentId +'];
console.log （currentSlide）;
$（* [data-slide-to]）removeClass（active）;
$ ）;
var item = $（'。carousel-indicators'）。find（currentSlide）;
var imgItem = $（'。carousel-inner'）。
console.log（item）;
item.addClass（active）;
imgItem.addClass（active）;
}）;
I try to make a slide show with bootstrap, so that you slide through the images. But the images are not showing. Only the next and previous buttons are showing. I am using asp.net mvc5
this is the 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;
});
and this the 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>
Thank you
I have to edit this:
html += html;
But I dont know how to change that.
This is how you will see it:
解决方案
To make this simple
If you look at the HTML from http://getbootstrap.com/javascript/#carousel
Copy the first one and add some Razor, this should generate a Carousel for you.
@model List<YOUR_MODEL_NAME>
@{var j = 0;}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@for (var i = 0; i < Model.Count(); i++)
{
<li data-target="#carousel-example-generic" data-slide-to="@i"></li>
}
</ol>
<div class="carousel-inner" role="listbox">
@foreach (var item in Model)
{
<div class="item @(j == 0 ? "active" : "")">
<img src="@(string.Format("/Images/profile/{0}", item.ImagePath))" />
</div>
@(j = 1)
}
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
Following is an Example of a Thumbnails, when the thumbnails are clicked it will open a modal-dialog with a carousel in it.
I have created a JSFiddle of your scenario: http://jsfiddle.net/u7hxy3zc/1/
You should use the following code as an example and use in your View, Renaming all models and parameters.
Note: The following code has not been compiled May have syntax errors
// DISPLAY THUMBNAILS
<div class="col-md-2">
@for(int i =0; i < Model.Count(); i++)
{
<img src="@Model[i].ImageUrl" data-id="@i" data-action="image" />
}
</div>
.......... REMOVE HTML TO MAKE EXAMPLE CLEAR
... MODAL DIALOG START.................
<div class="modal-body">
...........CAROUSEL START............
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@for(var i = 0 ; i< Model.Count(); i++)
{
<li data-target="#carousel-example-generic" data-slide-to="@i"></li>
}
</ol>
<div class="carousel-inner" role="listbox">
@for(var i = 0; i < Model.Count(); i++)
{
<div class="item" data-image-id="@i">
// DISPLAY i for Testing
@i
<img src="@Model[i].ImageUrl" />
}
</div>
........... REMOVED REST OF CAROUSEL......(NEXT / PREV BUTTONS).........
.............CAROUSEL END...................
Then add this jQuery at the end to trigger the click event:
$('body').on('click', '*[data-action="image"]', function (e) {
e.stopPropagation();
var img = $(this);
var currentId = img.data('id');
$('#myModal').modal();
var currentSlide = "*[data-slide-to='" + currentId + "']";
var currentImagSlide = "*[data-image-id='" + currentId + "']";
console.log(currentSlide);
$("*[data-slide-to]").removeClass("active");
$(".item").removeClass("active");
var item = $('.carousel-indicators').find(currentSlide);
var imgItem = $('.carousel-inner').find(currentImagSlide);
console.log(item);
item.addClass("active");
imgItem.addClass("active");
});
这篇关于幻灯片显示与引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
