NextGEN Gallery
[resolved] Description and Pagination show under Slideshow (29 posts)

  1. Visulla
    Posted 3 years ago #

    I am trying to get the description of a picture and pagination to read under the Nextgen Gallery Slideshow. I don't want to use a Flash Slideshow but the Javascript Slideshow. Where can I customize this Slideshow so it lookes like the Lightbox when you click on a Gallery Thumbnail?


  2. aundc
    Posted 3 years ago #

    oh, exactly this how to "... get the description of a picture ... under the Nextgen Gallery Slideshow" i really would know too ...
    Cheers :-)

  3. aundc
    Posted 3 years ago #

    ha, and some else:

      how to center the slideshow-images horizontally and
      how be able to prevent images get distorted

    thanks a lot!

  4. Visulla
    Posted 3 years ago #

    I think you just cannot do this wit [slideshow] so i chose [imagebrowser] instead, it has navigation and caption!

  5. aundc
    Posted 3 years ago #

    good idea also, thanks.

    but i really like to have a elegant & pretty slideshow at last,
    so i think to have a wide look around to change to a better plugin.
    the nextgen problem with the missing description in slideshows seems to be a years-old-one, i found out ... hmm.

    ps - belonging to my second queston above:
    first i tried the slideshow without the JW-Image-Rotator, now with the use of that the distortion is gone, ok.

  6. Visulla
    Posted 3 years ago #

    Ok, ja, I keep on looking too. It is nice when the pictures move automatically further with fade in fade out AND have descriptions and the navigation possibility (and then not INSIDE the picture). Couldn't find one solution under the slideshows with customize options. I let you know when I find something useful, let me know too. :)

  7. Michael
    Posted 3 years ago #

    I had the same "description"-problem, but I discovered a (quick n dirty) way to solve this (maybe it is helpful for you)

    1. Backup your files first! :-)
    2. Replace plugins/nextgen-gallery/js/ngg.slideshow.min.js
    with this one pastebin.com -i know it's not minified, but its better for editing
    3. Replace plugins/nextgen-gallery/nggfunctions.php
    with this one pastebin.com

    You can find all modifications with a short description by searching "//MOD" with every text editor.

  8. aundc
    Posted 3 years ago #

    thank you for this pretty support.

    i replaced the two files.
    and i think i understand that the mod does append the img-alt tag to the picts in the slideshow - good, i did gave the "alt"-description (Alt & Titel Text) to all the picts ... in "nggallery manage gallery".

    Yes, wonderful, it does work! there are captions displayed ... if e.g. i use Chrome / Safari 4 ... but in Safari 5 there aren't any captions shown.
    and finally i must recognize sadly, it doesn't display all the given captions while watching the slideshow. it does stop (so it does look like) after a while.

    what should the fault may be?

  9. Michael
    Posted 3 years ago #

    These two files are not final version of my modification or something. I just wanted to say that there is a solution to the problem and I am currently working on it.
    (After I've spent much time to search for a suitable plugin or extension for NGG. I thought that information might be helpful.)

    I had already found and corrected the error that you have discovered with the captions, it was a mistake in the Javascript file.

    My current version works fine with Safari5.1.7 on a windows machine.

    Now I am working on an additional shortcode that let you use the javascript-only version of the slideshow. If it works, I will publish my new version.

  10. Michael
    Posted 3 years ago #

    As promised:

    Title / Description Modification for the great NextGEN Gallery Plugin Version 1.9.6

    (now both title/alt text AND description are supported)


    1. Backup your files first!
    2. Replace the following files:
    [root] is your nextgen gallery root directory e.g. [your ftp root]/wp-content/plugins/nextgen-gallery as default
    2a. [root]/lib/shortcodes.php with this one
    2b. [root]/nggfunctions.php with this one
    2c. [root]/js/ with this one -now minified :-)
    3. thats it!

    Use the new shortcode "js-slideshow" like any other NGG shortcode.
    E.g. [js-slideshow id=5]

    For styling use "#ngg-js-slideshow-title" or "div#ngg-js-slideshow-title" and "#ngg-js-slideshow-description" or "div#ngg-js-slideshow-description" in your CSS file.

    You can find all modifications by searching "//MOD" with every text editor.

  11. Michael
    Posted 3 years ago #

    Removed a relict in nggfunctions.php use this link instead: click

  12. aundc
    Posted 3 years ago #

    excellent - i'm speechless with admiration!

    there's ready at last a such a long time vitally needed but missing feature - it should been blazed abroad ...!

    thank you so much!

  13. Michael
    Posted 3 years ago #

    You're welcome, but I have made it for me too. ;-)

    I have a small bugfix. If you have a js-slideshow with only one image, no title/description were shown. This is fixed now.

    You can get the new ngg.slideshow.min.js here.

    Or get the entire modified plugin here.

  14. aundc
    Posted 3 years ago #

    only one tiny thing i do miss now - i upset later that the original not so bad switch to "show picture list" - functionality has gone sadly ...

    has that been your personal idea of this alternate concept or more a technical problem? should it be possible re-adding it?


  15. Michael
    Posted 3 years ago #

    You're confusing something.
    There is a difference between the [slideshow] shortcode (which I have modified) and your shortcode [nggallery].

    Nevertheless I know what you mean and I have done some additional modifications to support title & description with the ngggallery shortocde.

    view demo here
    download new version here

    have fun. :-)

  16. griffmike28
    Posted 3 years ago #

    Thanks for the update.

    I have uploaded the fixed files and can now see title and caption/description under slider.

    My question is: To further style these text areas, do I insert coding inside the nggallery CSS file (or another place/file)?

  17. aundc
    Posted 3 years ago #

    super - thank you again!

    recently i'm interested too as griffmike28 did ask, how to style e.g. the "ngg-slideshow-title"

  18. Michael
    Posted 3 years ago #

    As it is an undesigned element you can set any style in any css file wherever you want.
    I would prefer the css file of my template, so it doesn't get overwritten if I (accidently) update nextgen.

    You can also add a style directly into the post/page (HTML view) as I did for the demo page, e.g.:

    div.ngg-slideshow-title {
      background: #000;
      color: #FFF;
      font-weight: bold;
      padding: 5px 0;
      text-align: center;
      width: 320px;
    div.ngg-slideshow-description {
      font-style: italic;
      padding: 5px 0;
      width: 320px;

    Please note, that ngg-slideshow-title and ngg-slideshow-description is a css class since the last update and not an ID for better HTML conformance if you have multiple slideshows.

  19. griffmike28
    Posted 3 years ago #

    Thank you!

  20. barnadave
    Posted 2 years ago #

    Hi Michael,

    This is partially a good solution for the problem I am having concerning the captions in the Js Slideshow.

    I have the captions working, they show, but only for the first three pictures.

    Which part do I have to modify, so the number of Captions is infinite.

    Thank you!

  21. barnadave
    Posted 2 years ago #

    Got it!
    Easypeasy really, just increased the number.. here good for 50 pix...
    No more help required.

    // load image and bind appendImage() to the img load - here we are making sure the loads do not get displaced
    	function loadImage(num){
             // check that stack is not empty and we haven't alreay loaded 3 images
             if(stackLength > 0 && num <= 50) {
                var img = new Image();
                img.src = stack.shift();
    			img.alt = desc.shift(); //MOD: append alt text
    			// wait to append image until the load is complete
            	jQuery( img ).one('load', function() { appendImage(img, num); }).each(function(){
            		// IE browser : in case it's already cached
            		if(this.complete) jQuery(this).trigger('load');
    	// append image to obj
    	function appendImage(img, num){
    	     // Hide them first, Cycle plugin will show them
             jQuery( img ).hide();
             // Add the image now and resize after loaded
    		 jQuery( obj ).append( imageResize(img, s.width , s.height) );
             // start slideshow with third image, load next image if not
    		 if (num == 50 || stackLength == 0 ) {
    		 } else {
    		 	loadImage(++num); // increase index and load next image
  22. Michael
    Posted 2 years ago #

    Hi barnadave,
    actually the script should work for infinite pictures without any additional modifications. I have tested my mod on my demo page, and on a commercial webpage, each with a lot of pictures without any problems.

    Afaik you have changed the number of pictures which will be preloaded by the script. That could affect the performance negatively.

  23. barnadave
    Posted 2 years ago #

    Hi Michael,

    I tried it again without the modification.
    I am working on a site which needs the captions.

    This is one of the galleries. Although those are not the final captions, all of them have something underneath. The fourth pic for example says "Tree", but is a no-show.

    I noticed that my modification works, but makes the script loading all the pictures, which makes it too slow for the visitor.

    Thank you for your help.

  24. barnadave
    Posted 2 years ago #

    Also noticed that your last posted updates are not there anymore.

  25. Michael
    Posted 2 years ago #

    Thats the point. You're using an old version of my modification. Please use > this link - click me <

  26. aundc
    Posted 2 years ago #

    since i use the modification i believe to notice a before not given conflict with another since well coexisting plugin named "random image widget"' and its functionality.
    this formerly did link from the given random image to its specific image attachment-page - now it alternatively does link only to the picture or refers the homepage url & does refresh the page itself + renews the thumb.
    ok, ok - i shouldn't could get all of that i want ... ;-)

  27. barnadave
    Posted 2 years ago #

    Got it working now with 1.9.6.

    Another problem:

    [js-slideshow] is fine when using JS slide show.
    The thing is, that the JS show is for devices that don't support Flash, For other systems I'd use the Flash based slide show because of it's full screen ability...
    Though it seems that when "Integrate the flash based slideshow for all flash supported devices" is checked, js-slideshow shortcode does not work.

    Is there a way to get around this?

  28. Michael
    Posted 2 years ago #

    Do you have tested the "random image widget" without my modification? Maybe nextgen itself is not fully compatible with this plugin. My mod should not affect the "ngg-core"-compatibility to other plugins.

    generally the js-slideshow modification is for users (like me) which want to have a js-only-slideshow.

    do you have tested this without my modification?

    I'm currently very busy, otherwise I'd check it out myself. Please understand that I can not guarantee you support due to my little leisure time.

  29. normda
    Posted 2 years ago #

    Try teh ScrollGallery plugin. It add functionality to the NextGen slideshow and captions!!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

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

About this Topic