[Plugin: NextGEN Gallery] How to make a random slideshow in the widget

  • For one of the webpages I needed to have a nice gallery and I found NextGen Gallery, which works excellent. However, the slideshow widget has some limitations, i.e. cannot do random picture selection, which I wanted to use. I found a solution in the form of JJ NextGen JQuery Cycle, but there was some trouble with picture resizing: either it cut half of the picture or distorted it. With a bit of “hacking” though, okay, let’s say adjusting ?? it works perfectly.
    Here is what you need to do:

    1. Download and activate NextGEN Gallery and JJ NextGen JQuery Cycle. Create album, upload pictures etc.
    2. Under widgets enable the JJ NextGen JQuery Cycle widget. Select the gallery you want to use, random order (and shuffle if you want).
    3. Leave the height and width boxes blank, we set this in the css file rather. So the picture doesn’t get distorted.
    4. Click on Cycle Lite Settings and at th fit select false and click on Save.
    5. Edit your style.css file (Do it in a child theme if you want to keep the settings after an update. More on this here.) Add the following lines at the end:

      6. #cycle_lite_container {
      height: 200px !important;
      }
      #cycle_lite img {
      border: 1px solid #fff; /* if you want a border around the pics */
      max-height: 200px; /* if bottom border is cut, set this to x-(2*border width) */
      max-width: 200px;
      }

    6. Edit wp-content\plugins\jj-nextgen-jquery-cycle\script\jquery.cycle.lite.1.0.min.js file. Modify near the end of it to this: (Changes the height and the fit.)

      7. D.fn.jjcycle.defaults={
      timeout:4000,
      speed:1000,
      next:null,
      prev:null,
      before:null,
      after:null,
      height:”210″,
      sync:1,
      fit:1,
      pause:0,
      delay:0,
      slideExpr:null
      }

    This should give you a slideshow with pictures within a 200 x 200 px box properly scaled.

Viewing 15 replies - 1 through 15 (of 22 total)

  • can i see an example of this?

    Thread Starter Andras Guseo

    (@aguseo)

    Sure. Go to https://www.johnylance.com and check in the footer of the page. (Under the title that says ” Random képek a galériából”. It’s a Hungarian site.)

    How do you thinks is this an workaround of my problem?

    Thread Starter Andras Guseo

    (@aguseo)

    With IE 7/8/9/ when i’m using fixed width but not use height (to see images in right dimensions) i see pictures with my width and 1px height. In FF I see properly sized images with dynamic height.

    Do you want to see static pictures in the sidebar? If yes, then you might want to search for a plugin which does that.

    If you want a slideshow with having a fixed width, then you might not need to go though all the above. You can try this:

    • In the css file at #cycle_lite img set only width: 200px or whatever width you want. (You can try to add height: auto; to it, I dunno if it helps.)
    • Don’t modify the .js file at all b/c your pics will have varying height and might be higher than 200px.

    This is just an idea, I didn’t try it myself. Let me know if it worked out for you.

    Ok, I’ll try and post my results here.

    Btw, I don’t need slideshow, I only want some random pictures in the witdget that display random photos. But as I have so much troubles with static (but random) images in IE – i’ll try your slideshow…

    If you think I can realise

    Thanks a lot

    Yeah, it works!

    But images are not clickable ??
    1. Is there a way to make them load in the fancybox window when I click them(I use this plugin to display pictures in modal window) and name them by the name of the gallery?

    2. Is it possible to somehow link images to the pages to comment them? I know that thos feature needed by many people – and here are only two of them ??

    Thread Starter Andras Guseo

    (@aguseo)

    If you want them to appear in a fancybox or something, then try using the simple NextGEN widget. (Not the NextGEN Slideshow or Media RSS widget but the 3rd one.)
    You can set how many pictures you want, what should be the height and width and so on. (I tried now, I set the width to 200 and left height blank. Works like a charm.) And if you click on the picture then it will come up in a fancybox or something like that.

    I don’t know how to link images to pages to comment them, unfortunately.

    and this slideshow using original images, not thumbs… So the size of this slideshow would be a big surprise for some EDGE/GPRS users ?? Can you fix it?

    If you want them to appear in a fancybox or something, then try using the simple NextGEN widget. (Not the NextGEN Slideshow or Media RSS widget but the 3rd one.)

    Can you give me a link of this plugin?

    (I tried now, I set the width to 200 and left height blank. Works like a charm.)

    Did you check that in IE ? If yes – please give me this awesome link!!! ??

    Justin

    (@justin-dubyah)

    LOVE THIS! Right out of the box it does exactly what I need. Many thanks!!

    Thread Starter Andras Guseo

    (@aguseo)

    Glad it’s of use! ??

    aguseo, so will you give me a link to the 3rd party widget?

    Thread Starter Andras Guseo

    (@aguseo)

    Ermmm…. there is no 3rd party widget.
    If you install NextGEN Gallery you will get three widgets with it:

    1. NextGEN Media RSS
    2. NextGEN Slideshow
    3. NextGEN Widget: this is the one I mentioned above. On the fancybox or whatever it’s called: I just used whatever was included in the plugin.

    If you install JJ NextGen JQuery Cycle, then you get an extra widget with the same name. This is the one I use on https://www.johnylance.com with the modifications indicated in the very first post.

    Hope this clarifies. Let me know if it’s not clear.

    Oh, ok! I thought that you mean 3rd party widget.

    So you test NextGEN Widget and it shows images in IE (this is very important, not FF or something else) correctly if you choose to display them in fixed width but with random height?
    If yes, please give me a screenshot or something how you made that, because in my blog with this widget I see only 1px height images ??

    Thread Starter Andras Guseo

    (@aguseo)

    Ok, it’s fairly simple. Here is what you need to do:

    1. In the widget set the width and height to zero.
    2. Add the following to your css file:

      .ngg-widget img {
      width: 200px !important;
      height: auto !important;
      }

      You can set the width to whatever you need. These lines will overrule the zeros you set in the widget.

    Here are two printscreens:
    Printscreen from widget settings
    Printscreen from Internet Explorer 9.0

    (You will not be able to see it live on the page as the page is one of my client’s. I just briefly enabled it until I took the printscreens.)

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Plugin: NextGEN Gallery] How to make a random slideshow in the widget’ is closed to new replies.