Hi,

I am struggling with this..I have multiple images and data with same class. As I click on a link with class
single_image it should pop up the corresponding div.
but its not working every time i click it shows me the same image.
I have tried using $("a.single_image").each( function () { $(this).fancybox({ }]; }];but this is also not working
refer code below..

jquery script:

<script type="text/javascript">
    $("a.single_image").fancybox({
        'href'   : '#data',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
</script>

php script:

while($row = mysql_fetch_array($query)) {
echo "<a class='single_image' href='#data'>" . $row[4] . "</a><br/>";
        echo '<div style="display:none"><div id="data">
        <img src="../word/wordpress/wp-content/plugins/mall_events/images/' . $row[9] . '"/><br/> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>';
}

Thanks in advance.

Recommended Answers

All 2 Replies

Member Avatar for LastMitch

@code_rum

but its not working every time i click it shows me the same image.

I think you modify the code little too much.

Take a look here:

http://fancybox.net/howto

I worked on it here's the code.

jquery script:

<script type="text/javascript">

function load_url_popup(data){

    $("a.single_image").fancybox({
        'href'   : data,
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
}
</script>

php script:

while($row = mysql_fetch_array($query)) {

    $file[$i] = date('m', strtotime($row[3]));
    $tile[$i] = date('Y', strtotime($row[3]));
    if ($file[$i] == $month && $tile[$i] == $year) {
        echo $file[$i] . " ";
        echo "<a class='single_image' href='javascript:vois{0}' onclick='load_url_popup(\"#data_".$i."\")'>" . $row[4] . "</a><br/>";
        echo '<div style="display:none"><div id="data_'.$i.'">
        <img src="../word/wordpress/wp-content/plugins/mall_events/images/' . $row[9] . '"/><br/> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>';
        echo "<img src='../word/wordpress/wp-content/plugins/mall_events/images/thumbs/" . $row[9] . "'/><br/>";
        echo $row[5] . "<br/>";
    }
    $i++;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.