The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. davydov-denis
    Posted 4 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 (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() {

    3.0) in nggallery.php, replace
    wp_enqueue_script('ngg-slideshow', NGGALLERY_URLPATH .'js/ngg.slideshow.min.js', array('jquery-cycle'), '1.05');
    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.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • NextGEN Gallery
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.