Now it’s possible to use the awesome ScrollGallery as a Plugin for the WordPress NextGEN Gallery.
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
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.
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]
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.
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!
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.
Hi admin,
I am having trouble locating where to change the color of the description text/box in the css. Currently it is set to white along with the description box so it looks like there is no description. Can you offer any help? Thanks in advance.
Sorry to bother, I’ve figured it out. the file path was wp-content/plugins/nextgen-scrollgallery/scrollGallery/css/scrollGallery.css —Thanks for the nice plugin.
Hello, I just upgrade ScrollGallery to 1.7.1 and now the galleries aren’t showing up correctly on my blog. Now in the thumbnail strip at the top it will only show the image that is currently showing in the large area. Here’s an example: http://theboghs.com/school/?p=831 . It worked perfectly before the upgrade. Any ideas? I’m using the most currently version of WP.
I love this plugin and have started using it to display all of my galleries on my blog. Thank you!
Elizabeth
Hello Elizabeth,
thanks. I visit your page and the problem is, that at your page the opacity is set to 0 or 1. Go to the scrollGallery admin page and set the opacity to 100.
Best regards
I’ve develop my custom style with your plugin
Thank you very much for your help and for this fabulous plugin !
I just wanted to say thank you. I wanted to see a demo of this plugin and i Found it hear it made my webpage nicer in displaying some of my pictures.
Is it possible to add the Gallery ID dynamically to page through custom fields?
I’d like to add a custom field e.g ‘scroll_gallery’ and then simply insert the ‘ID’ as a value.
I’ve tried to echo the ID into the [scrollGallery id=XXX] tag but it didn’t work. Any suggestions?
Many thanks! – Awesome tool by the way.
Of course, you need to use the php shortcode: <?php echo do_shortcode(‘[scrollGallery id=...]‘); ?> and you have to write a page template.
Awesome plugin for awesome gallery, is there a way to have the scrolling thumbs and when you click a thumb it opens up like nextgen with the pic lens shading out the screen and centering the pic?
I like this so far. Is there any way to have the main image automatically advance like a slide show?
Hi Tom. No, not currently.
Anybody knows how to make the gallery sit on the right top side of a post and allow text to run down aside it – I can only make it do like this:
http://riyadelcadi.photogear.dk/2011/09/korean-room/
I am probably just stupid, but then again I am also Danish:-)
Kind regards
Michael
you have to change your theme css. You can edit it in wordpress -> design -> editor.
Try to insert:
.scrollgallery{
float:right !important;
}
But be careful with editing your theme css
Thanks for your fast answering. I changed the CSS theme and it is right now. Thanks for this powerful plugin which meet my needs.
I have a last question :AS the title is displayed : How to display the image description below thumbnails ? if this instruction could be given in the scroll Gallery that would be great !
Kinds regards from France !
Hi, thanks. You can change this in the php file line 191.
set $aux["title"] = $picture->alttext; to $picture->description; or $picture->title;
Which php file must be changed for this?
Great plugin!
Hello Melissa,
you can find the plugin file: nggScrollGallery.php in the plugin directory / nextgen-scrollgallery / .
I have installed this Scroll Gallery and quite every think looks fine.
1°) As the image size is fixed as Width = 972 height = 648 the slide is not centered going totally on the right border and not tottaly visible without scrolling. Do you have a code for fixing this problem ?
2°) Publishing directly thumbnails with nextgen gallery it is possible to filter using this code where the tag is the criteria :
[nggtags gallery=concarneau imagebrowser id=5] is it to place a similar selection using scroll Gallery ?
Anyway I am impressed by this powerful add on : You did a great job !
Hi Sergio, thanls!
1. Hm, I think the reason is your theme css. Probably the width is limited by the theme.
2. Yes, actually tags are not supported.
i have just simply added the plugin but now when i click on the thumbnails bar at the top the image does not change and also the autoscroll is also not working . i have re-installed the plugin but the problem remains the same
Hi Tarun, your problem sounds like a javascript problem. Deactivate all your other plugins and check it again. If the problem disappears, a other not well programmed plugin is the reason.
Use step by step reactivation of plugins to detect the evil.
Greetings BMo
Hi. Just downloaded & installed it earlier tonight. So far, it works really well. Thanks.
Please ignore my initial comment
I found a link in the header that wasn’t properly closed. I’ll post a link to the page as soon as its alive. Thank you!
Admin,
Love the potential of the plugin, however I’m having a strange issue. . . if I insert the shortcode ( [scrollGallery id=xxx] )in a “post” all works great… However if I use the same shortcode on a “page” then it everything I click on has the following link associated with it “http://localhost/?page_id=50″. I’ve dug and dug and just don’t see why this might be occurring. . . But if you could give me any input I’d certainly appreciate it.
Brandon
(Currently implemented on a localhost, but I’ll shoot you a link as soon as it goes live)
Hi.
I just started using this plugin yesterday and I am really psyched with how it is working. HOWEVER, when I view my site with FireFox, one of the galleries totally malfunctions, positioning the images way over to the right, nearly off the site page. (I have 7 galleries altogether on my site and the other ones diaply fine.) I have tried deleting and reloading the gallery (all images), as well as making a whole new page and inserting the shortcode there. View the page (http://catherinegregoryinteriors.com/portfolio/dining-2/) in FireFox with Firebug and when you click on the thumbnail you will see where it is trying to display the image.
Any ideas you have on why this is happening will be greatly appreciated. Thanks.
Love this plugin works great, im using the thumbs only for my main home page and would like to set the links from the pics to all go to one gallery page with the full thumbs and image version of this. any help would be appreciated
Thank you, the link is: http://hangingvalley.blueskycolorado.net/ My gallery is only on the home page.
Hello, I’ve installed this plugin, it’s exactly what I need, but in adding the basic shortcode for the gallery (with thumbsdown checked), the thumbnails appear in a vertical column underneath the large photo, NOT in a horizontal row underneath it. Can someone suggest what i’ve done wrong? It does the same thing even if I check for the thumbs to appear on top…they are in a column, not a row.
please send me a link. I think something is wrong with you CSS or JS.
Hi !
.
First of all thanks for your work it’s working like a charm
I’ve a suggestion for the next version. Could you add the “effects” ( see on nextgen gallery options => Effects ) to support lightbox, thickbox, shutter … ?
I’ve done it by editing your code for one of our customers ( mail me if you want to see the page ) and I think it’s a good idea to display the images on real size if needed !
Greetings for France !
Thanks! Is in progress… (Yes and please show me your page
)
Are you creating a new sub folder for each separate gallery? Where exactly should i be creating these folders for the gallery?
Hi Virag,
the NextGen Gallery Plugin manages the image upload and storage. In your admin interface, go to the NextGen Gallery menu and upload your pictures. Recognize the gallery id and insert a scroll gallery shortcode with that id in your post or page. That’s it.
I love this – thanks. One small problem, I keep getting an error (using Chrome) saying”Error: The number of images does not match!” when I play around with the width and height and area I can get rid of it sometimes, but not always. I saw someone else had this problem a few days ago. Any help appreciated.
Cheers,
Dan
If I should help you, please send me a link.
To prevent that errors, I changed the “alert()” in an firebug “console.error()”.
It would be nice if we could choose to move between the images by clicking on their sides.. like I click on the left it shows me the previous image, and if I click on the right of the slideshow, it will move to the next one or to the beginning.
Wouldn’t that be cool?
Hi Alessandro—
Did you ever figure out a way to do this?
I love this plugin. I have multiple scrollgallerys on my site but some are autoscrolling and some show the scroll bar beneath the thumbnails (top or bottom).
This only seems to happen on Chrome, not Firefox
In the new version 1.3 how can I resize the thumbnail?. I like 120×80. Thank you.
In the nextgen gallery plugin.
I have another problem. If I configure the thumbnail 120 x 80 the images are deformed. If I configure 100 x 100 the image is OK. Why?. Thank you.
The new version 1.3 fix some of your bugs
The problem appears when “autoScroll: (boolean) autoscroll thumbs” and “thumbsdown: (boolean) set the thumbs under the images” are activate. I resolved the problem desactivated the 2 options.
I installed it but the problem is the thumbnails is duplicated. This is my page http://www.yeguadaaquilinomoya.com/?page_id=648. What’s the problem?. Thank you.
Hi, your plugin seems to have potential, but, when I try to use it, I get the following error on the page: “Error: The number of images does not match.” Do you know what’s going on?
Thanks
I think you have a problem with your thumbnails. This JS error occurs if you have a different number of images and thumbnails…
Hi, just have installed the plugin for WP. Saw your examples and liked it very much. But encountered a problem. I have to set a number of width and height of images, but how to do it right? if i have vertical and horizontal images. My vertical images just stretch. May be those who use this plugin can answer, i saw in examples (food website) you handled it.
thanks.
Hi guiri, you first need the NextGEN Gallery Plugin.
2. Make there a gallery
3. Write in your post or artikle [scrollGallery=id:1] if your first gallery id is the 1.
where do i upload each photo gallery folder on my ftp? how do i get the gallery name to [u on the tag?
Thanks very much for the reply! I was able to change the colors and I love the effect. You can see it on my (work in progress) website here:
http://www.elizabethlabau.com/food-photography
One thing I did have trouble with was getting it to start at the first picture. Even when I changed the start value to 0, it would still skip ahead and start on the second picture. I don’t know if this is a bug or possibly just a weird interaction with my theme. I was able to get around it by changing the start value to 23 (I have 23 pictures total in the set) and that worked–it now starts at the first picture. Just a note in case anyone else has the same trouble!
Very nice! Delicious food
I found the start at image 0 problem and fixed it in version 1.2. Thanks for this nice integration example.
I love this gallery! It’s my favorite NextGen plugin I’ve seen so far. The only problem is, the dark gray background/borders don’t really go with my website design. Is it possible to change the background color? I can poke around a little bit in HTML if I know where to look.
Hi liz,
Of course you can! Go into the plugin-folder “nextgen-scrollGallery” there you will find a folder “css” with the scrollGallery.css. Here you find colors and borders.
thanks!
But I recommend to override this css classes in your theme css. Because if you make a update of the plugin, the scrollGallery.css will be replaced.
In a month or so, it will also be possible to change the style of the gallery in the admin interface, but therefore I need some more time…
Greetings from Germany BMo
Hi,
thanks for the gallerie enhancement – looks cool.
The only trouble is that I cannot use captions. About one half of a caption text is not visible.
IE 8,wp3.1.1, only NextGen and yours. Works quite well even if the image size is not always the same.
Cheers
Vaclav