Concrete5, Imageflow and Fancybox JQuery

Question

I know the post seems long, but I'm sure there's a very simple solution. Please read through.

Ok so I have me little php here that fetches images:

<div id="<?php echo $smallThumbs; ?>" class="imageflow">
<?php 

foreach($images as $imgInfo) {
$f = File::getByID($imgInfo['fID']);

    echo '<img src="';
    echo $f->getRelativePath();
    echo '" longdesc="';
    echo $f->getRelativePath();
    echo '" ';
    echo 'alt="';
    echo $imgInfo['description'];
    echo '"/>';
        ;}; ?>

</div>

And this is the fancybox code: http://www.pastie.org/2096958

I pasted it on pastie because it was too long, and I can't make out anything.

I changed the very last bit from

$(".login-popup-link").fancybox

to

$(".imageflow").fancybox

to get any results at all. Now the popup shows but it says

"The requested content cannot be loaded. Please try again later."

Another place where I'm using the same feature, it runs smoothly with this code for the base image, which when clicked shows the popup

<a class="login-popup-link" href="#login-popup"><img src="images/vid.png" width="280" height="216"/></a>

Please help! I've also tried adding 'a' tags in the php code up top, but that just makes the whole gallery disappear.

Thank you in advance!

Answer 1

Fancybox works on the <a> tags themselves, but in your code you're pointing it to the <div> that surrounds your 'a' tags. What you need to do is change the javascript from this:

$(".imageflow").fancybox({

to this:

$(".imageflow a").fancybox({

Note that if you want multiple images to be grouped together so that you can click arrows in the fancybox to go back and forth between them, you need to give each 'a' tag the same "rel" attribute, for example:

echo '<img src="';
echo $f->getRelativePath();
echo '" longdesc="';
echo $f->getRelativePath();
echo '" rel="gallery1"';
echo 'alt="';
echo $imgInfo['description'];
echo '"/>';