WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] image description and next-prev buttons in jQuery Cycle slideshow (hack) (1 post)

  1. davydov-denis
    Member
    Posted 2 years ago #

    Hi everyone,

    I modified nggfunctions.php as well as ngg.slideshow.js in order to show image description and nex/prev buttons in slideshow mode, in case someone would like to have it, I share it below, BUT SAVE ORIGINALS IN CASE SOMETHING GOES WRONG! I'm not responsible for any damage you might deal trying this "hack"!

    working example is here.

    1) in nggfunctions.php before '$out .= "\n".'<script type="text/javascript" defer="defer">';' add:

    $out .= '<div id="' . $anchor . '-text"  style="float: left">';
    $out .= '</div>'."\n";
    $out .= '<div id="' . $anchor . '-next"  style="float: right; margin-left:10px;"><a href="#">next</a>';
    $out .= '</div>'."\n";
    $out .= '<div id="' . $anchor . '-prev" style="float: right; margin-left:10px;"><a href="#">prev</a>';
    $out .= '</div>'."\n";

    2)in ngslideshow.js:

    2.1) add to variable declarations:

    var obj_T = obj +'-text';
    var obj_N = obj +'-next';
    var obj_P = obj +'-prev';
    var stackT= [];

    2.2) below stack.push add stackT.push( photo['description']);

    2.3) in loadImage/jCycle_onBefore after img.src add img.alt = stackT.shift();

    2.4) in startSlideshow:

    jQuery( obj ).cycle( {
           		fx: 	s.fx,
                    containerResize: 1,
                    fit: 1,
                    timeout: s.timeout,
                    before: jCycle_onBefore,
                    after: jCycle_onAfter,
                    next:   obj_N,
                    prev:   obj_P
            	});

    2.5) and finally add function:

    //display title
        function jCycle_onAfter() {
           jQuery(obj_T).html(this.alt);
        };

    p/s/ classes can be added to text/next/prev object in order to control how they appear by CSS. Styles I have work for me, but might not work for you.

    http://wordpress.org/extend/plugins/nextgen-gallery/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.