Popup hiển thị tất cả hình ảnh trong bài viết.

Hôm nay mình chia sẽ cho ae lấy tất cả các hình ảnh có trong bài viết đưa lên popup.

Bước 1: Cài thư viện jquery và thêm đoạn code sau vào file js.

$(document).ready(function(){
    var slideIndex =1;
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }

        slides[slideIndex-1].style.display = "block ";  
    }
    function show_popup_all_img(element){
        $(element).click(function() {
            if ( !$("#footer").find(".popup-image") == false) {
                var arr_img = [];
                var arr_id = [];
                var val_id =  $(this).attr("src");
                var i=0;
                $(element).each(function(){
                    var val = $(this).attr("src");
                    arr_img.push(val);
                })
                slideIndex = arr_img.indexOf(val_id) +1;
                $('#footer').append('<div class="popup-image"><div class="slideshow-container"></div></div>');
                $.each(arr_img, function(index, value) {

                    $('.slideshow-container').append('<div class="mySlides fade"><div class="numbertext">'+Number(index+1)+' / '+arr_img.length+'</div><img id="'+Number(index+1)+'" src="'+value+'" style="width:100%"></div>');   
                });
                $('.slideshow-container').append(' <a class="prev click-prev" >&#10094;</a><a class="next click-next">&#10095;</a>');
                showSlides(slideIndex);
                $(".closed-x").show();
            }
        });
    }
    show_popup_all_img(".single .post .entry-content img"); // 	show_popup_all_img(ten class bao tất cả image muốn lấy > img)
    $("#footer").on('click', '.click-prev', function() {
        showSlides(slideIndex += -1);
    });

    $("#footer").on('click', '.click-next', function() {
          showSlides(slideIndex += 1);
    });
     $(".closed-x").click(function() {
         $(".closed-x").hide();
     	        $(".popup-image").remove();
         });
    
    var count_click = 0;
    $("#footer").on('click', '.popup-image .mySlides img', function() {
        count_click++;
           var s=$(this).attr('id');
            if(count_click % 2 != 0)
            {
                $(this).css({'transform':'scale(1.1)'});
                $(this).css({'cursor':'zoom-in'});
            }else{
                $(this).css({'transform':'scale(1)'});
                $(this).css({'cursor':'zoom-out'});
            }
            previous=s;
    });
});

Bước 2: Thêm style này vào file style.css

.closed-x, img{
    cursor:pointer;
}
.closed-x:hover{
    color:#007e4b;
}
.popup-image{
    z-index: 999;
    position: fixed;
    width: 100% !important;
    height: 100%;
    left: 0;
    background-color: #000000de;
    top: 0;
    padding: 7%;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    object-fit:contain;
    transform: translate(-50%, -50%);
}
.popup-image img{
    margin: 0 auto;
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.zoom-button{
    display:none !important;
}