Jump to:

7939 Posts in 1472 Topics by 944 members

DataObjectManager Module

SilverStripe Forums » DataObjectManager Module » Galleria integration with ImageGallery

Discuss the DataObjectManager module, and the related ImageGallery module.

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

Page: 1 2 3 4
Go to End
Author Topic: 7023 Views
  • Rockshox
    Avatar
    Community Member
    14 Posts

    Galleria integration with ImageGallery Link to this post

    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.

  • UncleCheese
    Avatar
    4085 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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.

  • Rockshox
    Avatar
    Community Member
    14 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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!

  • Rockshox
    Avatar
    Community Member
    14 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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/

  • UncleCheese
    Avatar
    4085 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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.

  • Rockshox
    Avatar
    Community Member
    14 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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

  • UncleCheese
    Avatar
    4085 Posts

    Re: Galleria integration with ImageGallery Link to this post

    Sure.. post a link to a ZIP.

  • UncleCheese
    Avatar
    4085 Posts

    Re: Galleria integration with ImageGallery Link to this post

    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.

    7023 Views
Page: 1 2 3 4
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.