My First MODx Package: NivoGallery

Posted on Jul 02, 2011 | Tags: , , | Comments (23)

Orman Template

After seeing how many people in the forums have had many issues understanding how to create a gallery I took the liberty of adapting the awesome Nivo Slider into MODx.

I tried to make it as user friendly I could so pretty much anyone no matter what your skill level can create an awesome looking gallery with just a few clicks and text entries. Nivo Gallery relies on the Gallery plugin for MODx in other words if you don't have this plugin installed NivoGallery won't work.

So how does NivoGallery work?

Simple, once you download and install the NivoGallery package from the MODx package manager create a new Gallery album, upload your images set your image descriptions like you normally would then create a new page and select the nivoGallery template from the Uses Template drop down in MODx.

Nivo Gallery Select

Then click on the Template Variables tab.

Nivo Gallery Template Variables Tab

Here's a run down of the options.

  • Nivo Transition Effect: contains a drop down list of all the available effects for the NivoGallery just select which effect you want your gallery to display with.The default effect is random.
  • Nivo Image Indicator: allows you to display bullets underneath your gallery image, Yes display them, No hides them.
  • Nivo Timer: allows you to set the delay between image transitions in milliseconds. Default setting is 5 seconds.
  • Nivo Album: is a drop down list of all the gallery albums you currently have in the gallery component.
  • Nivo Caption: allows you to display or hide image captions, you image captions is the description you provide for each image in gallery. Default setting is set to yes.
  • Nivo Gallery: Chaging this setting willl allow you to display your gallery. Default setting is yes.
  • Nivo Theme: allows you to choose from the 3 themes NivoGallery comes with, Default, Orman or Pascal. The default image sizes for each of these is under the description. Only the Default template is resizable for now.
  • Nivo Image Height: Allows you to specify the height of you image.
  • Nivo Image Width: Allows you to specify your image width.

Publish your page and enjoy your NivoGallery.

Here are some screenshots of each template.

Default Template.

Default Template.

Orman Template.

Orman Template

Pascal Template.

Pascal Template

If you want to change your bullets position or next and previous buttons position check the styles.css in the assets/templates/nivoSlider directory to insert your css.

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 the upcoming version of NivoGallery I am currently working on this version will have thumbnail and thumbnail carousel support.

If you have any questions feel free to leave a message or contact me.

Like this plugin? Consider making a small donation. With your donations I can keep working on NivoGallery and who knows what else I might come up with. Send me your suggestions I might just create what you need.

Thanks. 


Share This Article

Leave a Comment


Comments (23)

  1. Slivus:
    Jul 20, 2011 at 03:35 PM

    How to create a new Gallery album?

  2. Peter:
    Jul 28, 2011 at 09:00 AM

    In what location is the Gallery for the nivoAlbum located? In other words where do I place my images in the files tree?

  3. Mike:
    Jan 16, 2012 at 11:24 PM

    any plans to make this compatible with 2.2?

  4. benmarte:
    Jan 17, 2012 at 01:45 PM

    Mike afaik you shouldn't have any issues running it on 2.2 if you do let me know so I can look into it.

    Thanks.

  5. Mike:
    Jan 18, 2012 at 05:03 PM

    I'll test it out when I get a chance. I just couldn't download it from package manager and when you goto extras it says compatible up to 2.1.x, right now i just did nivo the old fashion way! cut n paste lol. but the added gallery management would be a plus.

  6. Jason Monette:
    Jan 22, 2012 at 12:58 PM

    Hello,

    I am trying to get your package to work. But I am having trouble. Could you help me out?

    I am trying to get it to work on its own page first and I have been unsuccessful. I get a black white screen

    http://jbmautomation.com/test.html

    Any help you can give me to get this working would be greatly appreciated

  7. Samy:
    Jan 24, 2012 at 09:36 PM

    Hello,
    Your package is no more accessible in 2.2.0.. How can I get it?

  8. Mike:
    Jan 24, 2012 at 10:18 PM

    Sammy, Try going to http://modx.com/extras/ downlaod from there. you can then deploy it to your server. keep in mind it's listed as compatible up too 2.1.x so your going to have to test it to make sure it's working correctly

  9. Samy:
    Jan 25, 2012 at 08:56 AM

    Hello
    I tried but somehow it doesn't appear in the file tree...
    I have this package installed on a previous modX version, can I just copy /paste the chunks, snippets and TV's?
    Thanks

  10. Benjamin Marte:
    Jan 25, 2012 at 12:42 PM

    Samy,

    Download the package like Mike said and make sure you upload it to the Core > Packages folder.

    Then go to System > Package Management, on the Package Management screen click on the down arrow in the Download Extras button and select Search Locally for Packages.

    It should come up in package manager.

    Yes you can manually copy and paste it from another install just make sure you name everything the same and upload the files to the right folder in assets.

    I don't know why it's not showing up in Package Manager as it is compatible with 2.2 since I have it running on this site and a few others.

    Let me know if you solve your issue.

    Thanks.

  11. de Barbe:
    Apr 12, 2012 at 10:21 AM

    In my case it's not working.
    After installing and doing the steps above I get an empty site:
    >!--

    MODX Revolution | galleryTest




    Default




    -->
    ....don't know what to do now :(

  12. Edward Martin III:
    Jun 13, 2012 at 04:45 PM

    It's a very pretty addition, but is there a way to drop it into an existing page, instead of on its own page?

    I'm new to MODx, so it's entirely possible I'm missing an obvious answer. For example, is there a snippet call I can use to drop a small gallery in the middle of a page of existing content?

    My goal is to be able to have several specialized galleries, each on different pages.

    Thanks!

    Edward

  13. benmarte:
    Jun 13, 2012 at 05:16 PM

    Edward yes this is possible and pretty easy to accomplish, just copy the [[*nivoTheme]] and place it in your header, the [[$nivoGallery]] call place it where you want to display your gallery and copy the [[$nivoScripts]] call just before the end of the body tag.

    Make sure to give access to all of NivoGallery template variables to each template that you want to use NivoGallery with.

    Just select the template then click on the template variables tab and check mark each TV that has a category of NivoGallery.

    Hope that helps.

  14. Edward Martin III:
    Jun 13, 2012 at 05:38 PM

    Thanks! I have some newbie-level questions...

    "...just copy the [[*nivoTheme]] and place it in your header, the [[$nivoGallery]] call place it where you want to display your gallery and copy the [[$nivoScripts]] call just before the end of the body tag."

    So, these three items go in the specific PAGE or in the TEMPLATE. I'm a little confused because references to the header and body tag suggests I'd put it in the template, but I'm trying to achieve page-level additions. Sorry if I'm missing something...

    Is there a formatting example block for the [[$nivoGallery]] call (that is, how in the call do I specify which album to use, the dimensions, and so forth)?

    "Just select the template then click on the template variables tab and check mark each TV that has a category of NivoGallery."

    I was able to do this on the page's TEMPLATE. I'm assuming I'm supposed to pick every template variable of the form nivo*, and not solely the one Template Variable called nivoGallery?

    Thanks!

  15. benmarte:
    Jun 13, 2012 at 06:14 PM

    Edward, I meant to write head insert [[*nivoTheme] in the head tag of your template. All 3 tags should be inserted in your template not the page.

    The [[$nivoGallery]] call already has the options so you can specify the album and dimensions of your gallery, just make sure you give the template access to all the NivoGallery template variables not just the nivoGallery one.

    The template should have access to 13 template variables with the NivoGallery category (possibly more or less they all have NivoGallery as the category)

  16. Edward Martin III:
    Jun 19, 2012 at 06:04 AM

    Cool! SO far, it's looking real nice.

    A peculiar thing happens, though -- maybe you've seen this before. When I mouseover any of the images (they're all links), they immediately switch to black.

    You can see the effect here:

    http://www.mod.hellbendermedia.com/

    Also, for some reason, it's placing the word "Default" into the headers of the other pages.

    My head declaration in my TEMPLATE looks like this:





    [[++site_name]] | [[*pagetitle]]
    [[*nivoTheme]]


  17. Edward Martin III:
    Jun 19, 2012 at 06:04 AM

    Cool! SO far, it's looking real nice.

    A peculiar thing happens, though -- maybe you've seen this before. When I mouseover any of the images (they're all links), they immediately switch to black.

    You can see the effect here:

    http://www.mod.hellbendermedia.com/

    Also, for some reason, it's placing the word "Default" into the headers of the other pages.

    My head declaration in my TEMPLATE looks like this:





    [[++site_name]] | [[*pagetitle]]
    [[*nivoTheme]]


  18. Edward Martin III:
    Jun 19, 2012 at 06:19 AM

    Ah, I found the reason why "Default" was showing up on the other pages and took care of it.

    Still, the image-turns-black-on-mouseover is mighty puzzling to me.

    Any advice?

    Thanks!

  19. Edward Martin III:
    Jun 19, 2012 at 03:48 PM

    Aha! Found my issue -- it was a CSS thing.

    The module works beautifully now!

    Thank you for all your help earlier!

  20. Petar:
    Jul 12, 2012 at 07:01 AM

    Hi There,

    Any ideas on why this has happened?

    http://blakehurstacademy.com.au/mod/

    I just keep getting the loading symbol and then the two images in that gallery seem to randomly appear!!

    Thanks :)

  21. chirag:
    Feb 08, 2013 at 05:18 AM

    Hello i am new to mode'x.

    i have install the NivoGallery slider from the http://modx.com/extras/package/nivogallery2

    after that automatically a new template or chunks and TV will be creat .. now my question is that form where i can create the gallery so i can uploade the images for the slider ..?

    Thanx :)

  22. Ian:
    Jan 15, 2014 at 06:06 PM

    Hi

    Should this work with 2.2.10 as I have uploaded the file and done a local search but this is not found, I have uploaded the zipped file and tried unzipping it and uploading to core/packages but no luck, this is the 1st time I have tried doing a local install I am no expert so highly likely the error is with me any advise would be great this looks like a great package.

    Thanks

    Ian

This thread has been closed from taking new comments.