Josh Mather » Using the NextGen Gallery with any jQuery Gallery Plugin

Using the NextGen Gallery with any jQuery Gallery Plugin

04.19.2010 | Author: joshm | Posted in Sharings

So I don’t love to develop with Wordpress all that much (much prefer python to php any day), but it has it’s place, and can definitely serve a purpose. One of the things that I run into quite often is having to add some sort of photo gallery to the Wordpress installation. I looked around for a simple administration type gallery that would just supply me the images and text without having a lot of extra unnecessary hoopla that most Wordpress plugins and galleries have. That said, the environment for this is lacking so I chose to use Alex Rabe’s NextGen Gallery.

At first the gallery was a bit much for me and I searched for something more lightweight to no avail. That said I found a quite simple and elegant solution so that I can pretty much use any jQuery Gallery Plugin with the NextGen Gallery thanks to NextGen’s templating capabilities.

In this example I will use the Gallerific plugin to display the gallery, completely bypassing any of the NextGen built in Gallery support.

Start by downloading the Gallerific plugin and installing it into your wordpress theme (see wp_enqueue_script if you don’t know how to do that), once you are sure it is in your header accordingly move to the next step
Install the NextGen Gallery Wordpress Plugin - this step is pretty straightforward, and once it is installed, go ahead and create a gallery and put a few images in it.
The next step is to create the custom template for to hold your images and output them with the Gallerific script, this is done by creating a directory in your theme named wp-content/themes/your-theme/nggallery/gallery-yourtemplatename.php Here you name the part after gallery- with the name of the template that you will address in your shortcode to output on your post or page (or programmatically).
Now that this is done, you need to put some code in your new custom template to make this work. Fortunately you will be given all the images in your respective gallery, so it is quite easy to display them in the template, here I’m not displaying thumbnails at all in the gallery, just numbered pagination:

Viewing 10 Comments

Leandro Figueiredo 4 weeks ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Hi,

I could not do the integration.
If you can.
You can post the step by step?
With details.

Thanks

reply edit reblog flag

joshmather 4 weeks ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Sorry, I can't post an entire nextgen gallery integration..that wasn't my point here. I was just showing how if you have nextgen setup and know how to use http://nextgen-gallery.com/templates/ then you can easily add gallerific as a plugin..it wasn't meant to be a start to finish example of doing a nextgen integration to a wordpress.

reply edit reblog flag

2 /people/joshmather/ /people/joshmather/following/ http://joshmather.com

Lee 1 month ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Close to giving up on this, just thought i would give it one last chance before I find an alternative.

The thumbnails appear to be a broken link - how does the Gallereffic code know where to look for thumbnails?

also same situation as Heather with the larger image. again same answer how does the code know where to look for said images?

Thanks

Lee - sorry O know i have been annoying, please forgive :-)

reply edit reblog flag

joshmather 1 month ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

No worries, as I said, I didn't use the thumbnails, I customized this to use the numbers in place of the thumbnails as above so your mileage may vary...that said gallerific uses the combo of:

<div class="slideshow" id="slideshow"></div>
and
imageContainerSel: '#slideshow',

to tell it where to display the slideshow images. Make sure you double check your gallery settings as well...that is in a post around here somewhere :)

It appears another poster here got it working and did some customizations as well:

http://simplyposh.s38.saxonyhost.com/galleries/couture/

You can also view one of my implementations of this at:

http://iacolimcallister.com

reply edit reblog flag

2 /people/joshmather/ /people/joshmather/following/ http://joshmather.com

Lee 1 month ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Yea I seen Aarons gallery, Awesome. Why can't there just be a simple gallery that looks good on the huge Wordpress plug-in database. Looks like I'm back to square one. thanks for your help anyway, much appreciated.

reply edit reblog flag

Lee 2 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

HI, struggling a little with your instructions. I have followed them closely and was just wondering how you actually get them to display on a page?

" with the name of the template that you will address in your shortcode to output on your post or page (or programmatically)."

I'm not sure what this means? do you mean i.e

[nggallery id=4 theme=style]

style been the name of the template you created inserted into a page or post? Im probably well off here ha.

thanks :-)

reply edit reblog flag

joshmather 2 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

That is correct:

Or just the shortcode if you put it in the editor:

[nggallery id=1 template=basegal ]

Here basegal is the template file in:

wp-content/themes/themename/nggallery/gallery-basegal.php

reply edit reblog flag

2 /people/joshmather/ /people/joshmather/following/ http://joshmather.com

Lee 2 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Ok that kind of works (well a little more than it did before, ha) I am getting 5 numbers on the left hand side of which I am assuming they are supposed to be images, although the there are only 3 images in that particular gallery?

When you click on a link it says:

Not Found

The requested URL thumb.php was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

I have included a thumb.php in the location it points to.

Any ideas?

Thanks :-)

Lee

reply edit reblog flag

Lee 2 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I sorted out the issue with it not displaying the correct number of images. I'm just getting the NOT FOUND message in reference to the timthumb although it is exactly where it states it is?

reply edit reblog flag

joshmather 2 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You don't have to use timthumb, I should probably remove that from the code above. I just use it for image scaling. If you don't have it installed the above code will not work out of the box.

reply edit reblog flag

2 /people/joshmather/ /people/joshmather/following/ http://joshmather.com