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 ? ' ' + title : '') + '</span>';
}
});
});