trying to show the same content in page and also in fancybox - php

Question

Im trying to fill my articles with content that is coming from the database.
I have my articles with: title, image, date, content and with a link (read more) to open a fancybox that will show the same content of this article but in the fancybox.
So I have my div id="show-container" that corresponds to the div that shows the content in fancybox.
This div have display:none in css and it only appears when the user click in the link with #show href and class="fancybox", here:
<a class="fancybox" href="#show">Read more</a>
But I want to show the same content in fancybox so Im fill this "show" div with the same info that I put in the article.
My articles are working fine, each article is with right name,image and content.
But when I click to open the fancybox of each article all the fancyboxs have the same content, that is the content of my first article.
Anyone there know how I can fix this?
$readPost = $pdo->prepare("SELECT * FROM posts ORDER BY date DESC LIMIT 0,4");
$readPost->execute();
$folder = '../images/';
while ($readPostResult = $readPost->fetch(PDO::FETCH_ASSOC))
{
echo '<article id="loop-news">';
echo '<img src="'.$folder.$readPostResult['thumb'].'" title="'.$readPostResult['title'].'"/>';
echo '<h2>';
echo '<a href="#show" class="x" >'.$readPostResult['title'].'</a><br />';
echo '</h2>';
echo '<p>'.$readPostResult['content'].'<a class="fancybox" href="#show">Read more</a></p>';
echo '<div id="show-container">';
echo '<div id="show">';
echo '<h2>'.$readPostResult['title'].'</h2>';
echo '<br />';
echo '<img src="'.$folder.$readPostResult['thumb'].'" title="'.$readPostResult['title'].'"/>';
echo '<p>'.$readPostResult['content'].'<br /></p>';
echo '<a class="button" href="index.html">Back</a>';
echo '</div>';
echo '</div>';
echo '</article>';
}
?>
I think I need to pass the id of each news when I click in my a href:
echo '<p>'.$readPostResult['content'].'<a class="fancybox" href="#show">Read more</a></p>';
Do you know How I can do that?? Because Im already using "#show#" in my link to open the fancybox..

Answer 1

You have to use class for css instead of id

Answer 2

Your ID values are meant to be unique to the element. Because you're generate the content in a loop, you will have multiple duplicate ID values in your elements. Try changing it to this:
$i = 0;
while ($readPostResult = $readPost->fetch(PDO::FETCH_ASSOC))
{
echo '<article id="loop-news-' . $i . '">';
echo '<img src="'.$folder.$readPostResult['thumb'].'" title="'.$readPostResult['title'].'"/>';
echo '<i class="fa fa-download"></i>';
echo '<h2>';
echo '<a href="#show" class="x" >'.$readPostResult['title'].'</a><br />';
echo '</h2>';
echo '<span>'.date('d/m/Y H:i',strtotime($readPostResult['date'])).'</span>';
echo '<p>'.lmWord($readPostResult['content'],270).'<a class="fancybox" href="#show-' . $i . '" id="showFancy-' . $i . '">Read more</a></p>';
echo '<div id="show-container-' . $i . '">';
echo '<div id="show-' . $i . '">';
echo '<h2>'.$readPostResult['title'].'</h2>';
echo '<br />';
echo '<img src="'.$folder.$readPostResult['thumb'].'" title="'.$readPostResult['title'].'"/>';
echo '<p>'.$readPostResult['content'].'<br /></p>';
echo '<a class="button" href="index.html">Back</a>';
echo '</div>';
echo '</div>';
echo '</article>';
++$i;
}
You'll notice, I've created an $i variable outside the while loop, and it appends the value of $i to all your ID elements. Once at the end of the loop, it will increase $i by 1, so that all your IDs in your loop will be unique.