Javascript 如何在照片库中添加分页?
我的HTML代码如下所示:Javascript 如何在照片库中添加分页?,javascript,jquery,html,css,pagination,Javascript,Jquery,Html,Css,Pagination,我的HTML代码如下所示: <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
启动演示模式
&时代;
情态标题
接近
我的Javascript代码如下所示:
htmlData = '';
htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>';
htmlData += '<div class="imageHotel"></div>';
$('#myModal').find('.modal-body').html(htmlData);
$(".imageHotel").hide();
$(document).on("click", "#hotel_photo", function(event){
$(".imageHotel").toggle();
event.preventDefault();
htmlData += '<div id="gallery_hotel">';
htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />';
htmlData += '</div>';
htmlData += '<div id="thumbs_hotel">';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />';
htmlData += '</div>';
$('.imageHotel').html(htmlData);
// bind the click event
$('#thumbs_hotel').off().on('click', 'img', function () {
console.log($(this).attr('src'));
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
});
htmlData='';
htmlData='照片
';
htmlData+='';
$('#myModal').find('.modal body').html(htmlData);
$(“.imageHotel”).hide();
$(文档)。在“点击”,“酒店照片”,功能(活动){
$(“.imageHotel”).toggle();
event.preventDefault();
htmlData+='';
htmlData='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
htmlData+='';
$('.imageHotel').html(htmlData);
//绑定单击事件
$('thumbs_hotel').off().on('click','img',function(){
log($(this.attr('src'));
$('largeImage').attr('src',$(this.attr('src')).replace('thumb','large'));
});
});
演示如下:
htmlData = '';
htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>';
htmlData += '<div class="imageHotel"></div>';
$('#myModal').find('.modal-body').html(htmlData);
$(".imageHotel").hide();
$(document).on("click", "#hotel_photo", function(event){
$(".imageHotel").toggle();
event.preventDefault();
htmlData += '<div id="gallery_hotel">';
htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />';
htmlData += '</div>';
htmlData += '<div id="thumbs_hotel">';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />';
htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />';
htmlData += '</div>';
$('.imageHotel').html(htmlData);
// bind the click event
$('#thumbs_hotel').off().on('click', 'img', function () {
console.log($(this).attr('src'));
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
});
我想在我的照片库中添加分页。因此,图片每页仅显示5张图片。例如,有10张图片,然后会有2页
有什么办法解决我的问题吗
非常感谢我用了猫头鹰旋转木马
$("#thumbs_hotel").owlCarousel({
items: 5, // number of images to be moved
dots: true
});
我通过添加以下代码防止了owl转盘的滑动/触摸/拖动事件:
$(".item").on("touchstart mousedown", function(e) {
// Prevent carousel swipe
e.stopPropagation();
})
我还为导航点添加了css。您可以根据需要进行更改
.owl-carousel .item {
margin: 3px;
}
.owl-dot {
display: inline-block;
}
.owl-dots span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
请参考如果不使用库(owl.carousel library),是否可以?我已经创建了一个小提琴,用于在不使用owl的情况下实现此功能-我需要您的帮助。看这里: