CODEWITHSUNDEEP
javascriptjqueryhtmlcsspagination
moses toh
moses toh

Reputation: 13192

How to add pagination in photo gallery?

My HTML Code is like this :

<!-- 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">&times;</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 -->

My Javascript Code is like this : 

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'));
        });

    });

Demo is like this : https://jsfiddle.net/oscar11/10td0yww/5/

I want add pagination in my photo gallery. So the images shown only 5 pictures per page. for example, there are 10 pictures, then there will be 2 page

Any solution to solve my problem?

Thank you very much

Upvotes: 2

Views: 4330

Answers (1)

Developer107
Developer107

Reputation: 1758

I have used owl carousel for this. 

$("#thumbs_hotel").owlCarousel({
    items: 5, // number of images to be moved
    dots: true
});

I have prevented swipe/touch/drag event for owl carousel by adding following code:

$(".item").on("touchstart mousedown", function(e) {
    // Prevent carousel swipe
    e.stopPropagation();
})

Also I have added css for navigation dots. You can change it according to requirement.

.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;
}

Please refer the fiddle

Upvotes: 2

Related Questions