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

Avatar
cloudstripe

Community Member, 9 Posts

10 December 2010 at 6:25pm

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

Community Member, 26 Posts

10 December 2010 at 6:46pm

Edited: 10/12/2010 6:51pm

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

Community Member, 9 Posts

10 December 2010 at 7:55pm

Edited: 10/12/2010 7:59pm

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

Forum Moderator, 435 Posts

12 December 2010 at 11:19am

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

Avatar
cloudstripe

Community Member, 9 Posts

12 December 2010 at 5:41pm

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

Forum Moderator, 435 Posts

13 December 2010 at 10:40am

Try Jquery.NoConflict

Avatar
cloudstripe

Community Member, 9 Posts

13 December 2010 at 5:09pm

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.