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

  • 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.


Viewing 15 replies - 1 through 15 (of 16 total)
  • I couldn’t get this to work as posted. I get an error on line 210 about an unexpected <

    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 “” 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 🙂

    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.

    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…)

    May I see a link to your version?



    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>";

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

    Thanks Kiatsu and James, perfect.

    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!!!

    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.

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

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

    How to add the title of the image when mouse over the image ?

    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: the problem is in the bottom of the site.

    Thank you for your help.

    To dexter_ade:
    You have cforms-plugin on your site and in one of it’s css-files ( there is a rule that hides prev and next buttons:

    [disabled] {

    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)

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Plugin: JJ NextGen JQuery Carousel] Adding Image Link To Thumbnails’ is closed to new replies.