WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] How to make a random slideshow in the widget (23 posts)

  1. aguseo
    Member
    Posted 2 years ago #

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

    7. 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.)
    8. 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.

  2. Bafff.ru
    Member
    Posted 2 years ago #

    can i see an example of this?

  3. aguseo
    Member
    Posted 2 years ago #

    Sure. Go to http://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.)

  4. Bafff.ru
    Member
    Posted 2 years ago #

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

  5. aguseo
    Member
    Posted 2 years ago #

    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.

  6. Bafff.ru
    Member
    Posted 2 years ago #

    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

  7. Bafff.ru
    Member
    Posted 2 years ago #

    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 :)

  8. aguseo
    Member
    Posted 2 years ago #

    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.

  9. Bafff.ru
    Member
    Posted 2 years ago #

    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?

  10. Bafff.ru
    Member
    Posted 2 years ago #

    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!!! :)

  11. Justin
    Member
    Posted 2 years ago #

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

  12. aguseo
    Member
    Posted 2 years ago #

    Glad it's of use! :-)

  13. Bafff.ru
    Member
    Posted 2 years ago #

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

  14. aguseo
    Member
    Posted 2 years ago #

    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 http://www.johnylance.com with the modifications indicated in the very first post.

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

  15. Bafff.ru
    Member
    Posted 2 years ago #

    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 :(

  16. aguseo
    Member
    Posted 2 years ago #

    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.)

  17. Bafff.ru
    Member
    Posted 2 years ago #

    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

  18. aguseo
    Member
    Posted 2 years ago #

    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;.

  19. Bafff.ru
    Member
    Posted 2 years ago #

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

  20. aguseo
    Member
    Posted 2 years ago #

    Glad I could help! :-)
    Good luck to you too!

  21. Bafff.ru
    Member
    Posted 2 years ago #

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

  22. ohumi
    Member
    Posted 2 years ago #

    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) . "\">";
    }
  23. Vinyl Roads
    Member
    Posted 2 years ago #

    @aguseo

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

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic