7913 Posts in 1355 Topics by 930 members
|Go to End||Next >|
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.
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.
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.
6 December 2009 at 1:16pm Last edited: 7 December 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:
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
...and here's how I have translated it for use in the Galleria.ss template:
<li><img src="$ThumbnailURL" title="$Caption.EscapeXML" alt="$Title.EscapeXML"></li>
...here's my Galleria.php:
class Galleria extends ImageGalleryUI
static $link_to_demo = "http://devkick.com/lab/galleria/";
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: 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!
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.
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?
8 December 2009 at 4:06am
Sure.. post a link to a ZIP.
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||Next >|