EDITORS NOTE: The advice in this guest article will no longer work as is as of NextGEN Gallery 2.0
-
Have you ever felt like loading a video instead of an image? Or launch a PDF or even a URL within or outside your website from NextGen? Here are the Solutions to convert the Image List Gallery into more than just a thumbnail gallery.

Plugins Required:

Step 0

  • Install Plugins And activate
  • Have 2 Tabs open:
    • One in WordPress Backend
    • One on your Site.

I Suggest this method as it's much easier to copy and paste or look for an item from one area of the CMS and paste to the other or Test.

Step 1

Add The Custom Fields

  • Select: NGG Custom Fields - located on your main menu (traditionally on the left)
  • Select: Image Custom Fields (Add custom fields to be added to images inside NextGEN Galleries)

nextgen-gallery-custom-fields

Add New Fields

It is necessary that the Galleries which will use these fields are checkbox'ed under "Show on Galleries" located on this page. The Following Fields are Case Sensitive, Please spell them correctly:

  • Link
  • Method
  • Info
  • Target

nextgen-gallery-custom-fields

Step 2

Change Code with in NextGen

If you use the Plugin Editor with in WordPress, please follow these steps by selecting:

  • Plugins
  • Editor

From the Dropdown located on the right select: NextGen Gallery

Click "Select" button

From the List of Files right below, find the following: nextgen-gallery/view/gallery.php

This is located near the bottom

nextgen-gallery-changing-code

If you are using an FTP Client, this is the path to find the file:

/wp-content/plugins/nextgen-gallery/view/gallery.php

Find the Following Line of Code:
Replace with this:

Step 3

Update NextGen Options to use New Lightbox (Easy FancyBox)

  • Select: Gallery - Located on your main menu (traditionally on the left)
  • Select: Options
  • Select Tab: Effects - At the top Menu
  • Under "JavaScript Thumbnail effect" select from the Dropdown: Custom
  • Replace the TextArea labeled "Link Code line" with: class="fancybox" rel="%GALLERY_NAME%"
  • Select: Save Changes

nextgen-gallery-effects

Step 4

Activate Lightbox Formats (Easy Fancybox)

  • Select: Settings - Located on your main menu (traditionally on the left)
  • Select: Media

nextgen-gallery-media

Scroll down a little and activate the other formats you desire such as:

  • PDF
  • SWF
  • YouTube
  • Vimeo
  • DailyMotions
  • iFrames

Adjust Settings as you see fit.

Select: Save Changes (at the very bottom)

nextgen-gallery-fancybox

Step 5

How it Works - Explanation

First you will need to go into a Gallery by doing the Following:

  • Select: Gallery - Located on your main menu (traditionally on the left)
  • Select: Manage Gallery
  • Select: a Gallery you want to test with.

What you will Notice:  Next to each gallery on the right, you will see all 4 Fields you added in Step 1. This is how it acts:

Link: This is the URL or YouTube/Vimeo embed URL area. Normally the object you wish to show.
If left blank, it will default to the image in your gallery.

Method: This is the Fancybox class which will know what to do with the link.
Lightbox a video, pdf, iframe a site, etc. Or tell it to not use fancybox.

Info: This is the title="" in your <a> tag, good for SEO or rollover information.

Target: This is the target="" in your <a> tag, normally used when you want to link a thumbnail to another page in your site, or "_blank" target to another.

nextgen-gallery-document

Step 6

Make it Work

For YouTube & Vimeo

This is a little confusing, so pay close attention:

YouTube has 2 different links to share videos, and you need the URL which is located in the "EMBED" version of your "Share"; below:

<iframe width="560" height="315" src="http://www.youtube.com/embed/Nsnc3fE5ejo" frameborder="0" allowfullscreen></iframe>

The same applies to Vimeo when you Share. The embed URL is in the src="" of the tags.

Grab the URL in the src=

https://youtube.com/watch?v=Nsnc3fE5ejo

It's always using their embed directory and the ID of your video, for youtube.

nextgen-gallery-youtube-embed

Link: Put this URL in the Link field you created in Step 1

Method: Put the following in the Method field -  fancybox-youtube

For PDF

Link: The full path of where the PDF is located: http://mywebsite.com/wp-content/uploads/mypdffile.pdf

When you upload your Media Files, you will get a link at the bottom under "File URL", just copy paste it into the Link field.

nextgen-gallery-pdf-upload

Method: fancybox-pdf
Everything else is left alone.

For iFrame

Link: The full path of where you want to take users: http://mywebsite.com/mypost or http://anotherwebsite.com/directory

Method: nofancybox
This is so that Easy Fancybox doesn't auto launch an iFrame

Target: Decide if you want the link to open a new window: _blank
Or leave blank to let it open in the same window.

Step 7

Add Image List Gallery

Create a Page or Post with your Gallery. Make sure it's an Image List:

nextgen-gallery-image-list

That's it. Save Changes and Refresh your Page to test it out.

Examples:

Visit my site under the Video Games category, and you will see the dynamics of this:

http://andrecm.com/portfolio/games/

or direct link:

http://andrecm.com/games/frantix/

-

André Couturier Maitret is a Designer and Creative Director for multi-level industries ranging from Video Games to Nouveau Art.  André transitioned from being a Flash designer (who developed SEO friendly Flash Fusion websites - swf, js, php, xml - ) into using WordPress as it's today's best solution for Web and Mobile content for clients of all industry levels.

Share this with other photographers

Leave a Reply

Close Menu
[i]
[i]