ShadowBox & MaxiGallery

Hi Everyone,

I’d like to start by saying that i’m not a ’hardcore developer’! But I’m a quick learner, and given the time and lots of patience, I can put my mind to some intermediate tasks!

So, I’ve been experimenting with CMS’s for a while now and have finally found my savior! MODx! It’s brilliant! As I have always ’hard’-coded websites in XHTML, Drupal and Joomla were a nightmare for me to get my head around. MODx simply rocks when it comes to ease of integration with XHTML/CSS sites! I am having trouble getting friendly URL’s working, but believe it may be a setting on the server my site is located on (shared hosting).. I doubt I can get my hosting company to change the required settings (as stated in modx wiki). I’ve read that search engines can now index dynamic content anyway?

Anyway to get down to my question:

Trying to get ShadowBox working instead of lightbox, have read the thread here --> http://modxcms.com/forums/index.php/topic,28724.0.html <-- but can’t say I really understand exactly what I need to do to integrate ShadowBox, so I suppose I’m asking how to do a custom &galleryPictureTpl? Or maybe a few steps to get ShadowBox working for me. I’ve downloaded ShadowBox 3.0.3 from the developers website and am keen to get it working!

Any help would be appreciated!

See maxigallery wiki page for the path of the default gallerypicturetpl. Then do a new chunk based on the original one and modify as needed. Then define the chunk name in your snippet call with galleryPictureTpl parameter.

Remember to add any needed js / css files to your site template that shadowbox needs.

Hey doze,

Thanks for your assistance, but still a little too complicated for me at this point .. care to maybe provide a little more ’detail’ for me to follow?

Ok so I understand the location of &galleryPictureTpl is @FILE:/assets/snippets/maxigallery/templates/gallerypicturetpl.html

But what to do now, do I open this template html file and copy it to a new chunk.. a bit lost here!

After sleeping on it for a night, I think I have a better idea of what to do, but what i’ve done is still not working;

-Have created a ’chunk’ named ’mlGalTpl’

-In this chunk I have pasted entire copy of the code from ’@FILE:/assets/snippets/maxigallery/templates/gallerypicturetpl.html’

-I have modified the code so ALL rel="lightbox[etc]" is now rel="shadowbox[etc]"

-In the code to call the gallery I have put the name of the chunk, see the following code -> [!MaxiGallery? &display=`embedded` &embedtype=`shadowbox` &pics_per_row=`4` &max_thumb_size=`110` &max_pic_size=`800x800` &thumb_use_dropshadow=`1` &galleryPictureTpl=`mlGalTpl`!] <--

-I have uploaded the shadowbox script files (downloaded from shadowbox site), into ’assets/snippets/maxigallery/shadowbox/’ and moved the files to match the other scripts (so .js file is in folder ’js’ .css file in folder ’css’ and images in images folder.

- I have inserted the following code into my website template;

<link rel="stylesheet" type="text/css" href="http://mywebsite.com/testfolder/assets/snippets/maxigallery/shadowbox/css/shadowbox.css">
<script type="text/javascript" src="http://mywebsite/testfolder.com/testfolder/assets/snippets/maxigallery/shadowbox/js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>


Still no luck! What have I done wrong!? (or not done!)

Any help would be appreciated! (and then i’ll write a howto for other noobs like me )

Try just rel="shadowbox" in the thumbnail links.. not "shadowbox[...]". I’m not sure that does shadowbox support that kind of tags.. lightbox uses that syntax to define separate picture sets and that’s why they are used in the template.

Also you dont have to break the js and css files in their own folders.. they can be in the same folder like they are packaged. But it doesn’t matter if you did the separate folders, just make sure that the paths are correct. You could try to put everything to just one folder.

Did you select to use some adapter, jQuery or something? If you did, you need to put jQuery to your site template too..

Also did you check your browser for possible javascript errors? I.e, does Shadowbox.init(); work?

But yea, basically you have done everything right.

Hey doze thanks for getting back to me - was getting a little worried noone could help!

The gallery is partly working, I took your info and removed the [etc...] after the rel=shadowbox, didn’t make any difference.

So, basically the gallery is being called and is showing images correctly but for some reason I can’t click to enlarge the images. I’ve triple checked everything and can’t find anything wrong, any ideas?

How do you suggest I check for java errors? Maybe this is the problem?