New MODx Gallery Plugin: FullSide Gallery

Posted on Sep 05, 2011 | Tags: , , | Comments (9)

SideWays Gallery

So after browsing the internet and looking for some awesome jQuery Galleries and Sliders I came across FullScreen and Sideways Galleries created by Manos Malihu and decided to make them a package for MODx called FullSide Gallery.

These galleries are more for a photographer to display his pictures rather than a gallery you can have in your site layout, with that being said let's proceed on how to use it.

Please Note: You must have the Gallery package installed and have a gallery created in order for this package to work.

FullSide Gallery ships with 3 templates:

 

FullScreen Gallery

FullScreen

 

Sideways

SideWays

SideWays Native

SideWays Native

 

So what are the differences between SideWays and SideWays Native Templates?

SideWays Native uses the browsers native scrollbars instead of the custom scroller used in the SideWays template, thus allowing the gallaery to work with touch devices but it doesn't work as great as the SideWays Template. I included it for those that wanted to support touch devices.

Sideways Gallery Template has the option of putting some content in the sidebar where the thumbnails are displayed. The Page Title is used as the header in the sidebar and the resource content will appear underneath it, you can insert html links, images and any other elements you want in this area as your normally would in a webpage.

Images change based on the image you click on in the sidebar or by clicking the image itself, the image name will appear as the alt and title tag for each image.

 

What about FullScreen Gallery Template?

FullScreen Gallery template has a different layout thatn SideWays, basically instead of displaying the thumbnails in the hidden sidebar they appear when you hover over the bottom of the page, you can change images based on the thumbnail you click on or via the arros on each side of the image being displayed and it has an option on the top right to switch between a fullscreen image and the original image size. The image name will appear on the top left hand side of this template.

 

How do I use this awesome gallery?

Easy, after installing FullSide Gallery via the package manager create a new resource and select one of the 3 templates mentioned above for the resource.

 

 

Then proceed to the template variables tab.

 

 

Finally select the gallery you want to display with the template you chose.

 

 

Save your resource and preview your page.

Update: If this extra doesn't show up in package manager just download it from here and manually install it.

Here is a sample of what the Sideways Gallery looks like and here is a FullScreensample.

That's it, let me know your thoughts via the comments or in the MODx forums and remember if you like this or any of my other MODx plugins consider making a small donation.

Thanks.


Share This Article

Leave a Comment


Comments (9)

  1. Nick:
    Sep 08, 2011 at 08:14 PM

    Amazing job with this. I actually used malihu's fullscreen gallery for a modx revo site with gallery a couple of months ago, but didn't have time to make it into a plug in. This is brilliant!

    Here's the site if you wanna check it out - http://workstead.com

  2. Sepia River MODX:
    Sep 19, 2011 at 06:47 PM

    Hey Ben, Nice Work!!

    How easy/hard would it be to have a package that doesn't use the Gallery plug-in? I use FileLister to output gallery image tags, and I'm not sure how that would work with FullSide?

    Thanks bro,
    YJ

  3. Jamison Mergens:
    Sep 23, 2011 at 09:26 AM

    Great gallery plugin, and THANKS for making it easy to install.

    One thing, it doesn't really support sub-levels; if your gallery url is IN a "folder" (.com/site/portfolio.html) you'll need to:
    1) Re-insert the code in the template files.
    2) absolutely reference the css and local js files in the templates.

    Thanks again though!

  4. Martin:
    Sep 28, 2011 at 07:39 AM

    Hey,

    great Job, I love it!

    Just had to add some lines to the template to get it going with user-friendly URLs.

    Inside the head:
    base-tag with: href="[[!++site_url]]" ( your comment-engine won't let me put in the correct tag ;)


    And anywhere in the templates I added [[++site_url]] in front of the paths, like:
    ... link href="[[++site_url]]assets/FullSide/FullscreenGallery/css/fullscreen-gallery.css" ...

    Thanks again!

    Martin

  5. Sivaramakrishna:
    Feb 10, 2012 at 06:39 PM

    I'd like to see some dereffint types of navigation, with horizontal & vertical menus, along with tabs at the top. It would be nice if it was available in colours other than blue :P

  6. KeithM:
    May 05, 2012 at 06:18 AM

    Great job and a fantastic contribution.
    Don't know if it's because I'm a newbe to modx but I had to compress the download into a transport package in order to install it via modx package management.
    Thanks a million for this!

  7. Nelson:
    Oct 31, 2012 at 03:43 AM

    Wonderful !
    However, I cannot find it in modx-revolution download Extras ! Can you please tell me how to get it or any link to get any transport file ?
    Anyway, thanks !

  8. Mike Smull:
    Jan 03, 2013 at 08:52 PM

    Hey Ben, This looks really great. I'm looking forward to trying it.

  9. benmarte:
    Jan 04, 2013 at 03:46 PM

    @Nelson and @Mike you guys can download the transport package and install it manually IDK why it doesn't show up on the package manager but it is compatible with pretty much every version of Revo that I know of theres nothing special about the plugin besides some TVs and chunks.

    Link to fullside gallery: http://modx.com/extras/package/fullsidegallery

This thread has been closed from taking new comments.