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


4 Posts   4786 Views


Community Member, 41 Posts

26 March 2011 at 12:07pm

Problem using fancybox (

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?


   public function 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);


<script type="text/javascript" src=""></script>


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

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



$(document).ready(function() {

      $("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>';



Community Member, 33 Posts

27 March 2011 at 1:02pm


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() {


This makes the javascript load in the head

2) Added


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




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:
"SSViewer::setOption('rewriteHashlinks', false);"

now my fancybox is working!!


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