WordPress.org

Support

Support » Plugins and Hacks » [Plugin: NextGEN Gallery] image description and next-prev buttons in jQuery Cycle slideshow (hack)

[Plugin: NextGEN Gallery] image description and next-prev buttons in jQuery Cycle slideshow (hack)

  • 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 (after var obj=…):

    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);
        };

    3.0) in nggallery.php, replace
    wp_enqueue_script('ngg-slideshow', NGGALLERY_URLPATH .'js/ngg.slideshow.min.js', array('jquery-cycle'), '1.05');
    with
    wp_enqueue_script('ngg-slideshow', NGGALLERY_URLPATH .'js/ngg.slideshow.js', array('jquery-cycle'), '1.05');

    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/

  • The topic ‘[Plugin: NextGEN Gallery] image description and next-prev buttons in jQuery Cycle slideshow (hack)’ is closed to new replies.