After looking into tons of solutions for a WordPress photo slideshow, most of them being flash applets, I’m confident that I’ve found the very best one. And it’s not even Flash, it’s just JavaScript.
Are you familiar with the NextGEN Gallery plugin? Well, you must be, since it’s probably the most downloaded photo gallery plugin. Well, we’ve found a little addon plugin that integrates NextGEN with GalleryView, an excellent jQuery gallery plugin. What more could we want?
So, here’s how everything works. You upload and activate the NextGEN Gallery plugin, then you create a gallery and put some nice pictures there, right? Then you upload and activate the little addon plugin I mentioned earlier.
In order to output your slideshow to a post or a page, simply add a code like this
[nggallery id=1 template=galleryview images=0] |
The only minor downside is that in order to customize your slideshow you need to take a dip into the treacherous waters of coding. Inside the nggGalleryview directory you will find a view directory, and in there, you will find a file called gallery-galleryview.php
Editing the plugin
Open it and you’ll see a bit of JavaScript code with a set of configuration options for your slideshow, on line 37.
<script type="text/javascript" defer="defer"> jQuery("document").ready(function(){ jQuery('#<?php echo $gallery->anchor ?>').galleryView({ panel_width: 450, panel_height: 400, frame_width: 40, frame_height: 40, transition_interval: 0, overlay_color: '#222', overlay_text_color: 'white', caption_text_color: '#222', background_color: 'transparent', border: 'none', nav_theme: 'dark', easing: 'easeInOutQuad' }); }); </script> |
These are the default settings. You will need to modify panel_width and panel_height to have a different sized slideshow.
Now we also have to modify the css a bit. By default the images also get a css width and height.
Open up galleryview.css. On line 57 we have:
.galleryview .panel img { width: 450px; height: 400px;} |
Modify these with the same width and height as in the javascript code above. Now you can have a slideshow exactly the width you need.
This will work for most people. However there are a few bugs that need ironing out inside the original css. By default it works ok, however I want to make some slight changes.
- On line 61 inside the
galleryview.csschange from overflow hidden to visible. This will fix the last thumbnail to be 10px smaller in width then the rest of the thumbnails..strip_wrapper{ overflow:visible !important; }
- Now we need to move the right arrow over to the right 10px.
.galleryview img.nav-prev { padding-left:20px !important; }
- Finally, if you’re using the Thematic Theme Framework for Wordpress we need to add a small css fix. The problem is that both the plugin and Thematic share a common css class, named
nav-prev. Because of this your right arrow will be stretched to 50% of the post width
. This is what we need to add to the end of the plugin’s css:
.galleryview img.nav-prev { padding-left:20px !important; }
Going a bit further with our resolve.
For this plugin to be really useful we’ll probably need to be able to include it inside out theme files. By default it doesn’t have a function that will print out the gallery. To go around this we’ll use the do_shortcode() Wordpress function.
<?php echo do_shortcode("[nggallery id=1 template=galleryview images=0]"); ?> |
Our gallery demo. It’s now 600px wide and 400 tall.
Conclusions
I’ve actually searched quite a lot after an out of the box Wordpress image slideshow plugin. While GalleryView dose offer a lot, it also falls short in many areas.
- It hard to modify by non-technical users.
- There is no way to have two different sized slideshows.
- It’s recommended that the images are fixed sized when you upload them. Otherwise there is a chance they will look squashed.
On the other had, in the hands of a developer or a power user it will be able to cover a large range of problems from normal in-page slideshow to an automated slider for a site’s leaf pages.
So with this in mind I would recommend you play around with GalleryView plugin for NextGen next time you need an image slideshow!
11 Comments
Great advice. I know you guys are handy though, if the plugin is GPL, why not make these changes and add an admin page where you can make the size changes?
Just a suggestion.
I did think about that. However there are just not enough hours in the day lately.
Hi,
You might want to give a try a “NextGEN Smooth Gallery” plugin. Same as this one, with the pictures above, and smoother effets…
http://wordpress.org/extend/plugins/nextgen-smooth-gallery/
too lazy to put tags at this hour…
The only comment I have about that plugin is that it’s using mootools instead of jQuery. But other then this looks quite useful.
Hello,
>But other then this looks quite useful.
Here is a blog where I installed it:
http://tamtam.asso1901.eu/index.php/evenements/famm-2009-la-musique-de-woodstock-a-albieres/
It can be configured to take the width you want on the screen so I fixed it to fit in the body.
I’m not keen enough on tecnics to get why jQuery could be more desirable than mootools. What is so different between the 2 tecnics ?
It look really good.
As for the jQuery vs. Motools (or other libraries for that matter) is a simple matter of general adoption. I can’t and won’t learn to work with more libraries because there just isn’t the time. Also jQuery comes with Wordpress by default, thus I wouldn’t want to include another entire library just for a slideshow.
However in this case the Nextgen-Smooth-Gallery looks really promising
>It look really good.
I like the fading effects very much. I don’t know yet how newbies react when viewing it though. Will they see the side arrows for navigation, will they think about clicking in the middle for full size to display ?
There is another one like this, but which doesn’t use NextGen Gallery and needs a bit of configuration in the files:
http://smoothgallery.jondesign.net
http://smoothgallery.jondesign.net/whats-new/changelog/
I didn’t choose this one because I’m too used to NextGen Gallery, and have some galleries and so on allready running. More over, if I can go without configuring text files I’m better off (for the time it takes for learning… same as for you, matter of time).
I thought you might want to know about this one too, as it’s also a nice gpl’ed tool that can be easy to use one day, when Christian Schenk will have programmed and easy to use gui to configure his tool.
I don’t know if that will make it more desirable to you… it’s also using mootools, with seemingly some sort of interface to jQuery:
**************
v1.2
(…)
* Made a version compatible with name-spaced mootools (to be used with prototype, jquery or others)
**************
Regards,
Mélodie
Very nice find indeed !!! Thanks.
GalleryView is just great and exactly what I was looking for.
Before, I was using the NextGen Smooth Gallery too, but that plug-in brought many problems with other jQuery based plug-ins (like Smooth Gallery, Sliding Panel or FancyBox), even using the iFrame method. It is also worth mentioning that the NextGen Smooth Gallery plug-in uses deprecated statements and gives errors in IE, at least in its current incarnation until is updated.
Now, with GalleryView, all is jQuery, pages load faster and everything works flawlessly.
jQuery vs. Mootools:
Mootools is great, but I think that it is unnecessary to use 2 different JavaScript Frameworks, they are usually incompatible and having 2 or more loading in a page creates overhead. My recommendation is to choose one Framework and stick with it, also check what plug-ins you are installing. As mentioned before, Wordpress already uses jQuery, so it is hard for me to use another one.
Thanks again.
Cheers.
Hi, it doesn’t works for me.
I did everything right but when I put the code an empty page appears there.
Look this:
http://www.corridadeformula1.com/test-page/
Any ideia, please.
It looks fine to me…
Yes, it was solved now.
Another plugin was causing this bug. So, I turned off him.
Thanks!