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.

All other Modules /

Discuss all other Modules here.

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

Gallery Module and Fancybox Jquery Clash


Go to End


7 Posts   3618 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 Creative

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.