Wordpress Plugin Nextgen ScrollGallery

Now it’s possible to use the awesome ScrollGallery as a Plugin for the WordPress NextGEN Gallery.

Download as WordPress Plugin.

In order to use this Plugin on your blog, you need use the very cool WordPress gallery manager NextGen Gallery.

Installation

1. Download, upload, install & activate the NextGen-Gallery plugin
2. Download, upload, install & activate this plugin
3. Add a NextGen Gallery and upload some images (the main gallery folder must have write permission)
4. Go to your post/page an enter the tag [scrollGallery id=xxx] you have to replace xxx with your Gallery Id.

That’s it … Have fun

Demo

  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • NextGen scrollGallery2 thumbnail
  • Knock, knock, is anyone there?
  • Mootools?
  • A really big nose...
  • Say hello to paul.
  • Please do not watering...
  • When I grow up, I'm a captain.
  • Where are the ghosts?
  • paradise
  • flowers
  • more flowers
  • flowers again?
  • a flower
  • a beer
  • see you again

Caption Demo
Demo with auto scroll
Thumbs down
Diashow
Solo thumbs
Solo images
Thumbs lightbox combination

Pro Version (Usable for webdeveloper, if you’re familiar with CSS and WordPress Themes)

Options

In the admin interface you can set global options for all your galleries.

Admin interface

Options can be overridden in the post/page tag.

  • start: (number) start at picture number … the first picture is number 0
  • area: (number) width of the area to scroll left or right
  • thumbarea: (string) div class name for the thumbs
  • imagearea: (string) div class name for the images
  • speed: (number) 0
  • clickable: (boolean) images can be clicked
  • autoScroll: (boolean) autoscroll thumbs
  • enableSwipeMode: (boolean) enable Swipe-Mode on touchable devices
  • useCaptions: (boolean) use captions or not
  • thumbsdown: (boolean) set the thumbs under the images
  • diashow: (boolean) activates the diashow option
  • diashowDelay: (number) delay in seconds, must be more than 1 second
  • thumbOpacity: (number) optional opacity level for the tumbs in percent, default is 100
  • width: (number) gallery width
  • height: (number) gallery height
  • adjustImagesize: (boolean) if false it will strech the images

Example:

[scrollGallery id=1 start=4 autoScroll=false]

Shortcode options:

If you want to hide the images or the thumbnails use

  • [sG_thumbsSolo id=...] to show only the thumbarea
  • [sG_imagesSolo id=...] to show only the imagearea

instead of [scrollGallery id=...]

If you want to set links (<a href=”…”>) to thumbnails and images, go into your NextGen Gallery admin interface and klick on → Manage Gallery. Here you can set links by editing your image descriptions (not the Gallery description!). If you write: [scrollGallery thumblink="http://www.bmo-design.de" thumblink_target="_blank"] in the description field of one of your images, you will set an external link to my page, which will open in a new window (target=”_blank”). Also you can set image links and image targets. Here’s an example with all the possibilities: [scrollGallery imglink="http://www.bmo-design.de" thumblink="http://software.bmo-design.de" imglink_target="_self" thumblink_target="_blank"].

Develop a gallery theme

You can develop an own gallery design and change the style, borders and colors.
Go into the plugin-folder “nextgen-scrollGallery”, then “scrollGallery” and there you will find a folder “css” with my “scrollGallery_greyDesign.css”. In this folder you can add custom css stylesheets. I recommend to backup your “scrollGallery_customDesign.css” in your theme folder or local. Because if you make a update of the plugin, the “css” folder will be replaced. After you save a custom css in this “css” folder, it will be possible to change the style of the gallery in the admin interface.

Your css must have the following structure:

/*
CSS Name: The name of your CSS
Description: A description
Author: Your Name
Version: 1.0
ImgMargins: 0px 0px 0px 0px;
*/

/* ———– Your Styles ————-*/
.scrollgallery .scrollGalleryHead{
}
.scrollgallery .scrollGalleryFoot{
}
.scrollgallery .thumbarea{
}
.scrollgallery .thumbareaContent img{
}
.scrollgallery .imagearea{
}
.scrollgallery .imageareaContent img{
}

I have to explain the line “ImgMargins”. If you want to use margin inside “.scrollgallery .imageareaContent img{}”, you have to use the “ImgMargins”-comment. My plugin have to generate margins and therefore I need the margin values outside the css. So please use the “ImgMargins” line.

If you are a great stylesheet-designer, please send me your custom gallery css!

