Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

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

fancybox is NOT working


Reply


4 Posts   4633 Views

Avatar
leafchild

Community Member, 41 Posts

26 March 2011 at 12:07pm

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

      });

Avatar
robinp

Community Member, 33 Posts

27 March 2011 at 1:02pm

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

Avatar
leafchild

Community Member, 41 Posts

30 March 2011 at 7:38am

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!!

Avatar
leafchild

Community Member, 41 Posts

7 May 2011 at 11:46am

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??