Calling PHP function twice, only works once - php

Question

I am trying to use PHP associative arrays to echo different values for text and images into HTML for different instances of a jQuery slideshow on the same page. Here's the HTML:
<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>This is the text!</p></div>
</div>
<div class='mosaic-image'><img src='imgs/the-img.png'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> `
I wrote arrays for each type of slideshow containing the text and image for each slide, here's and example:
$my_content = array(
'image1.png' => 'image1 text!',
'image2.png' => 'image2 text!'
);
Then I wrote a function with parameters for the category of slideshow and the content:
function gallery_content($content) {
foreach ( $content as $img => $txt ) {
echo "<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
I call it like this: gallery_content($my_content); and it works really well. But when I try to call it again for another set of values, only the first instance seems to work. I tried using the array directly instead of the variable as a parameter AND making a separate function for each slideshow, but keep getting the same results.
Why can't the function be called more than once? Thanks in advance.

Answer 1

My guess would be that PHP is doing its job. Check the source of the outputted document and you should see the proper number of galleries). I suspect that a CSS rule for the class gallery such as one that absolutely positions it is causing only one gallery to be visible. If you're OK with using inline CSS (which is not usually acceptable), you can have PHP add a custom position value (such as top) based on the gallery number:
function gallery_content($content) {
$num = 0;
foreach ( $content as $img => $txt ) {
echo "<div class='slide' style='top: ".(100 + 50*$num)."px'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
The example above gives the first gallery element a top of 100px (100 + 50 * 0), the second element a top of 150px, the tird 200px, and so on. You also could use some CSS3 and the new calc() feature in place of this, but CSS3 selectors are experimental and not supported in some older browsers. Using PHP and inline styles would be your safest bet.

Answer 2

See the source code that is generated on your final page(HTML) to judge whether PHP did its work or not. i think thats your resultant "galaries"(DIV) might be having the same ID or other attributes thorugh which the jQuery activates them, and so only one is being run properly (the first one), and the second one is not run.
Hope that helps.