Jump to:

10851 Posts in 2517 Topics by 1793 members

All other Modules

SilverStripe Forums » All other Modules » Gallery Module and Fancybox Jquery Clash

Discuss all other Modules here.

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

Page: 1
Go to End
Author Topic: 1972 Views
  • cloudstripe
    Avatar
    Community Member
    9 Posts

    Gallery Module and Fancybox Jquery Clash Link to this post

    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?

  • Plato
    Avatar
    Community Member
    26 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

    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.

  • cloudstripe
    Avatar
    Community Member
    9 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

    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.

  • biapar
    Avatar
    Forum Moderator
    435 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

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

  • cloudstripe
    Avatar
    Community Member
    9 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

    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.

  • biapar
    Avatar
    Forum Moderator
    435 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

    Try Jquery.NoConflict

  • cloudstripe
    Avatar
    Community Member
    9 Posts

    Re: Gallery Module and Fancybox Jquery Clash Link to this post

    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.

    1972 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.