[Plugin: JJ NextGen JQuery Carousel] Adding Image Link To Thumbnails

kiatsu
(@kiatsu)

13 years, 1 month ago

I just installed the plugin today and it’s very useful. I see alot of people asking for clickable external links to the images.. I just found a simple solution. Hope it helps….

Go to the plugin folder:
jj-nextgen-jquery-carousel > includes

Find the file — jj_ngg_jquery_carousel.php

Backup & duplicate the file just in case something goes wrong, you’ll be able to restore it.

Open the file and find this line >
$output .= "<img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" />";

Add <a href=\"" . $image->imageURL . "\"> and </a>

Final Code:
<a href=\"" . $image->imageURL . "\"> <img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" /></a>

It should be able to use whatever effects you have on next-gen gallery or if you don’t have any on your setting, it should link to the image file.

(^__^)

http://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

theshow
(@theshow)

13 years ago

I couldn’t get this to work as posted. I get an error on line 210 about an unexpected <

digdigdig
(@digdigdig)

13 years ago

Thanks Kiatsu, that worked for me and gets me a little closer to what I would like to do.

I want to use the carousel to navigate to other images in the same imagebrowser gallery. Would anyone know if $image->imageURL can be replaced to output something like “site.com/?page_id=109&pid=18” so the current gallery (109?) remains the same and the pid changes to the thumbnail’s corresponding id? If I do $image->pid I get the pid number.

Also, is it possible to embed the carousel in the imagebrowser page rather than calling it with shortcode on each page?

Cheers 🙂

borzoid
(@borzoid)

12 years, 11 months ago

tried this – it opens the large image in an html window but no effects as set in ngGallery – I am trying to get a thickbox effect.

timoto
(@timoto)

12 years, 11 months ago

I managed to work this out by a mix of clues + trial and error – (**without having to change any coding, btw).
This looks like a nice little utility – for which I’m grateful – but the documentation is sadly somewhat lacking…
So as a contribution to any other frustrated users who haven’t yet worked it out (and they’ll be lucky to do so, I think) here are some steps to get you on your way:
1. NextGEN Gallery Overview / Manage Galleries
2. Open the gallery concerned – then
3. Add hyperlinks (or I assume WP page links will work too ?) to the top line of the “Alt & Title Text / Description” field for each image concerned.

et voila – It worked for me ! Each image with it’s very own clickable link.

(Now all I have to do is try and work out how to stop the images progressively disappearing … with a white “border” slowly growing from the bottom up until after about 10 minutes ALL the images have dissappeared !! I’ll start another discussion on this.. but any help would be much appreciated…)

borzoid
(@borzoid)

12 years, 11 months ago

May I see a link to your version?

James
(@james-callaway)

12 years, 10 months ago

Here is a copy of the coding I used to get the thickbox to work….

$output .= "<a class=\"thickbox\" rel=\"%GALLERY_NAME%\" href=\"" . $image->imageURL . "\"><img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" /></a>";

Whirlspinner
(@whirlspinner)

12 years, 7 months ago

Shot James, the updated code looks pretty sweet, working well.

craig82
(@craig82)

12 years, 6 months ago

Thanks Kiatsu and James, perfect.

kg69design
(@kg69design)

12 years, 5 months ago

Thanks Kiatsu !!! The solution works!
$output .= "<a href=\"" . $image->imageURL . "\"><img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" /></a>";
And Colorbox plugin automatically catches images!!!
craig82
(@craig82)

12 years, 5 months ago
Use this code to get the actual thumbnail and link to the full sized images.
```
$newurl = get_bloginfo("wpurl") . "/" . $image->path . "/thumbs/thumbs_" . $image->filename;
		$output .= "<a class=\"shutterset_set_1\" rel=\"%GALLERY_NAME%\" href=\"" . $image->imageURL . "\"><img src=\"" . $newurl . "\" " . $image_description . $width_d . $height_d . " border=\"0\"  /></a>";
```
This is a mash-up of “whatleyc”‘s and the above code.
illusiodesign
(@illusiodesign)

12 years, 3 months ago

Thanks craig82, that worked. Anyone know how get the description to display on the full sized images?

sood15
(@sood15)

12 years, 3 months ago

Hi Kiatsu,
this post resolve my problem to insert (open link in new page tag in link tag)
Thanks 🙂

multras
(@multras)

12 years, 2 months ago

Great,
How to add the title of the image when mouse over the image ?
Thanks

dexter_ade
(@dexter_ade)

12 years, 1 month ago

Hello everyone, I really worked very well the answers, but I have a question how I can show the prev and next buttons? laguien can help me please.

My site is: http://www.josemanueldominguez.net the problem is in the bottom of the site.

Thank you for your help.
kg69design
(@kg69design)

12 years, 1 month ago
To dexter_ade:
You have cforms-plugin on your site and in one of it’s css-files (http://www.josemanueldominguez.net/wp-content/plugins/cforms/styling/wide_open_nb_blue.css) there is a rule that hides prev and next buttons:
```
[disabled] {
	...
	background:none!important;
}
```
Add these lines to your theme css-file to override rules above:
```
.jcarousel-skin-tango .jcarousel-prev-horizontal{
background: url("prev-horizontal.png") 0px 0px no-repeat transparent !important;
}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background: url("next-horizontal.png") 0px 0px no-repeat transparent !important;
}
```
Also, this plugin has some problems in default mode (open your site and wait for a few minutes – images will disappear). To fix that, add this parameter to your shortcode:
[...your parameters... wrap="both"]

And it is better to use previews from nextgen-gallery (as explained above) or prepare required size of photo, because this plugin can’t resize it automaticaly (and you’ll get disproportion and low quality of previews)