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.

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 Galleria_item.ss, 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.

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 Galleria.ss 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> 
</ul>

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

<ul class="gallery"> 
<li><img src="$ThumbnailURL" title="$Caption.EscapeXML" alt="$Title.EscapeXML"></li> 
</ul>

...here's my Galleria.php:

<?php

class Galleria extends ImageGalleryUI
{
	static $link_to_demo = "http://devkick.com/lab/galleria/";
	static $label = "Galleria";
	public $item_template = "Galleria";
	
	public function initialize()
	{
		Requirements::javascript('jsparty/jquery/jquery.js'); 
		Requirements::javascript('image_gallery/gallery_ui/galleria/javascript/jquery.galleria.js');
		Requirements::javascript('image_gallery/gallery_ui/galleria/javascript/galleria.settings.js');

		Requirements::css('image_gallery/gallery_ui/galleria/css/galleria.css');
		
	}
	
}

The CSS and JS files have been included too (copied directly from the Galleria site: http://devkick.com/lab/galleria/).

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!

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...

http://www.benwellby.com/new-imagegallerypage/

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.

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?

Cheers

Sure.. post a link to a ZIP.

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.