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.

All other Modules

Discuss all other Modules here.

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

Gallery Module and Fancybox Jquery Clash


Reply

7 Posts   2066 Views

Avatar
cloudstripe

10 December 2010 at 6:25pm Community Member, 9 Posts

I have gallery module installed from (http://www.silverstripe.org/gallery-module/). On one of pages where gallery module is loaded to show a slideshow, i am trying to integrate Fancybox to load a video similar to this (http://www.picwing.com/) site. Problem? If i uncomment the jquery CDN reference e.g.

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

which is required for fancybox, Gallery module stops working. If i comment it out, fancybox doesn't work.

So question:
a- Is there a way i can use Gallery's Lightbox to display a video like its show on that site?
b- Else how would i remove this clash?

Avatar
Plato

10 December 2010 at 6:46pm (Last edited: 10 December 2010 6:51pm), Community Member, 26 Posts

Don't use script tags.
jQuery is being redeclared at the base of your page, and/or conflicting with prototype.

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
<% require javascript(path/to/fancybox.js) %>
<% require javascript(path/to/fancybox-init-with-jQuery.noConflict.js) %>

I am surprised you managed to get that module working though, it hasn't been updated in nearly a year, and last I checked isn't compatible with the more recent versions of SilverStripe.
Are you using an old version of SilverStripe?
If so, you'll need to use Require::javascript(); from your controller.

Avatar
cloudstripe

10 December 2010 at 7:55pm (Last edited: 10 December 2010 7:59pm), Community Member, 9 Posts

tried it using:
<% require javascript(http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js) %>
<% require javascript(mysite/javascript/fancybox/jquery.easing-1.3.pack.js) %>
<% require javascript(mysite/javascript/fancybox/jquery.fancybox-1.3.4.js) %>
<% require css(mysite/javascript/fancybox/jquery.fancybox-1.3.4.css) %>

now:
a. Neither fancybox, nor gallery work.
b. "require"d js libs are put at the end of generated page.
c. I can't find the "require"d css anywhere in the generated page.
d. Fancybox doesn't work with the jquery that comes with sapphire/thirdparty/

Also, the page already contains:

<script type="text/javascript" src="themes/cardplug/js/jquery.js"></script>
<script type="text/javascript" src="themes/cardplug/js/jquery.img.preload.js"></script>
<script type="text/javascript" src="themes/cardplug/js/jquery.innerfade.js"></script>
<script type="text/javascript" src="themes/cardplug/js/jquery.lightbox.js"></script>
<script type="text/javascript" src="themes/cardplug/js/jquery.pngfix.js"></script>
<script type="text/javascript" src="themes/cardplug/js/jquery.tipsy.js"></script>
<script type="text/javascript" src="themes/cardplug/js/custom.js"></script>
<script type="text/javascript" src="themes/cardplug/js/twitter/jquery.min.js"></script>
<script type="text/javascript" src="themes/cardplug/js/twitter/jquery.twitter-friends-1.0.min.js"></script>

Its template was designed by another fellow, so can't comment anything about it.

And its SS 2.4.0.

Avatar
biapar

12 December 2010 at 11:19am Forum Moderator, 435 Posts

Have you tried to use Jquery.Noconflict? I've disable prototype with Requirements::block('jsparty/prototype.js');

Avatar
cloudstripe

12 December 2010 at 5:41pm Community Member, 9 Posts

I don't think that i am using prototype at all, it doesn't appear anywhere on the generated html.
Ok, here are the updates:

Page which i am trying to get fancybox working on:
http://www.cardplug.com/

Video popup should appear when you click "watch 90 second video".

Related files in source are:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="mysite/javascript/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="mysite/javascript/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="mysite/javascript/fancybox/effect.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.cardplug.com/themes/cardplug/css/fancybox.css?m=1289500720" />

effect.fancybox.js contains the code to make it popup, this code is almost a plain copy paste from: http://fancybox.net/vimeo

now everything is working but for some reason it won't popup the video, e.g. fancybox is not loading.

PS:
There is a tipsy error, we can safely ignore that for now.

Avatar
biapar

13 December 2010 at 10:40am Forum Moderator, 435 Posts

Try Jquery.NoConflict

Avatar
cloudstripe

13 December 2010 at 5:09pm Community Member, 9 Posts

Its not issue of jquery clash, i have fixed that, fancybox isn't loaded the effects.fancybox.js at all, even an alert("hello") on top level doesn't appear when page is loaded.