Version Notes

  • In version 1.4.1 it now works with images in landscape and portrait mode. It is not necessary to convert the image to a landscape image anymore!
  • The dimensions of thumbnails and images can be changed in your NextGEN Gallery plugin.
  • Since version 1.5 the do_shortcode() wordpress function is supported. You can use the gallery in the content with [scrollGallery id=1] and now also in the template with
    <?php echo do_shortcode('[scrollGallery id=1]'); ?>.
  • Please don’t use the same gallery id twice on one page.
  • Since version 1.6 you can use [sG_thumbsSolo id=xxx] and [sG_imagesSolo id=xxx] instead of [scrollGallery id=xxx] to show only thumbs or images.
  • Since version 1.7 it is possible to set links (<a href=”…”>) direktly to thumbnails and images. To set a link, go into your NextGen Gallery → Manage Gallery and edit the image descriptions (not the Gallery description).
    If you write: [scrollGallery thumblink="http://www.bmo-design.de" thumblink_target="_blank"] you will set an external link to my page, which will open in a new window (target=”_blank”).
    Also you can set image links and image targets. Here’s an example with all the possibilities: [scrollGallery imglink="http://www.bmo-design.de" thumblink="http://software.bmo-design.de" imglink_target="_self" thumblink_target="_blank"].
  • Since version 1.8 you can use the swipe mode. On iPhone, iPad, iPod Touch and some Android devices you can touch and swipe through the images. Try it, it’s awesome.

Hall of Fame

If you want to see how others use my plugin, you can visit the hall of fame:
Hall of Fame
You can also post your integration there.

More Information

If you speak German, you will find a good guide in this book. (WordPress 3, Alexander Hetzel, November 2011, p.535)

Support

For more information you can browse the forum.

If you need further support you can commission me at BMo-Design. My  hourly rate depends on the problem and is between 70 and 35 € p. h.

I know, that there are some problems with other plugins and themes. Please use the forum to submit them. If you want to use the wordpress sliding door theme, write me a mail I have developed an update.

Are you interested in more features?

Check this out: http://scrollgallery2.mashitup.de/ I working on version 2.0.0…

Read more about version 2.

 

71 Comments » for WP NextGen Scroll Gallery
  1. lichthexe says:

    I am working on my new WordPress-Homepage using the NextGen-Gallery-tool. Your ScrollGallery is exactly what I was looking for. Thanks a lot for this easy-to-use, pretty tool!

  2. Tyler says:

    Thanks for all the wonderful info!

    Is there a way to override the gallery design in the post/page tag? (ie: use different gallery design plugins on different pages)

    I tried different versions of [scrollGallery id=1 Gallerydesign=Noextradesign]

    If I’m missing an easy solution, my apologies.

    Tyler

    • admin says:

      Hi, sorry. You can’t change the design with an parameter. If you want realize that option, you have to dynamically insert the css in the html head.
      But you can use the css class name option “.thumbarea” and “.imagearea” to setup individual designs in your theme css.

  3. admin says:

    Many people ask me how to use the gallery together with lightbox, as http://www.galleriadelprete.com/daniel-jensen has done here.
    It’s easy.
    1. Run my gallery with [sG_thumbsSolo id=xxx].
    2. Download slimbox.js at http://www.digitalia.be/software/slimbox and integrate the slimbox.js into your themes head.

  4. admin says:

    Thank you Dan for your donation. I wish you and http://bottlereport.com all the best.

  5. free php scripts says:

    Great plugin I love this thanks for sharing….

  6. admin says:

    Thank you Nico from tuhoy.com for your beer donation! It’s important to support open source development!

  7. Gary says:

    Great plugin! Is there an easy way (maybe thru customizing the css) to have the thumbnails show vertically along the right side of the image, instead of at the top or bottom? Any help would be appreciated.

    Thanks,
    Gary

    • admin says:

      Yes, of course if you are a css js freak like me ;) Actually I not implemented an easy option to do that.

  8. rachael butts says:

    Hi there-

    The plugin works great!
    I was wondering if there is anyway to have arrows or navigation on the pics so a user knows to click through the images?

    Thanks!
    Rachael

  9. chris yahnke says:

    does this plug in work with albums?

  10. Waheed Mughal says:

    Thanx Alot Dear Nice Plugins

  11. Nicolas says:

    Hi Benedikt,

    I really like your plugin and I use it on some of my sites. I have an idea of customization but unfortunately I’m not a programmer.

    Maybe it can be integrated on your next update.

    I like very much the fact that when you click on one thumbnail, the picture get loaded in the big frame in the same page. There is no pop up or reloading, or new page …

    Here is the idea: I’d like to change the scroll bar and display all the thumbnails instead. So you will have the big frame and all the thumbs under (or over) it and if you click one of the thumb, the big picture change.
    Basically your plugin but instead of the scrolling bar, a thumbnail gallery looking more like the default wordpress gallery.

    Let me know what you think about this idea (email me), maybe you can even develop this especially for me.

    Thanks and regards!

    • admin says:

      You only have to set:
      .scrollgallery .thumbareaContent {
      white-space: normal;
      }
      Best regards.

More aboute me
Give me a +


donate my work ♥ → paypal