Support » Plugin: JJ NextGen JQuery Cycle » Display Image Titles?

  • Is there a way to display image titles for each photo as they display? I see that variable on the Cycle Lite page as one of the examples but have no idea how to integrate it into this plug-in.

    Can anyone help?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi-
    Did you find a solution for this?




    I’d like to know too please 🙂


    I’m not sure if there’s a proper way, but it can be done by modifying the plugin.

    In the plugin’s /include folder there’s a file called jj_ngg_jquery_cycle.php.

    Line 155 of this file reads:
    $image_description = "alt=\"" . esc_attr($image_description) . "\" ";

    Change the alt= bit to title= and the html output will be a title tag instead of alt, which will display the text when rolled over.

    This picks up whatever is in the description in NextGen gallery, so you can still use the URL link in the Alt/title field in NextGen.

    Thank phew72 🙂

    Does anyone know how to make the title actually appear either within or beneath each photo as it displays?

    Donnacha – There’s probably a way to do this without sacrificing any of the existing functions but I’m not that adept.

    I’m setting the alt tag to the default alt data instead of the description, and moving the description to a span tag under the image classed as “caption”. I’ve also wrapped each image in a div with the class “cycle_image”

    Change Line 155 from

    $image_description = "alt=\"" . esc_attr($image_description) . "\" ";


    $image_description = $image_description ;

    Then on line 169 change

    $output .= "<img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" />";


    $output .= "<div class=\"cycle_image\"><img src=\"" . $image->imageURL . "\" " . $width_d . $height_d . " border=\"0\" alt=\"". $image_alt ."\" /><span class=\"caption\"> $image_description </span></div>";

    The output code for will be something like

    <div class="cycle_image" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 0.957621;"><img border="0" alt="pink-twist" src="http://localhost:8888/kjd/wp-content/gallery/spotlight/pink-twist.jpg"><span class="caption"> pink-twist </span></div>

    @codebloo, thanks so much for taking the time to share your solution, I’m looking forward to trying it out.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Display Image Titles?’ is closed to new replies.