WordPress.org

Ready to get started?Download WordPress

Forums

JJ NextGen JQuery Cycle
Display Image Titles? (7 posts)

  1. jwcrash
    Member
    Posted 3 years ago #

    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?

  2. gloriagoldrea
    Member
    Posted 3 years ago #

    Hi-
    Did you find a solution for this?

    thanks...

  3. hotwire32
    Member
    Posted 2 years ago #

    I'd like to know too please :)

    -thanks

  4. phew72
    Member
    Posted 2 years ago #

    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.

  5. Donnacha
    Member
    Posted 2 years ago #

    Thank phew72 :)

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

  6. codebloo
    Member
    Posted 2 years ago #

    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) . "\" ";

    to

    $image_description = $image_description ;

    Then on line 169 change

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

    to

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

  7. Donnacha
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic