my fancybox opens if I use "id" but dont opens if I use "class"

Question

I have a article with content, and I also have a link to a div, to open a fancybox with that div content, like this:

<p>Content of the news<a class="fancybox" href="#show">See more</a></p>

Now I wanted to pass my div #show where I have the content that will appear in fancybox, I wanted to pass this to class like class = "show" and not id = "show" like I have.

But, when Im trying this the fancybox dont open like this:

<p>Content of the news<a class="fancybox" href=".show">See more</a></p>

<div class="show">

This is my full html:

<article id="loop-news">

    <h2>
    Title of the News
    </h2>
    <span>Date of the news</span> 
    <p>Content of the news<a class="fancybox" href="#show">See more</a></p>


    <div id="show-container">
        <div id="show">
            <h2>Title of the news</h2>
            <span>Date of the news</span>
            <img src="images/image1.jpg"  /> <br />  
            <p>Content of the news</p>
        </div>
    </div>


</article>

My script jQuery:

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        autoSize    : false,
        closeClick  : false,    
    });
})

My php:

while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC))
    echo '<article id="loop-news">';
            echo '<h2>';
            echo '<a href="#show" class="x" >'.$readNewsResult ['title'].'</a><br />';
            echo '</h2>';
            echo '<p>'.$readNewsResult ['content'].'<a class="fancybox" href="#show.'.$countitems++.'">See more</a></p>';

            echo '<div id="show-container">';
                echo '<div id="show.'.$countitems++.'">';
                    echo '<h2>'.$readNewsResult ['title'].'</h2>';
                    echo '<p>'.$readNewsResult ['content'].'</p>';
                 echo '</div>';    
             echo '</div>';
    echo '</article>';
}

Do you know why the fancybox dont open if I use class?

Answer 1

In case you are really desperate you can always convert the class="" attribute to an id.

It is ugly and probably useless, but if you cannot change the html and cannot hack fancybox, you can

$(".show").first(function() {$(this).attr("id","show");});

Untested code, but should work, to convert the class to an id (keeps the class, adds the id)

Then $("#show").whateverYouWant..

More generic:

function addSameIdToClass(aClass) {
    $("."+aClass).first(function() {$(this).attr("id",aClass);});
}

addSameIdToClass("show");

This of course will work pnly with first class=".show" item

EDIT This seems more a PHP related question ..

I am not sure it is a good idea to have multiple class="show" items, I guess the idea of fancybox it to have one show item for many images, just put it out of the PHP loop.

If you have one show item only you can use the id, don't bother with the classes.

In case you really need more, you have to use different ids in your PHP loop:

$Count=0;
foreach($something as $someItem) {
    ...
    echo('<div id="show'.$Count.'">');
    ...
}

then inside the loop you refer to that "show" item as "#show0", "#show1", etc..:

$showId='#show'.$Count;

echo('<a ... href="'.$showId.'"');

etc..

EDIT 2 Cleaned a bit your PHP:

$countitems=0; // must init to avoid notices
while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC)) {
    $countitems++; // safer to do it here (at start or at end of loop)
    echo '<article id="loop-news'.$countitems.'" class="loop-news">';
        echo '<h2>';
            echo '<a href="#show" class="x show" >'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</a><br />';
        echo '</h2>';
        echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'<a class="fancybox" href="#show.'.$countitems.'">See more</a></p>';

        echo '<div id="show-container'.$countitems.'">';
            echo '<div id="show.'.$countitems.'" class="show">';
                echo '<h2>'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</h2>';
                echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'</p>';
            echo '</div>';    
        echo '</div>';
    echo '</article>';
}

by the way you should include $readNewsResult ['content'] and the others into an htmlentities call

htmlentities($readNewsResult['content'],ENT_COMPAT,'UTF-8')

(if UTF-8) just in case there is some < char in the database.