Topic: Switching to Slimbox/Mootools

[TStone]

Since I'm using Mootools elsewhere on my site, which is not compatible with the "Prototype/scriptaculous"-library used in SOBI Gallery, I've changed the code to make use of "Slimbox" instead (a Lightbox clone for Mootools).
A positive side effect is that I no longer have any problem with Flash items (mp3 player etc) floating on top of the Lightbox.

This is how I did it, if anyone are curious.

Go to: http://www.digitalia.be/software/slimbox and download the slimbox.
Uncompress it and place it on your server, let's say at:
www.yoursite.com/myscripts/slimbox

If you are not already using Mootools, then go to: http://mootools.net/download
This library is modular, and you can choose just the parts needed for the Slimbox to function. If you believe that you will not experiment with it further, then click the following checkboxes (otherwise, click them all):

Native:
    Array, String, Function, Element
Window:
    Window.Base, Window.Size
Effects:
    Fx.Style, Fx.Styles, Fx.Transitions
...then click the download button.

Place the downloaded file where you can find it on your server. Like next to the slimbox folder at:
www.yoursite.com/myscripts/mootools.js

Now for the changes in the code:

Find the file "gallery.class.php" which should be located at:
www.yoursite.com/components/com_sobi2/plugins/gallery/gallery.class.php

Open it and find the following piece of code (somewhere around line 83-90):

$config->loadScript("prototype");
    

$mainframe->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/components/com_sobi2/plugins/gallery/lightbox.js'></script>");
    

$mainframe->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/components/com_sobi2/plugins/gallery/scriptaculous.js?load=effects'></script>");

$style = "<style type=\"text/css\"> \n\t" .

"#prevLink:hover, #prevLink:visited:hover { background: url({$mosConfig_live_site}/components/com_sobi2/plugins/gallery/images/prev.gif) left 15% no-repeat; } \n\t\t" .

"#nextLink:hover, #nextLink:visited:hover { background: url({$mosConfig_live_site}/components/com_sobi2/plugins/gallery/images/next.gif) right 15% no-repeat; } \n\t\t" .

"</style>\n";
    

$mainframe->addCustomHeadTag($style);


Comment it out by placing a slash and a star ( /* ) before this code snippet, and a star and slash after it ( */ ).
Like this:


/*
(the codesnippet shown above)
*/


Then add the following instead:

$mainframe->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/myscripts/mootools.js'></script>");

$mainframe->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/myscripts/slimbox/js/slimbox.js'></script>");

$mainframe->addCustomHeadTag("<link rel='stylesheet' href='{$mosConfig_live_site}/myscripts/slimbox/css/slimbox.css' type='text/css' media='screen' />");


(If you are already using Mootools in your site template, you can probably skip the first line above. If you named the folders differently, adjust the paths shown )

Save, and upload the modified file. Done!

[gchancy]

Hello,

I use a mootools-driven template that breaks the Gallery plugin. Any chance the Gallery will be bundled with multiple options? I've noticed a number of gallery components/modules ship lately with three or four choices to minimize java conflicts.

Thanks,

Glen

[jparker3119]

Thanks for this post. It really helped!

[webguy]

This looks good but I cannot get it to work.
I've just updated to the new sobi2 release and the new gallery plugin.
I am using a Rockettheme template which comes with mootools and another script called Rokzoom (similar to slimbox etc)

Is it possible for the gallery plugin to work with Rokzoom or do I have to disable it and go with Slimbox also how do you disable it?

Cheers

[nick252]

i have the same problem with finerzie template

[webguy]

Well I got the lightbox to work by commenting out the following line (around 82) in yoursite/template/index.php

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.js"></script>

Well it works in IE6 and IE7 but the white framing window doesn't expand in Firefox 2.0.0.6

Any ideas welcome

[nick252]

i have the same probem , looks fine on ie

but on firefox , opera looks strange

[Blix]

Thanks for that fix...

but i had to change $Mainframe to $config...

$mainframeconfig->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/myscripts/mootools.js'></script>");
$mainframeconfig->addCustomHeadTag("<script type='text/javascript' src='{$mosConfig_live_site}/myscripts/slimbox/js/slimbox.js'></script>");
$mainframeconfig->addCustomHeadTag("<link rel='stylesheet' href='{$mosConfig_live_site}/myscripts/slimbox/css/slimbox.css' type='text/css' media='screen' />");

works fine now

[cooperation]

Hello,

I am using Mootools and the Gallery Plugin. I already did the changes above, but still, the image is shown in a new window. It seems that the lightbox is not beeing loaded.

I am getting the error:
Fehler: window.addEvent is not a function
Quelldatei: .../components/com_sobi2/plugins/gallery/slimbox.js
Zeile: 192

Can anyone give me a hint whats missing?

[Trinity]

Hello cooperation,

I am getting the error:
Fehler: window.addEvent is not a function
Quelldatei: .../components/com_sobi2/plugins/gallery/slimbox.js
Zeile: 192

If this error occurs - or any other javascript error - , the mootools are probably loaded after the slimbox. If the mootools are loaded with your template, edit index.php of your template and set
<?php mosShowHead(); ?>

after the script command for mootools.

Trinity