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

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 '<a href="#show" id="info-' . $i . '"><i class="fa fa-download"></i></a>';
    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.