Uncaught Syntaxerror: Unexpected token

Asked

Viewed 5,316 times

1

I get this error in the 3rd line of this code to make a lightbox appear with an image by clicking on it, using fancybox 2, with Cakephp. I can’t figure out why this is happening, someone can help me?

   <script type="text/javascript">
                $(document).ready(function() {

                 $(".fancybox3").fancybox({
                        openEffect : 'none',
                        closeEffect : 'none',
                        helpers : {
                            title : {
                                type : 'float'
                            }
                        }
                    });

                });
    </script>

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>

</table>

Layout

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js"> <!--<![endif]-->
<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');

    echo $this->Html->script('jquery.fancybox.pack.js?v=2.1.5');
    ?>

    <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>
    <!-- src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"-->

    </head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

        <?php 
                $home_link_image= $this->webroot."img/PushUp.png";
            if(!$this->Session->check('Admin')){
                $home_link = "/html/PushUp_app/";
            }
            else{

                $home_link = "/html/PushUp_app/admins/admin_index";
            }

            echo "<a class=\"pushup_logo\" href=\"".$home_link."\">";
            //echo" <img src=\"".$home_link_image."\" name=\"logo\" id=\"logo\"/>";
        ?>

    </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
            <?php 

            //if(!$this->Session->check('User')){
                echo $this->Html->link('Home', array('controller'=>'home', 'action'=>'index'));
            //}
            /*else{

                echo $this->Html->link('Administrador', array('controller'=>'admins','action' =>'admin_index'));
            }*/
            ?>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Serviços <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li>
                <li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li>
                <li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li>
                <li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li>
                <li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Galeria<b class="caret"></b></a>
            <ul class="dropdown-menu">
                 <li><?php echo $this->Html->link('Fotografias', array('controller'=>'galleries', 'action'=>'ShowImages'))?></li> 
                 <li><?php echo $this->Html->link('Videos', array('controller'=>'galleries', 'action'=>'ShowVideos'))?></li>              
            </ul>
        </li>
        <li><?php echo $this->Html->link('Cartaz', array('controller'=>'showbills', 'action'=>'ShowShowbill'))?></li>
        <li><?php echo $this->Html->link('Contactos', array('controller'=>'contacts', 'action'=>'ShowContactUs'))?></li>
        <li><?php 
           /* if(!$this->Session->check('User')){
                echo $this->Html->link('Log-in', array('controller'=>'users','action' =>'login'));
            }
            else{

                echo $this->Html->link('Log-out', array('controller'=>'users','action' =>'logout'));
            }*/
            ?>
           </li>
            </ul>
        </li>
      </ul>
      <!--<form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>-->
    </div><!--/.navbar-collapse -->
  </div>
</div>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">


  </div>
</div>

<div class="container">
                    <?php echo $this->Session->flash();?>
  <!-- Example row of columns --><?php echo $this->fetch('content');?><!--carrega o conteudo para a página-->
  <div class="row">
    <div class="col-lg-4">

    </div>
  </div>

  <hr>

  <footer>
    <p>&copy; Company 2013</p>
  </footer>
</div> <!-- /container -->        
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

<!--<script src="js/vendor/bootstrap.min.js"></script>


<script src="js/main.js"></script>-->

<script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

            <script type="text/javascript">
                $(document).ready(function() {

                 $(".fancybox3").fancybox({
                        openEffect : 'none',
                        closeEffect : 'none',
                        helpers : {
                            title : {
                                type : 'float'
                            }
                        }
                    });

                });
    </script> 
    <?php echo $this->Js->writeBuffer(); ?>

</body>
</html>
javascript jquery fancybox

  • $(".fancybox3").fancybox(e){ - This seems strange to me. Change this by $(".fancybox3").fancybox({ and the } extra. What do you want to do with e.preventDefault;? i.e. what behavior do you want to avoid? And by the way () in the e.preventDefault();

  • The preventDefault() was a solution that appeared in a thread about the fancybox not opening, which is my case, and apparently also wrong.

1 answer

3


Your syntax seems to be completely wrong, I think the correct is something like:

$(document).ready(function() {

    $(".fancybox3").fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        helpers : {
            title : {
                type : 'float'
            }
        }
    });

});

This is probably the cause of the error.

  • So I get a Uncaught TypeError: Object [object Object] has no method 'fancybox'

  • This is an error caused by the fancybox plugin not yet loaded at the time you tried to use ($(".fancybox3").fancybox({) or at no time. Check the order of your scripts or whatever possibility is preventing the plugin from working.

  • The script was in the head, in the layout, but even after putting it just before the </body>, preciste error. I will put the whole layout in question as well.

  • That’s exactly it. The fancybox script should be placed below the jQuery script and above the fancybox script.

  • That’s what it looked like. jquery inclusion was right at the top and this script even before </head>. The content using this script is below. EDIT After checking the documentation of the plugin again, I think maybe I shouldn’t even have to write this script. From what I realized the invoke.fancybox.js already have the scripts to make everything work. But something is missing and I don’t understand what.

Browser other questions tagged javascript jquery fancybox

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