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)
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
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
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
Step 4
Activate Lightbox Formats (Easy Fancybox)
- Select: Settings - Located on your main menu (traditionally on the left)
- Select: Media
Scroll down a little and activate the other formats you desire such as:
- SWF
- YouTube
- Vimeo
- DailyMotions
- iFrames
Adjust Settings as you see fit.
Select: Save Changes (at the very bottom)
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.
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.
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.
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:
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.
