Trying to use the fancybox image system

Question

I am trying to use the fancybox system described here: http://fearlessflyer.com/2011/01/create-an-awesome-photo-gallery-with-fancybox-and-timthumb/

I can get the thumbnails to appear, but when I include the rel=lightbox feature and script, I do not see the fancy box system working (the thumbnails look the same). And when I click an image with rel=lightbox included in the path, I get an error saying the path was not found on this server.

I am using the latest versions of jquery (jquery-1.7.1.min.js) and fancy box (v 1.3.4).

Here is the code:

<?php 
    $path =  'http://' . $_SERVER['SERVER_NAME'] . '/WhereTheImagesAre/'; 
    $files = scandir('WhereTheImagesAre/'); 

?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico?">
    <title>Title</title>
    <link type="text/css" href="/CSS/style.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fancybox-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="Scripts/fancybox/jquery.fancybox-1.3.4.css" />
    <script>

        $(document).ready(function(){
                $("a[rel=lightbox]").fancybox({
                        'transitionIn'      : 'elastic', 
                                                'transitionOut'     : 'elastic'     
                                                });
                                        });

    </script>


</head>
<body>

    <div class="logo"><img src="/images/Logo.png"/></div>

    <div class="wrap">
        <div class="content_wrap">
            <div class="content">

                <ul>
                    <?php foreach ($files as $file){ 
                            if ($file == '.' || $file == '..'){ 
                            echo ''; 
                            } else {
                            ?>
                    <li ><a href="<?php echo $path . $file; ?> rel=”lightbox” "><img src="Scripts/timthumb.php?src=<?php echo $path . $file; ?>&h=194&w=224&zc=1&q=100" /></a></li>
                    <?php } }?>
                </ul>

            </div>
        </div>
    </div>

</body>
</html>

If you can help me determine what is going wrong, I would greatly appreciate it. Thank you.

Answer 1

rel is inside href

<a href="<?php echo $path . $file; ?> rel=”lightbox” ">

should be

<a href="<?php echo $path . $file; ?>" rel=”lightbox”>

Trying to use the fancybox image system

Question

1 answers

solution1
2 ACCPTED 2012-02-14 07:32:04

Trying to use the fancybox image system

Question

1 answers

solution1 2 ACCPTED 2012-02-14 07:32:04

solution1
2 ACCPTED 2012-02-14 07:32:04