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
Reply


28 Posts   8288 Views

Avatar
Rockshox

Community Member, 14 Posts

6 December 2009 at 7:21am

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.

Avatar
UncleCheese

Forum Moderator, 4096 Posts

6 December 2009 at 9:51am

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.

Avatar
Rockshox

Community Member, 14 Posts

6 December 2009 at 1:16pm

Edited: 07/12/2009 11:16am

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: [url]http://devkick.com/lab/galleria/[/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!

Avatar
Rockshox

Community Member, 14 Posts

7 December 2009 at 2:03pm

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/

Avatar
UncleCheese

Forum Moderator, 4096 Posts

8 December 2009 at 2:54am

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.

Avatar
Rockshox

Community Member, 14 Posts

8 December 2009 at 3:06am

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

Avatar
UncleCheese

Forum Moderator, 4096 Posts

8 December 2009 at 4:06am

Sure.. post a link to a ZIP.

Avatar
UncleCheese

Forum Moderator, 4096 Posts

8 December 2009 at 4:28am

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