duanchuli5647 2017-09-09 15:24
浏览 57
已采纳

使用模态弹出查看器显示目录中的PHP图像

How id's being rendered to page:

enter image description here

The code below will display all the photos for me in order from the 'resources/php/disImg' directory.

My goal is to click on the image and display the 'onclick' image in an image modal from the directory.

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
</div>

<!-- Displays all photos from folder -->
<div class="containerPhotos">
        <?php 
            $dirname = "resources/php/disImg/";
            $images = glob($dirname."*.{jpg,jpeg,png}",GLOB_BRACE);
            natcasesort($images);

            foreach($images as $randomImage) {
                echo '<img id="myImg" src="'.$randomImage.'" class="photo" />';
            }
        ?>
</div>

Currently I am able to target the first image with (id="myImg") from the PHP/ image directory and have it display in the modal.

Modal popup after clicking first photo:

enter image description here

<script>
// Get the modal
var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
    img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

Anyone know how to make it so whatever image I click with id="myImg" it would popup and display inside the modal?

I can't get a solution to work yet with the :nth select but I think that would work.

Below is the .css for the modal popup

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1000px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

展开全部

  • 写回答

2条回答 默认 最新

  • duannuo7878 2017-09-09 15:45
    关注

    There's a few different ways to accomplish this, but the first one off the top of my head is to add an onclick event to each of your img HTML elements in your PHP foreach loop.

            foreach($images as $randomImage) {
                echo '<img id="myImg" onclick="showImage(this)" src="'.$randomImage.'" class="photo" />';
            }
    

    Then you'll need a javascript function of the same name and you can get the source string like this.

    function showImage(imgElement) { 
       var src = imgElement.getAttribute("src");
       /* Do the stuff with your modal */}
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部