Open images on the same page with Fancybox in CakePHP Impossible

Question

Open images on the same page with Fancybox in CakePHP Impossible

Navigation

#1 by (1 votes)

6

I'm trying to make a gallery, which consists of a list of thumbnails, that clicking on the items eventually would pop up a popup like the first example here .

After several failed attempts, where even the thumbnails did not appear, at the suggestion of others, I tried to solve this problem with the CakePHP-Fancybox , which partially solved the problem. However when clicking on the thumbnails the user is redirected to another page that shows the original image instead of floating it on the thumbnail page.

After resolving the various errors related to not finding javascript and having reinstalled the Fancybox Plugin for CakePHP, the lightbox does not appear. How can these situations be resolved?

Controller Action :

     public function ShowImages(){
        $this->layout = 'default';
        $this->loadModel('GalleryImage');
        $gallery_images = $this->GalleryImage->find('all');
        $this->set('gallery_images', $gallery_images);
    //$image_display = $gallery_image['path']
    }

View :

<h2>Galeria</h2>
<br>
<table width="100%">
<tr>
    <?php
        $i=0;
        foreach( $gallery_images as $gallery_image ):?>
    <td align="center" class="thumbnail" style="display:inline-block;">
    <?php
        $src3 =$this->webroot. 'img/gallery/' .$gallery_image['GalleryImage']['path'];
        //$src3 = 'img/gallery/' .$gallery_image['GalleryImage']['path'];
        $this->Fancybox->setProperties( array( 
            'class' => 'fancybox3',
            'className' => 'fancybox.image',
            'title'=>'Single Image',
            'rel' => 'gallery1'
            )
        );
        $this->Fancybox->setPreviewContent($this->Timthumb->image('/img/gallery/' . $gallery_image['GalleryImage']['path'] , array('width' => 267, 'height' => 189)));

        $this->Fancybox->setMainContent($src3);
        echo $this->Fancybox->output();
    ?>
    </td>
    <?php $i++;
        if($i==4){
            echo "</tr><tr>";
            $i=0;   
        }
    ?>
<?php endforeach ?>
</tr>

Layout (head):

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><?php echo $title_for_layout;//titulo dinamico da página?></title>
    <?php
    echo $this->Html->meta('icon');
    //echo $this->Html->css('cake.generic');
    echo $this->fetch('meta');
    echo $this->fetch('css');
    echo $this->Html->script('jquery-1.11.0.min');

    echo $this->Html->script('main');
    echo $this->Html->css('main');

    echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');

    echo $this->Html->css('bootstrap-theme.min');
    echo $this->Html->css('bootstrap.min');
    echo $this->Html->css('bootstrap');

    echo $this->Html->script('bootstrap.min');
    echo $this->Html->script('bootstrap');
    echo $this->Html->script('dropdown');
    echo $this->Html->script('collapse');
    ?>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $(".dropdown-toggle").click(function(){
                $(this).dropdown('toggle');
            });
        });    
    </script>
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
            $(document).ready(function () {
                $(".fancybox3").fancybox(e){
                    openEffect : 'none',
                    closeEffect : 'none',
                    helpers : {
                        title : {
                            type : 'float'
                        }
                    }
                    e.preventDefault;
                });
            });
    </script> 
    </head>

javascript jquery cakephp fancybox

asked by anonymous 17.03.2014 / 17:55

1 answer

Scheduling div as image Changing app.config connectionStrings physically in runtime

score 1 · Accepted Answer

According to your information, it looks like neither js nor css are loading correctly.

In your layout replace:

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">     </script>
 <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">

by:

<?php echo $this->Html->css('http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5');?>
<?php echo $this->Html->script('http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5');?>

Next, it looks like href of your link is not pointing correctly to the image.

Modify this line:

$src3 = 'img/gallery/' .$gallery_image['GalleryImage']['path'];

by this, to correctly pick up the image address:

$src3 = $this->webroot. 'img/gallery/' .$gallery_image['GalleryImage']['path'];