Loading images into css modal

General PHP Help
#1

My goal is to first load my data elements to html then when clicking on an image I would like the pop up modal to display the image I selected. This code only displays my image from the first $row loaded no matter which image I click on.
[php]$i=1;

$result = mysqli_query($mysqli ,“SELECT * FROM crafts”);

while($row = mysqli_fetch_array($result))
{
if ($i<=3)
{
$title = $row[‘title’];
$image = $row[‘imagelarge’];
$owner = $row[‘owner’];

echo '<div id="craftlarge">';

echo '<div id="craftlargeimage">';
echo "<a href=#openModal><img src=\"".$image."\" width=270 height=270></a>";
echo "</div>";

echo '<div id="openModal" class="modalDialog">';
echo '<div>';
echo '<a href="#" class="close">x</a>';
echo '<div id="imagemodal">';
echo "<img src=\"".$image."\">";
echo '</div>';
echo '<div id="titlemodal">';
echo "$title";
echo "</div>";
echo '<ul class="list">';
echo '<li>Materials</li>';
echo '<li>Tools</li>';
echo '<li>Category</li>';
echo '<li>Skill Level</li>';
echo '<li>Price</li>';
echo '<li>Time</li>';
echo '<li>Tutorial by</li>';
echo '</ul>';
echo '<ul class="list2">';
echo '<li>N/A</li>';
echo '<li>N/A</li>';
echo "<li>N/A</li>";
echo "<li>2</li>";
echo "<li>1</li>";
echo "<li>1</li>";
echo "<li>$owner</li>";
echo '</ul>';
echo '</div>';
echo '</div>';

echo '<div id="crafttitle">';
echo "$title";
echo "</div>";

echo '<div id="craftowner">';
echo "$owner";
echo "</div>";

echo nl2br($body);

echo "</div>";
$i++;
}[/php]
#2

First issue is that you are making divs with duplicate id’s, html id’s must be unique to the page and cannot repeat. So depending on how your modal works it’s likely seeing the first div with the id and not understanding the others cause they are all the same.

#3

@fastsol Nice Catch, I didn’t even noticed that when I first looked at it.

@Endemize to clarify a little more on what @fastsol said, it’s duplicated because you have it in a while loop, so it just repeats duplicating the div id’s

#4

Thank you, that makes sense. So, my problem is with how I’ loading the content. Any suggestions on a better way to load all the rows from a database with the formmating I built?

#5

You can do something like below, I didn’t test it. But you can see what I’m trying to attempt.

[php]
$i=1;
$iRow=1;
$result = mysqli_query($mysqli ,“SELECT * FROM crafts”);

while($row = mysqli_fetch_array($result))
{
if ($i<=3)
{
$title = $row[‘title’];
$image = $row[‘imagelarge’];
$owner = $row[‘owner’];

echo '<div id="craftlarge">';

echo '<div id="craftlargeimage">';
echo '<a href="#openModal' . $iRow . '"><img src="' .$image. '" width=270 height=270></a>";
echo "</div>";

echo '<div id="openModal' . $iRow . '" class="modalDialog">';
echo '<div>';
echo '<a href="#" class="close">x</a>';
echo '<div id="imagemodal' . $iRow . '">';
echo "<img src=\"".$image."\">";
echo '</div>';
echo '<div id="titlemodal' . $iRow . '">';
echo "$title";
echo "</div>";
echo '<ul class="list">';
echo '<li>Materials</li>';
echo '<li>Tools</li>';
echo '<li>Category</li>';
echo '<li>Skill Level</li>';
echo '<li>Price</li>';
echo '<li>Time</li>';
echo '<li>Tutorial by</li>';
echo '</ul>';
echo '<ul class="list2">';
echo '<li>N/A</li>';
echo '<li>N/A</li>';
echo "<li>N/A</li>";
echo "<li>2</li>";
echo "<li>1</li>";
echo "<li>1</li>";
echo "<li>$owner</li>";
echo '</ul>';
echo '</div>';
echo '</div>';

echo '<div id="crafttitle' . $iRow . '">';
echo "$title";
echo "</div>";

echo '<div id="craftowner' . $iRow . '">';
echo "$owner";
echo "</div>";

echo nl2br($body);

echo "</div>";
$i++;
$iRow++;
}[/php]
Sponsor our Newsletter | Privacy Policy | Terms of Service