[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 7 replies - 16 through 22 (of 22 total)

  • Thanks you a lot but when I set this code im my style.css in the theme directory and set to blank or 0px width and height in the widget I have 0px x 0px images ??
    Image1
    Image2
    May be I’m unlucky? ??

    I’m using WP 3.1.2 and NGG 1.8.3

    Thread Starter Andras Guseo

    (@aguseo)

    Nope, not unlucky, just needs a bit of fine tuning. ??
    I’m using the same versions…

    I looked at your code and I found some interesting things. ??
    Looking at your Image1: you are using another (extra) plugin which is called NextGEN Gallery Sidebar Widget. You are using this widget in the sidebar and this has different styling names. Since I’m not using this, my codes above don’t work for this.
    However, here’s a fix you can try, namely instead of .ngg-widget img { use .ngg-sidebar-widget img {.

    Or the other solution is that you delete / disable / don’t use this NextGEN Gallery Sidebar Widget, but rather the one that is included in the basic NextGEN Gallery package simply called NextGEN Widget. The code originally posted refers to that.

    See this image.

    Hope this helps!

    Don’t forget, that if you want to keep the width fixed and want the height to vary so that your pictures are not distorted, then use height: auto !important;.

    Sorry! I’ve completly forgot to use back included in NGG widget, so your hack to the css wasn’t working!

    Now all is working fine and as I wanted so long!

    Thanks a lot and good luck ??

    Thread Starter Andras Guseo

    (@aguseo)

    Glad I could help! ??
    Good luck to you too!

    aguseo, please mail me to the baf _ bafff.ru

    Simple (and probably dirty) solution for making images clickable.

    If you have one page displaying all galleries as single album like:
    /?page_id=481&gallery=6
    then you can modify file jj_ngg_jquery_cycle.php adding just before following code

    if($use_url != '')
{
   $output .= "<a href=\"" . esc_attr($image_alt) . "\">";
}

    extra code:

    if($use_url =='')
{
	$use_url=true;
	$image_alt="/?page_id=481&gallery=" . $result->galleryid ;
}

    Result should be:

    if($use_url =='')
{
	$use_url=true;
	$image_alt="/?page_id=481&gallery=" . $result->galleryid ;
}

if($use_url != '')
{
	$output .= "<a href=\"" . esc_attr($image_alt) . "\">";
}

    @aguseo

    Thank you very much to talk about “JJ NextGen JQuery Cycle” !

    I was searching a solution to show images in random with nextgen.

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