duanchuli5647
2017-09-09 23:24
浏览 56

使用模态弹出查看器显示目录中的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 23: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 */}
    
    已采纳该答案
    打赏 评论
  • doubei5310 2017-09-10 00:02

    Thanks for the help guys, here's the final build that worked!

    Javascript /

    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById('img01');
    
    function showImage(imgElement) { 
       var src = imgElement.getAttribute("src");
       modal.style.display = "block";
       modalImg.src = 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";
    }
    

    PHP /

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

相关推荐 更多相似问题