Open images on the same page with Fancybox in Cakephp impossible

Asked

Viewed 1,286 times

6

I’m trying to make a gallery, which consists of a list of thumbnails, which by clicking on the items would eventually make a popup window appear as in first example here.

After several failed attempts, where even thumbnails did not appear, at the suggestion of other people, I tried to solve this problem with the plugin Cakephp-Fancybox, that partially solved my problem. However, by clicking on the thumbnails the user is redirected to another page that shows the original image, instead of floating on the thumbnail page.

After solving the various errors related to not finding javascript and reinstalling the Fancybox Plugin for Cakephp, the lightbox does not appear. How can these situations be solved?

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
  • 1

    While editing the indentation, I could see the following problems: <?php $i++; is not closed, in class GalleryController has a } plus, I haven’t removed it to not change the code posted, but it’s worth just reviewing =).

  • 1

    I’m sorry, it was mistakes copying the code, I fixed them.

  • post the output of your html

  • Okay thanks, this is the first time I’ve used something like Stack, I’m sorry.

  • @Igormartins already posted it.

1 answer

1


According to your information, it seems that neither js nor css are being loaded 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">

for:

<?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');?>

After, it seems that the href your link is not pointing correctly to the image.

Modify this line:

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

by this, to correctly pick the address of the image:

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

  • The replacement solved 5 of the errors, and then applied something similar to other css links like these, however the problem persists.

  • jquery is in your webroot/js folder?

  • Yes. I have now found that there are more errors in the gallery view than in the Home view.

  • @Sunt edited my answer

  • The image does not appear yet floating, but it is already a small success, when clicking on the thumbnails the user is redirected to a page that displays the original image.

Browser other questions tagged javascript jquery cakephp fancybox

You are not signed in. Login or sign up in order to post.