MaxiGallery and jquery menu and ThickBox

1,161 Posts

Photowebmax Reply #1, 17 years, 9 months ago

Hi,

I am developing a new MODx site and all is going quite well as I test locally using MAMP.

I have created a fixed top Nav without any snippets. The reason is I have built this nav menu with added jquery eye candy. I have also created a dynamic sidebar second menu using the Wayfinder snippet.

One of my top menu pages (one of the jquery ones) is a gallery page. I am using MaxiGallery to display sub galleries from this page. I uploaded one test image and the MaxiGallery works great. Unfortunately when I click on the thumbnail to get to the sub gallery where the image is and click on the image the entire top navigation menu shows the jquery hover state. I am using a single CCS sprite image to get the jquery effect to work. Clicking away from the MaxiGallery image(s) returns the top nav bar to its natural resting state.

I am sort of stumped as what to look for here?

Thanks,

Max

132 Posts

motoxer4533 Reply #2, 17 years, 9 months ago

Not very familiar with MaxiGallery, but I think it uses MooTools? If so, jQuery and Mootools are probably conflicting with each other. If thats the case, you have to run jQuery in "NoConflict" mode.

http://docs.jquery.com/Core/jQuery.noConflict

Can anyone confirm this?

1,161 Posts

Photowebmax Reply #3, 17 years, 9 months ago

Thanks.

I took a quick peek at that. I wish I could follow this with ease, but its out of my area. I will need to reread it to see if this might sink in.

I have heard that jQuery does clash with MooTools within MODx. I did turn off the QuickEdit snippet though.

I know zip about javascript or how to write it. I have looked at MooTools and jQuery somewhat. Maybe its just me but most of the links to jQuery sites do a much better job of presenting the functions, the code and how to implement it than the MooTools sites I have found. To get most of the cool effects seems more straightforward with less code with jQuery as well.

I have a lot of CSS work still to do so hopefully a solution that is easy to follow might come along in the meantime...

Max

1,161 Posts

Photowebmax Reply #4, 17 years, 9 months ago

I did find this thread: http://modxcms.com/forums/index.php/topic,30687.0.html

A quick read seems to indicate this might be the way to go. I will wait until the morning to wade throught this carefully. The script he was using is different to mine, but it sounds like the conflict is the same...

4,213 Posts

doze Reply #5, 17 years, 9 months ago

What display type are you using in MaxiGallery?

Here’s a list of the default embedded display types and what js libs they use:

lightboxv2 uses prototype+scriptaculous
slimbox uses mootools
smoothgallery uses mootools
slidebox uses prototype

Every embed display mode collides with jQuery, so you will have problems if you are using an embedded display type.

If you really want to use embedded display type instead of normal one, you can fix it easily by using ThickBox as your custom display type, here’s info. It uses jQuery, so all you need to do is get thickbox.js, thickbox.css and the loadingAnimation.gif from it’s homepage and add the .js and .css to your template <head> (or use maxigallery &css and &js parameters)

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

53 Posts

shuriken Reply #6, 17 years, 9 months ago

Another no-conflict option (with its own fairly robust API) is Highslide.

4,213 Posts

doze Reply #7, 17 years, 9 months ago

The bad thing with Highslide is that it’s not free for commercial use.. I think many people has not even noticed it and are using it on their clients websites.. undecided

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,161 Posts

Photowebmax Reply #8, 17 years, 9 months ago

Good morning Doze.

I am using lightboxv2

Here is the snippet call for the photos:

[[MaxiGallery? &display=`embedded` &embedtype=`lightboxv2` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`]]

The Portfolio container document is using this:

[!MaxiGallery? &childgalleries_level_limit=`1` &display=`childgalleries` &manageButtonTpl=`@CODE:`&order_by=`random` &pics_per_row=`3`!]

1,161 Posts

Photowebmax Reply #9, 17 years, 9 months ago

There are a ton of js "boxes" out there for viewing images.

I checked out the Thickbox, and while it uses jQery it seems lacking in style refinement. Maybe that can be improved via CSS?

The Highslide script is very cool looking. In this case (if I can get it to work with my site and not meess up my jQuery menu) the fee of $29 should be no problem.

Will Thickbox and Highslide work with MaxiGallery: the system of using the MODx Manager to organize and uplload images etc? This site will be used by myself with no other users, but as I will be changing images often it would be great to use MODx rather than adding the images links by hand etc.

Thanks,

Max

1,161 Posts

Photowebmax Reply #10, 17 years, 9 months ago

I am going with the Thickbox route for now.

I added the Thickbox JS link to the template head and added the Thickbox CSS to my template CSS file. I also changed the route of the animation gif per instructions.

It now looks like the MaxiGallery container page and the gallery page are ok with the top menu jQuery thing I am using. But the problem now is that nothing happens when I click on the image thumbnail in the gallery.

Maybe the problem is the snippet call? I am using this:

[[MaxiGallery? &display=`embedded` &embedtype=`thickbox` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`]]

I think I am missing something here?