iCarousel + Slimbox (mootools) - working together

**thyon** · 06/20/2009, 14:24

I have TL set-up and used the catalog extension to generate a client matrix (title, description, main image, gallery images, date, etc.), which I then render into a section that's optimized for the iCarousel (http://zendold.lojcomm.com.br/icarousel/) using a thumbnail image as a index browse device.

Client iCarousel + Slimbox Example:
http://www.thyon.com/print-gallery.html

The problem
The iCarousel thumbnail at the bottom is working correctly, as you can see, it slides to the correct client details with thumbnails gallery for that project. When you click on the thumbnail gallery items however, the slimbox doesn't work anymore and it actually just opens the image in the same window. Obviously I'd like the slimbox to come up and open the image.

Maybe its just a simple thing of re-ordering the way the slimbox and icarousel loads?

I have contacted the developer and he is looking into it (without any promises), but I'm curious to know if someone will be able to hack the code for me to try to fix it for releasing on my website now!

Any Mootools help will be appreciated.

**granitic** · 06/20/2009, 20:55

Hi Thyon,

First, congratulations for your work arround Typolight !

I've no answer about your problem :? , but a suggestion.

You probably know the Contentslider extension, made by Stefan Preiss (stefan-at-work) and entirely based on mootools.

Would't it be possible to add a menu feature to this one as thumbnails and/or text ?

=======
Sorry for my novice english,
Granitic

**ramjet** · 06/21/2009, 02:11

Hi Thyon, this may help.
Its not about mootools or i-carousel, but rather about preventing conflicts with javascripts.\Have you tried re-ordering the script loading in the head (ie: icarousel first, then slimbox).
anyway have a look...hope it helps

http://docs.jquery.com/Using_jQuery_wit ... _Libraries

**thyon** · 06/21/2009, 03:57

Its not the ordering either, cause I changed it around and it didn't work.

Aparently iCarousel creates clone copies of certain elements, and that removes the rel="lb1" attribute, making slimbox non-functioning, but I'm at a loss at how mootools functions work - in most cases - so I'm not sure how to inspect the code once mootools had touched it and made modifications.

**ramjet** · 06/21/2009, 04:38

one more suggestion (i used to do this to prevent a swf embedded with ufo in a page header from issuing an "abort" in IE6 and 7... it seemed to conflict with mootools)
Remove either

Code:

<script type="text/javascript" src="plugins/icarousel/iCarousel.js"></script>

or

Code:

<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>

from the head completely, and place it just before the closing body tag instead, so one is in the head and one in the body.
Maybe remove ufo too as you're not using it, (and any others) just in case.
Very unscientific, but hey , putting slimbox at the bottom of the body in fe_page did the job for me to fix a javascript conflict.