WordPress.org

Ready to get started?Download WordPress

Forums

JJ NextGen JQuery Carousel
Adding Image Link To Thumbnails (17 posts)

  1. Kiatsu
    Member
    Posted 3 years 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/

  2. TheShow
    Member
    Posted 3 years ago #

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

  3. digdigdig
    Member
    Posted 3 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 :)

  4. borzoid
    Member
    Posted 3 years 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.

  5. timoto
    Member
    Posted 3 years 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...)

  6. borzoid
    Member
    Posted 3 years ago #

    May I see a link to your version?

  7. James
    Member
    Posted 3 years 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>";

  8. Whirlspinner
    Member
    Posted 2 years ago #

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

  9. craig82
    Member
    Posted 2 years ago #

    Thanks Kiatsu and James, perfect.

  10. kg69design
    Member
    Posted 2 years 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!!!

  11. craig82
    Member
    Posted 2 years 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.

  12. illusiodesign
    Member
    Posted 2 years ago #

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

  13. sood15
    Member
    Posted 2 years ago #

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

  14. multras
    Member
    Posted 2 years ago #

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

  15. dexter_ade
    Member
    Posted 2 years 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.

  16. kg69design
    Member
    Posted 2 years 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)

  17. dexter_ade
    Member
    Posted 2 years ago #

    Hi kg69design Thanks for you help, your answer works very well, God bless you, I'm working with images, I think it's the only thing missing, I am very happy with the result. Thank you. See you

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic