Opening image by clicking HTML + PHP + JS

Asked

Viewed 922 times

1

I’m searching the images in the database and is listing everything correct, fixed size and etc... I wanted when I clicked on it to open it bigger, on the same page, like a modal and with the bigger picture...

<?php
include('config.php');
$result = mysql_query("SELECT * FROM photos");
while($row = mysql_fetch_array($result))
{
echo '<div id="imagelist">';
echo '<p><img src="'.$row['location'].'></p>';
echo '<p id="caption">'.$row['caption'].' </p>';
echo '</div>';
}   
?>

<?php
include('config.php');
$result = mysql_query("SELECT * FROM photos");
while($row = mysql_fetch_array($result))
{
echo '<div id="imagelist" onClick="openimg()">';
echo '<p><img src="'.$row['location'].'"></p>';
echo '<p id="caption">'.$row['caption'].' </p>';
echo '</div>';
}   
?>

<script type="text/javascript">
    function openimg() {
    $('#blankImage').show();
    return false;
    }
 </script>
php javascript html

  • Your question is very broad, have you searched for ready-made modals (from bootstrap for example)? There are n ways to implement this

  • Yes, I’ve researched and I’m trying to implement, but I’m not succeeding. I’ve tried for an onClick function in the div that opens Php calling this function Function open() { $('#blankImage'). show(); Return false; } &#Xa

  • It is not in PHP that you implement this, this is front task (HTML, CSS, Javascript)

  • follows below the code

2 answers

0

0

Seeing your code doesn’t seem to me that you are using any frontend framework (Bootstrap, Materializecss). So I’ll try to explain in the following what you need to do to implement this.

1) You must have two imgs, one to be clicked and the other to be put in modal.

<!--IMG -->
<img id="img" src="...">

<!-- MODAL -->
<div id="modal">
    <img id="img-modal" src="...">
</div>

2) You should configure your CSS from both the img that will be clicked and the modal, this requires a little practice. But basically the logic is when the click event happens the #modal will be shown and the src of the img clickada passes to the modal img.

// Código JS

let img = document.querySelector('#img');

img.addEventListener('click', function(event){

    let modal = document.querySelector('#modal');
    let img-modal = document.querySelector('#img-modal');
    img.setAttribute('src', event.target.src);

    // No CSS o #modal deve esta com o display none.
    modal.style.display = 'block';

}, false);

If you have difficulty implementing the front-end part (CSS and JS) then recommend the link below.

https://www.w3schools.com/howto/howto_css_modal_images.asp

Finally, I have a code tip. Always prefer to add PHP code inside HTML and not the other way around.

Example 1:

<div>
<!-- difícil de ler -->
<?php if ($titulo == 'alguma coisa') {
    echo "<h1>". $titulo ."</h1>";
} ?>
</div>

<!-- fácil de ler -->

<?php if ($titulo == 'alguma coisa'): ?>
    <h1><?= $titulo ?></h1>
<?php endif; ?>
<?

Example 2:

<!-- difícil de ler -->
<?php

while($row = mysql_fetch_array($result))
{
echo '<div id="imagelist" onClick="openimg()">';
echo '<p><img src="'.$row['location'].'"></p>';
echo '<p id="caption">'.$row['caption'].' </p>';
echo '</div>';
} ?>

<!-- fácil de ler -->

<?php while($row = mysql_fetch_array($result)): ?>

    <div id="imagelist" onClick="openimg()">
        <p>
            <img src="<?= $row['location'] ?>">     
        </p>
        <p id="caption"><?= $row['caption'] ?></p>
    </div>

<?php endwhile;

Look for alternative syntax with PHP and echo’s short syntax.

I hope I’ve helped.

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.