Shadowbox and mooflow integration

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox and mooflow integration

Moez
Hi
I want to put a shadowbox into a mooflow gallery by doubleclicking on its image.
mooflow uses mootools library. To launch it i use domready:

<link rel="stylesheet" type="text/css" href="MooFlow.css" />
<script type="text/javascript" src="mootools-beta-1.2b2.js"></script><script type="text/javascript" src="MooFlow.js"></script>
<script type="text/javascript" src="shadowbox-mootools.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript"> Shadowbox.loadSkin('classic', 'skin'); Shadowbox.loadLanguage('en', 'lang'); Shadowbox.loadPlayer(['html'], 'player'); var myMooFlowPage = { start: function(){ /* MooFlow instance with the Slimbox Viewer */ var mf = new MooFlow($('MooFlow'), { stylePath: 'MooFlow.css', useSlider: true, useCaption: true, useMouseWheel: true, useKeyInput: true , onClickView: function(){ Shadowbox.init(); } }); } }; window.addEvent('domready', myMooFlowPage.start); </script>


As you can see I use shadowbox-mootools.js for the adapter.
When I doubleclick on an image in the gallery nothing is gonna happen. I don't even receive a javascript error.
Thanks for your help.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox and mooflow integration

mjijackson
Administrator

Did you even read the usage page? You're only calling Shadowbox.init without ever calling Shadowbox.setup or Shadowbox.open to activate any of your links. And, you can't load Shadowbox using onDOMReady when using the Shadowbox.load* functions.

Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox and mooflow integration

Wizzud
In reply to this post by Moez
As Michael has indicated, you have a couple(!) of problems:

First, replace your Shadowbox.load....() calls with script/css includes ...
<link rel='stylesheet' type='text/css' href='skin/classic/skin.css' />
<script type='text/javascript' src='skin/classic/skin.js'></script><script type='text/javascript' src='lang/shadowbox-en.js'></script><script type='text/javascript' src='player/shadowbox-html.js'></script>
This allows you to use the DOM Ready event to initialise Shadowbox.

Secondly, it would appear that Shadowbox initialisation (and subsequent activation) are in the wrong place.
Without knowing anything about MooFlow specifically, the code you have seems to indicate that Shadowbox.init() might only be called when something is clicked?

You need to initialise Shadowbox outside of the MooFlow instance...

start: function(){
                Shadowbox.init(); //initialise Shadowbox HERE!
                /* MooFlow instance with the Slimbox Viewer */
                var mf = new MooFlow($('MooFlow'), {
                        stylePath: 'MooFlow.css',
                        useSlider: true,
                        useCaption: true,
                        useMouseWheel: true,
                        useKeyInput: true ,
                        onClickView: function(){
;// NOT HERE!!            Shadowbox.init(); <-- this should probably be Shadowbox.open()?
                        }
                });
        }

However, I now get into the realm of the unknown because I don't know what the onClickView callback is for. I am guessing that it gets called whenever a gallery element is clicked?

I also don't know how you have set up your 'gallery' elements:
a. If they are links, with the rel attribute set to 'shadowbox[galleryname]' then clicking on an element will activate Shadowbox in gallery mode.
b. If they are links with just 'shadowbox' in the rel attribute then they will activate Shadowbox but not in gallery mode.
c. If they are links, but without 'shadowbox' in the rel attribute, then the Shadowbox.init() method will not find them, and you will (presumably) be relying on that onClickView callback to activate Shadowbox, using Shadowbox.open(DOM Element). However, they will not be able to display as part of a Shadowbox gallery! In order to be part of a Shadowbox gallery, they have to be set up (within Shadowbox's cache, using either init() or setup()) as a gallery.
d. If they are not links then Shadowbox.init() will not find them, and Shadowbox.open(DOM Element) will not open them. You would have to provide your own routine for passing Shadowbox.open() an object describing what and how you want to open. (And gallery mode would be unavailable).

If either (a) or (b) are the case, then the element clicks will be caught by Shadowbox. BUT they may also be caught by MooFlow? You may need to tell MooFlow (using onClickView?) not to handle them?

If (c) is the case, note that Shadowbox.open() would require a DOM Element passed into it. If onClickView is a decent callback then it probably has some reference to the DOM Element clicked on - either as an argument or context (this) - and that reference should be used in the Shadowbox.open() call.

If (c) is the case, and you want to use Shadowbox's gallery mode, then you are going to have to run init() with skipSetup, and then run setup() against a collected set of relevant elements (using MooTools).

Enjoy!
Combine literacy with curiosity and a whole world of information opens up to you