Jump to:

3376 Posts in 1000 Topics by 713 members

Data Model Questions

SilverStripe Forums » Data Model Questions » Javascript Issue - JQuery GalleryView

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 4069 Views
  • Hankins
    Avatar
    Community Member
    11 Posts

    Javascript Issue - JQuery GalleryView Link to this post

    Hi,

    I have been trying to implement galleryview on a custom page type of my SS 2.3.3 installation. It requires 4 javascript files & 1 css. The parameters are set in a small chunk of javascript in the header using the script tag. I have tried the following:

    Page.php

    class Page_Controller extends ContentController {   
       public function init() {
          parent::init();   
           Requirements::javascript('mysite/javascript/jquery_timers_2.js');
          Requirements::javascript('mysite/javascript/jquery_galleryview_2.js');
          Requirements::javascript('mysite/javascript/jquery_easing_1_3.js');    
          Requirements::javascript('mysite/javascript/jquery_1_32.js');
       }
    }

    ------------------------------------

    CustomPageType.php

    class CustomPageType_Controller extends Page_Controller {
       public function init()    {   
          parent::init();
          Requirements::css('themes/blackcandy/css/galleryview.css');
       }
    }


    -----------------------------------

    and added the javascript block to the header of the custom page type .ss file:

    CustomPageType.ss

    <script>
       $(document).ready(function(){
          $('#gallery').galleryView({
             panel_width: 800,
             panel_height: 300,
             frame_width: 50,
             frame_height: 50,

          easing: 'easeInOutQuad',

          });
       });
    </script>

    ---------------------------------

    Here are the following errors that show up in IE

    Webpage error details:

    Message: Object expected
    Message: 'jQuery' is undefined
    Message: 'jQuery' is undefined
    Message: 'jQuery' is undefined

    From the above I assume the javascript files required by galleryview are not being included properly resulting in the unexpected object. I have been messing around with this long enough to know I need to pull over and ask for some direction =). Can someone please provide me with some insight, it is much appreciated!

    -Matt

  • MikeOne
    Avatar
    Community Member
    40 Posts

    Re: Javascript Issue - JQuery GalleryView Link to this post

    So are the files actually included (check source / Firebug)?

    My guess is they probably are included correctly but jQuery is conflicting with Prototype (check if also included on those pages).
    If they are not correctly included, check if you have the link to jQuery correct (jquery_1_32.js looks weird to me but of course could be how you named it).

    Firefox with Firebug is your friend btw.. IE is useless in debugging javascript...

    There might be a solution if all you files are actually included correctly and that is to put jQuery into NoConflict mode..

  • zenmonkey
    Avatar
    Community Member
    524 Posts

    Re: Javascript Issue - JQuery GalleryView Link to this post

    jQuery plug-ins may cause conflicts with prototype since the both use "$" as a short cut.

    So you're inline script will cause two problems. First because its using the the "$" shortcut it will conflict so change it to:

    <script>
    jQuery(document).ready(function(){
    jQuery('#gallery').galleryView({
    panel_width: 800,
    panel_height: 300,
    frame_width: 50,
    frame_height: 50,

    easing: 'easeInOutQuad',

    });
    });
    </script>

    The second issue is that the requirements calls will load AT THE BOTTOM of the head, unfortunately, below in-line script. So create another javascript file with all your jQuery calls and add that requirement to the end of the requirements list.

    It wouldn't hurt to add jQuery.noConflict(); to the top of this file

  • Hankins
    Avatar
    Community Member
    11 Posts

    Re: Javascript Issue - JQuery GalleryView Link to this post

    Thank you very much! I now have a working implementation of this jquery plugin! I have been reading endlessly through different post but could not find a comprehensive explanation to my problem. Thanks to you, I have finally put it all together!

    To others looking for more information on similar problems, please reference the following post:
    http://www.silverstripe.org/customising-the-cms/show/252385#post252385

  • kevino
    Avatar
    Community Member
    30 Posts

    Re: Javascript Issue - JQuery GalleryView Link to this post

    Cool. This helped me a lot. Thank you.

    -

    One thing which did confuse things here was the order of the js requirements.

    I didn't even think to check that my javascript library loaded before the other jquery scripts.
    Before I rearranged them, I was still getting the 'jQuery' is undefined, '$j' is undefined , '$' is undefined etc etc; so had presumed that the solution shown above wasn't working..

    4069 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.