Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

DataObjectManager Module

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, biapar, Willr, Ingo, swaiba, simon_w

Galleria integration with ImageGallery

Go to End

28 Posts   7752 Views


6 December 2009 at 7:21am Community Member, 14 Posts

I am looking to integrate the JQuery Galleria plugin into the new Image Gallery UI. I have read some "Galleria" posts within this forum that are either now out of date or do not refer to the integration with the Image Gallery module.

Would someone be kind enough to help me with this and give me some (simple) instructions of how to do this?

I have bought the book and am currently doing the SS tutorials, so I don't want you to think I am not giving it my best attempt to learn this great CMS.

Your help is really appreciated.


6 December 2009 at 9:51am 4085 Posts

Yeah, I would love it if someone would tackle this. It's the whole reason I released the ImageGallery UI class.

It's pretty simple if you just look at some of the examples in the gallery_ui folder. You would just create a new folder for galleria, and it gets its own code, images, templates, javascript folders, etc.

You would create a Galleria.php file in the code folder and create a Galleria subclass of ImageGalleryUI. Add the static vars, including a template for, get all your js/css requirements in with the initialize() function, and you should be good to go. If you need to add extra properties to the Item object you can use the updateItems($items) function.

Like I said, the easiest thing to do is going to be to look at the examples (fancybox, prettyphoto, etc) and build off those as a model. If you run into problems, post them here and I'll take a look.

Thanks for tackling this. Make sure to post a ZIP when you get it working so I can roll it into the trunk.


6 December 2009 at 1:16pm (Last edited: 7 December 2009 11:16am), Community Member, 14 Posts

Thanks for the reply Uncle Cheese. I had pretty much already done as you have outlined above, but the part I am unsure about is the template.

To use Galleria you have to use this HTML:

<ul class="gallery">
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>

...and here's how I have translated it for use in the template:

<ul class="gallery">
<li><img src="$ThumbnailURL" title="$Caption.EscapeXML" alt="$Title.EscapeXML"></li>
</ul>'s my Galleria.php:


class Galleria extends ImageGalleryUI
   static $link_to_demo = "";
   static $label = "Galleria";
   public $item_template = "Galleria";
   public function initialize()


The CSS and JS files have been included too (copied directly from the Galleria site: [url][/url]).

The resulting layout looks much the same as the Lightbox/PrettyPhoto layouts (rows of thumbnails, and no large Galleria image), the problem is that it doesn't work, it doesn't do anything!


7 December 2009 at 2:03pm Community Member, 14 Posts

OK, still haven't got it to work properly yet but here's a link so you can see the result so far. Any help would be really appreciated...


8 December 2009 at 2:54am 4085 Posts

Okay, I'll look at it when I have a sec. You're sure you used the correct markup that Galleria requires? I know that component has very specific instructions.


8 December 2009 at 3:06am Community Member, 14 Posts

Yeah, before I put the code into SS I got it working independently using just the HTML, CSS and js. If you want I can send you the working files as they are now?



8 December 2009 at 4:06am 4085 Posts

Sure.. post a link to a ZIP.


8 December 2009 at 4:28am 4085 Posts

Actually, before you do that, there are a couple of glaring errors I'm seeing.

1) You're running the .galleria() function on a non-existent object. The "gallery" class doesn't exist anywhere until you run the next instruction, "addClass('gallery')". So you need to reverse those two instructions. .galleria(); needs to be the last thing you run.

2) You have a UL tag in your item template, so you're ending up with a bunch of ULs. The item template, as you'll see in the other UI plugins, is the markup that is rendered for each image gallery item. So it should just be an LI or DIV, or whatever your plugin requires. But in your case, a UL for each item is not what you want.

3) You have some hardcoded onclick attributes in your markup. That kind of design is strongly discouraged. You should attach those event handlers unobtrusively in your init script.

Go to Top