Jump to:

23550 Posts in 19336 Topics by 2890 members

General Questions

SilverStripe Forums » General Questions » fancybox is NOT working

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 4517 Views
  • leafchild
    Avatar
    Community Member
    41 Posts

    fancybox is NOT working Link to this post

    Problem using fancybox (http://fancybox.net/)

    The Image is not pop-up.

    Is there special setting required?
    Both fancy box aren't working.

    When I use firebug, Javascript is not included but if I check show source code then I see all Javascript are there.

    What is the problem? The way I include Javascript, css, script order or something else?

    Page.php

       public function init() {
          parent::init();

    $themeFolder = $this->ThemeDir();
    Requirements::set_combined_files_folder($themeFolder . '/combinedfiles');
    $CSSFiles = array(
    $themeFolder . '/css/jquery.fancybox-1.3.4.css'
    );
       Requirements::combine_files("combinedCSS.css", $CSSFiles);

       Requirements::javascript('mysite/javascript/fancybox/jquery.mousewheel-3.0.4.pack.js');
       Requirements::javascript('mysite/javascript/fancybox/jquery.fancybox-1.3.4.pack.js');
       Requirements::javascript('mysite/javascript/fancybox/potfolio.js');
    }

    Page.ss

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>

    ...

    <a id="example1" href="$ThemeDir/images//3.jpg"><img alt="example1" src="$ThemeDir/images/3.jpg" /></a>
    <br>

    <a rel="fancy_group" href="$ThemeDir/images/1.jpg" title=""><img src="$ThemeDir/images//2.jpg" width="246" alt="" /></a>
    <a class="hide" rel="fancy_group" href="$ThemeDir/images/4.jpg" title=""></a>

    ...

    potfolio.js

    $(document).ready(function() {
       
        $("a#example1").fancybox();

          $("a[rel=fancy_group] ").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'      : 'none',
                'titlePosition'    : 'over',
                'titleFormat'      : function(title, currentArray, currentIndex, currentOpts) {
                   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
             });         

          });

  • robinp
    Avatar
    Community Member
    33 Posts

    Re: fancybox is NOT working Link to this post

    Hi,

    I was just working on this on Friday. There is a few things I had to do get to work

    1) Add Requirements::set_write_js_to_body(false); the init function for the page. So my init looks like

    public function init() {
          parent::init();
    Requirements::set_write_js_to_body(false);

       }

    This makes the javascript load in the head

    2) Added

    Validator::set_javascript_validation_handler('none');

    To my _config.php this stopped the prototype.js stuff being loaded. There was some sort conflicted between jquery and prototype.

    3) Added

    SSViewer::setOption('rewriteHashlinks', false);

    To my _config.php this stopped Silverstripe adding the current url the link when there is #

    I hope that helps

    Cheers

    Robin

  • leafchild
    Avatar
    Community Member
    41 Posts

    Re: fancybox is NOT working Link to this post

    Thanks robinp! It helps a lot!!
    I was so frustrated that I couldn't do so simple thing with SS.

    I had this "Requirements::set_write_js_to_body(false);" but

    I didn't have these:
    "Validator::set_javascript_validation_handler('none');"
    "SSViewer::setOption('rewriteHashlinks', false);"

    now my fancybox is working!!

  • leafchild
    Avatar
    Community Member
    41 Posts

    Re: fancybox is NOT working Link to this post

    Everything was working fine then stopped working.

    I checked all Code, Javascript and CSS.
    They are all loaded fine.

    What is the possible issue?
    Does anyone have any idea??

    4517 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.