Jump to content
Larry Ullman's Book Forums
Paul

Modal Window And Php Issue

Recommended Posts

Hi all,

Hope you're all well. Please take a look at the following code:

 

if (mysqli_num_rows($r) >= 1)

{

echo'

<h2>Snippet info</h2>

<table width="780px">

';

 

while($row = mysqli_fetch_array($r, MYSQLI_ASSOC))

{

echo'

<div class="each_snippet">

<img src="images/snippets/' . $row['image'].'.jpg" width="180px" height="180px" ><br/>

<a href="#" id="openModal">View larger image....</a>

<div id="modal">

<div id="modalMask">

</div>

<div id="modalContent">

<img src="images/snippets/' . $row['image'].'.jpg" width="500px" height="500px" >

<input type="button" id="closeModal" value="Close">

</div>

</div>

<p>'. $row['price'] . '</p>

<p>'. $row['name'] . '</p>

<p>'. $row['description'] . '</p>

</div>

';

}

 

echo'

</table>

<br />';

 

mysqli_free_result($r);

}

 

(I tried using the 'Special BBCode' button to post this but it interpreted the code instead of showing it, if that makes sense. So I had to just cut and paste).

 

I have a database of information which I have queried and styled so that the results appear as a grid, as opposed to a list. That worked fine, it displayed 6 rows of data displayed as a grid.

 

I have then added Larry's 'modal window' example from his book modifying it so that when the link is clicked it shows a larger picture than the thumbnail being displayed by default. Much to my surprise, given my understanding of JS, it worked. However it only worked for the first row of data returned from the while loop. The link in subsequent 'rows' doesn't do anything. I can copy in the JS and CSS code if anyone needs it but it's straight out of Larry's book.

 

I'm struggling to understand why it would work once only as the while loop is returning the same code. As always any help is much appreciated.

 

Cheers

Paul

Share this post


Link to post
Share on other sites

Its because you need to insert the while loop in one of those model divs. I don't have the actual model window code on me now but my guess is model content div.

  • Upvote 1

Share this post


Link to post
Share on other sites

Edward,

Thanks for the response but I got sidetracked and have just now returned to this problem.

 

If I use Firebug to check the HTML that has been generated by my foreach loop above then each iteration has the correct image within the modal content div. If I use a while loop then for what am I using it? If the foreach loop was only creating a single modal content div in the first iteration then I would understand why only the first one is working but that's not the case.

 

The CSS and the JS are both external files so when the link is clicked the 'openModal' function should run (as it does with the first row of data) and display it's relevant model content.

 

If you have 2 minutes would you walk me through the logic of what's not working.

 

Cheers

Paul

Share this post


Link to post
Share on other sites

Larry,

Thanks for the response.

 

So I would need, somehow, to create 12 unique 'modalContent' id's per page. I assume that the id needs to be unique to a page, not a whole site? I would then need to change the js functions to use each of the unique id's.

 

That'll keep me quiet for a while!

 

Cheers

Paul

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...