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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

fancybox is NOT working


Go to End


4 Posts   8061 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??