How i make PHP/HTML images show original size onclick?

I am developing a news section that contains text and images in which the images to be clicked have to show their original size. Can someone help me with this?

    <?php
  $select_stmt=$db->prepare("SELECT * FROM teste ORDER BY id DESC;" );  //sql select query
    $select_stmt->execute();
    while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
    {
?>
<div class="container" id="fadein">
  <div class="row">
    <div class="col-sm-4">
        <div id="imagem"><img src="upload/<?php echo $row['image']; ?>" class="imagem"></div>
        <script src="scripts/javascript.js"></script>
    </div> 
        <div class="col-sm-8">
            <div class="col-sm-12" id="titulo"><?php echo $row['titulo'];?></div>
            <br>
            <div class="col-sm-12" id="sub_titulo"><?php echo $row['sub_titulo'];?></div>
            <br>
            <div class="col-sm-12" id="texto"><?php echo $row['texto'];?></div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6" align="right"><a href="edit.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning">Editar</a></div>
        <div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger">Eliminar</a></div>
    </div>
    <br>
    <br>
    <br>
    <p class="barra"></p>
    <br>
    <br>
</div>
<?php
}
?>

Answer

(Probably second part is more usefull for your use case)

If you want pure javascript, you can set a onclick event listener and get images real size (Determine original size of image cross browser?) and set this size to image. (if you want it to set to old sizes on second click, save old size to a global variable and get then set). Which will look like this:

I’m not good with pure javascript but i guess this is it.
Add this code somewhere in your file. It will run for every image

<script>
    window.onload = function() {
        images = document.getElementsByTagName("img");
        for (var i = 0; i < images.length; i++){
            images[i].onclick = function(e){
                var isBig = e.target.getAttribute('isBig');
                if (isBig === undefined || isBig == 'false'){
                    // make it big
                    e.target.setAttribute('isBig', 'true');
                    e.target.setAttribute('oldWidth', e.target.offsetWidth);
                    e.target.setAttribute('oldHeight', e.target.offsetWidth);

                    var newImg = new Image();
                    newImg.onload = function() {
                      e.target.style.width = newImg.width+"px";
                      e.target.style.height = newImg.height+"px";
                    }
                    newImg.src = e.target.getAttribute('src');
                }
                else {
                    // make it small
                    e.target.setAttribute('isBig', 'false');
                    e.target.style.width = e.target.getAttribute('oldWidth')+"px";
                    e.target.style.height = e.target.getAttribute('oldHeight')+"px";
                }
            }
        }
    }
</script>

This will set images width and height to original sizes.

If you want to make it fullscreen with absolute positioning, you need to create a new element and img tag. And you just need to set its src to image’s src. Then you can show that image. Example:

<!-- add this somewhere in body -->
<!-- container -->
<div id="bigImage" style="z-index: 4; position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden;">
    <!-- background. not necessary but usefull for close thing. -->
    <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); cursor: pointer;" onclick="closeImage()"></div>

    <!-- image element. object-fit: contain; for full window size -->
    <img src="<?php echo $row['image']; ?>" alt="bigImage" id="bigImageChild" style="position: absolute; top: 5%; left: 5%; z-index: 6; width: 90%; height: 90%; object-fit: contain;">

    <!-- close button -->
    <span onclick="closeImage()" style="position: absolute; right: 20px; top: 20px; font-weight: 900; color: white; cursor: pointer;">X</span>
</div>


<!-- script for image -->
<script>
    function closeImage() {
        document.getElementById("bigImage").style.visibility = 'hidden';
    }

    images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++){
        // on image click
        images[i].onclick = function(e){
            // set image src
            document.getElementById("bigImageChild").src = e.target.src;
            // show image
            document.getElementById("bigImage").style.visibility = 'visible';
        }
    }
</script>

Advertisement

Answer