To download WordCycle, visit the WordPress.org plugin page. For support, please use the comments on this page. Someone may have already asked your question!
WordCycle is a wrapper for the jQuery Cycle Plugin. After installing WordCycle, you can use the slideshow shortcode to insert a Cycle slideshow into your WordPress post or page, no JavaScript necessary!
Options
The shortcode added by WordCycle takes a number of options that determine the content and behavior of the slideshow.
orderby |
slide order by: menu_order ID (default), see list in codex: http://codex.wordpress.org/Template_Tags/get_posts |
order |
slide order: ASC (default), DESC, RAND |
id |
post id: #, current (default) |
link |
image link: file, attachment |
size |
image size: thumbnail, small, medium (default), large, full-size |
include |
include images by attachment ID, see codex for examples http://codex.wordpress.org/Gallery_Shortcode |
exclude |
exclude images by attachment ID |
float |
slideshow position: left, right, none (default) |
speed |
effect speed: slow (default), normal, fast |
fx |
slideshow effect (view the jQuery Cycle Plugin Effects Browser for a complete list) |
timeout |
time on each slide: miliseconds: 8000 (default) |
pause |
pause on mouse-over: 0 (default) or 1 |
next |
selector of element to use as click trigger for next slide : null (default) or DOM element ID |
prev |
selector of element to use as click trigger for previous slide : null (default) or DOM element ID |
Usage & Examples
Uploaded images are called attachments in the WordPresss database. If WordCycle is installed, you can use the [slideshow] shortcode to create a slideshow of all the attachments associated with a post.
The slideshow advances automatically and is minimally styled. The slideshow uses the Link, Title, and Caption attributes of the WordPress Image Uploader/Gallery, as well as the gallery sorting options.
To add the slideshow to a post, insert this code: [slideshow]
View examples:
- slideshow with click to advance
- slideshow with full-size images and fast transitions
- slideshow with images that link to image file
- slideshow with next & prev links
- slideshow with next & prev links, no auto-advance
- slideshow with pause on mouse-over, quick auto-advance
- slideshow with thumbnail-size images and “toss” transition
FAQ
How do you add a slideshow to a post or page?
Install WordCycle. Upload images to the page using the WordPress Media Uploader. Add the [slideshow] shortcode to your post.
How do you change the way the slideshow looks?
The WordCycle slideshow is very sparingly styled. To add a border, alter the typography of the captions, or spruce of your slideshow, you’ll need to edit your theme’s stylehseet. See the diagram below for an explanation of the classes used by the WordCycle plugin:
The <a> is only present if you use the link option, while the caption is only present if you provide captions for your images using the WordPress Media Uploader.
The plugin comes with the following styles, which you can override in your theme’s stylesheet:
.wordcycle { margin:0 0 22px 0; }
.cycle-item { margin:0 22px; }
.cycle-item img { border: solid 8px #EFEFEF; margin:0 0 9px 0;}
.cycle-caption { font-size:80%; background:#EFEFEF;}
How do you add captions to a slideshow?
After uploading your images, use the WordPress Gallery “caption” field (also used as alt text for the image).
How do you add “next” and “previous” buttons to a slideshow?
The “next” and “previous” buttons are really links. Include the links in your post, give them a class or id, and then specify that class (with a .) or id (with a #) in your shortcode using the next and prev options.
See the slideshow with next & prev links example and the slideshow with next & prev links, no auto-advance example.
How do you make a slideshow that advances when you click on the image?
To add a slideshow that advances to the next slide when the user clicks on the current image (and does not auto-advance), use these options: next='#wc-slideshow' timeout='0' to indicate that the slideshow should advance when you click on the slideshow (#wc-slideshow) and never auto-advance.
See the slideshow with click to advance example.
Version Information
0.1.6
- Added support for include and exclude based on Gallery Shortcode; suggested and implemented by Mathew Simo (@matthewsimo)
0.1.5
- Fixed bug in v0.1.4 which broke slideshows.
- Added style
.wordcycle { overflow:hidden }for improved page view before JS loads
0.1.4
- Revised implementation of
jQuery.noConflict()
0.1.3
- Abstracted creation of slideshow (
print_wordcycle()) from shortcode function (shortcode_cycle()) - Added random # to slideshow ID to allow multiple slideshows on a page
- Moved scripts and styles to
wp_footer
0.1.2
- Fixed readme.txt formatting, updated readme.txt
0.1.1
- Introduced “next” and “prev” attributes.
0.1
- WordCycle first released.
Feature Requests for Upcoming Versions
This plugin is purposefully very simple. That said, I don’t plan to ever add an admin page for settings or styles. But, there are definitely some things that could be improved! Below is a list of feature requests I’ve gotten that I’m interested in pursuing. No promises as to when they’ll be implemented, though…
- Unique IDs for slideshows, will allow for posts/pages with multiple slideshows. (added in v0.1.3)
- Dynamically add a pager to the slideshow. Pagination will not be added to WordCycle.
- Option to fadeIn the first image in the slideshow.
- WordCycle function that developers can call from a template file.
Dynamic pagination will not be added to WordCycle because this feature would interfere with the plugin’s simplicity and ease-of-use. The purpose of WordCycle is to display a slideshow of gallery images that does not require custom styles. The slideshow can easily be styled by someone with knowledge of CSS & WordPress theming, or it can be left alone. Pagination would introduce more complex CSS that could potentially interfere with a user’s WordPress theme and site layout.
Did you find this plugin useful? Consider buying me a beer!
71 Comments
I love it! It would be even better with a option to have thumbnails of the pictures in the album as navigation instead of next and previous links.
Thanks for the awesome plugin!
Glad you like the plugin. Thumbnails for navigation is a good idea. I’ll keep that in mind.
Hello Esther,
Thanks for your reaction by mail.
Despite your reaction, we tried to install WordCycle on three different WP 2.8.4 installs: one of which was a fresh install. In all three cases Wordpress stated that the header was hindering activation.
We’ll to upload WordCycle with Filezilla maybe that makes a difference.
Cheers, Friso.
Friso,
I can’t reproduce the issue on my own installs of WP (2.9-rare or 2.8.4). Can you be any more specific about the error you’re getting?
Cool !
Does it means i don’t nea to load jQuery and all on the page ? Just have to activate the plugin ?
The plugin loads jQuery using the wp_enqueue_script() function. This means that you do not need to explicitly load jQuery yourself.
Does it works too if i upload my images from FTP and not wordpress ?
The plugin will only find & display images uploaded using WordPress.
Is it possible to make the slideshow itslef FadeIn on load ?
It’s very nice to be able to fade in between images, but i think it would be even cooler if the first image can appear on the screen with a fadein effect… It’s what i was tryin to make using jQuery with no success…
What do you think ?
I’ve added a fadeIn for the first to the list of feature requests… Thanks!
Probably just me, but am I missing some special instruction to get this working on a page, instead of a post?
The examples on this site are pages — make sure that you have some photos uploaded to the post/page you are using the shortcode on.
Hi Esther, your plugin was exactly what I needed and you’re brilliant!
I thought you might be able to help me out with a problem and I’m not sure if it’s related to your plugin.
I originally setup wordpress to run from mysite.com/blog and once it was running smoothly I transferred it to the root and gave wordpress its own directory.
Now when I upload images they show in the Media Library tab, but there’s no Gallery tab at all and the
slideshowshortcode doesn’t work.Hope that makes sense, what I’m trying to explain. Since you have been using the Gallery shortcode, maybe you have any idea why now the Gallery tab doesn’t show up? It shows still on the ‘old’ posts (those added before I changed the WP directory) but I can’t figure out what’s happened…
Any insight is much appreciated! Thanks
Tiffany,
I’ve never seen anything like that happen before … with no “gallery” tab appearing in the Media Library.
I don’t think it would be related to WordCycle, but the best way to find out would be by deactivating and then uninstalling the plugin. Please report back if that solves your problem!
I would checkout the WP Support Forums or even the
#wordPressIRC channel (I’ve gotten great, real-time support there before).Hmmm, thanks for your quick response Esther. I tried deactivating and uninstalling the plugin. The Gallery tab doesn’t appear when the plugin is uninstalled, so I assume it’s a problem with the Gallery shortcode after giving wordpress it’s own directory. Ugh.
Thanks also for your support suggestions. I made a forum post and will see where that leads. All the best!
Hi Esther, great plugin!
Is it possible to call the [slideshow] tag from the template file?
This way the editor does not have to put the tag.
Thank!
Aldo
Aldo,
There isn’t a function for this yet, but I’ll add it to the feature requests list.
Esther
Hey Esther, I came across this plugin at exactly the right time. It’s working great on my Wordpress 2.8.5 install.
I was wondering how to include some sort of pagination for the images (I understand it is currently on your requested features list, but you know how impatient people on the internet generally are).
I am thinking about something like this:
1/7
IMAGE
It does not have to necessarily be in the shortcode, I am not afraid of a little hardcoding, although, admitedly, I suck at it.
Thanks again for a simple, easy and altogether great plugin!
I have decided not to add pagination to this WordCycle because it would interfere with the intention of the plugin.
I understand. i have been running it without pagination for some time now, and like it the way it is
Hey again,
I am using this plugin now on http://blog.gringoflash.com, and it is working great.
The only problem I have is that, when there are various slideshows visible on the front page, or in this case, a category archive, when I click the ‘next’ button on one of the slideshows, all the slideshows skio to the next picture. Has anyone else experienced this problem, and have they found a workaround?
Greets,
Sander
I understand why this is happening, am adding it to my list of feature requests (although it’s more of a bug fix).
The reason is this: the script that tells the slideshow to advance is attached to the slideshow’s class (.wordcycle), which is not unique.
I’m going to work on this today, hopefully have an update out soon.
Sander — try v0.1.3, which should allow multiple slideshows on a page. http://wordpress.org/extend/plugins/wordcycle/download/
Esther,
Thanks for responding to my earlier comment and again for such an awesome plugin.
I know you have decided against a pager. Do you know of any example code/snippets I could refer to in order to add the functionality in?
I don’t really need a pagination type of nav, just want to add in “1 of 3″ along side previous/next.
Thanks!
Jess,
check out this Cycle example for some JS that dynamically adds a pager: http://malsup.com/jquery/cycle/pager2.html
and this example for a slideshow that uses a pager & next/prev links: http://malsup.com/jquery/cycle/pager11.html
Thanks!!!!
Hey Esther,
Two more quick questions.. and a note
If I stick your styles into my theme css file, will they overwrite yours (contained in the plugin)?
Also, how do I add the caption to the images? I’m thinking I can use that for my (image 4 of 6)
And my note – the pause on mouseover doesn’t seem to be working in your example on the site.
Many thanks!!!
To override the styles contained in the wordcycle.css file, add a parent class to the WordCycle classes. For example, use:
.wrapper .cycle-item img { }instead of.cycle-item img { }(this works as long as your theme uses a.wrapperclass).To add a caption to your images, use the Caption fields in the WP gallery.
Thanks for the catch on my examples, I’ll check it out.
Hi Esther
The plug-in is just what I need! But I am trying it with a template that has an animation along the top (http://wordpress.org/extend/themes/sliding-door/)- mouse over the images and they slide. However installing this plug-in prevents the animation from working – any ideas why?
You’ve found a bug in WordCycle — thanks! The latest version (0.1.4) makes the WordCycle compatible with Prototype-based themes & plugins. v0.1.4 should be available on the WP Plugin repository shortly.
Hi Esther
Wow- you got back to me really quick – but it isn’t working. The new version hasn’t broken the theme animation however the gallery images are simply appearing in a list one above the other instead of fading between them – or have I forgotten to do something?
Sorry about that, the WP Repository has a lag with the downloads. Try again — the “real” v0.1.4 should be available now.
RE: Sliding Doors theme, when I tested the theme I encountered the same issue (sliding navigation didn’t work, but the slideshow did). But after replacing the version of MooTools included with the theme with the latest version (1.2.4.2) + fx the navigation & slideshow both work. This version of MooTools works side-by-side with other JS libraries (read more: http://davidwalsh.name/mootools-dollar-safe-mode) like jQuery. I would suggest posting on the Sliding Doors WP theme forums about the incompatibility.
I’m sorry I may be a little out of my depth here. I don’t have much of a clue about updating MooTools – I took a look at the link and glazed over. I did try uploading a mootols .js file I cam across but it was a totally different file from the only one I could find installed on my server and it didn’t work. I have tried jQuery directly, without using your wrapper, and it broke the sliding navigation, so that shows it is not a WordCylce issue but a jQuery issue. Any help much appreciaed though I know you are busy and this is unpaid work.
Hi,
today I updated the plugin. It worked really nica until now. the new version is not showing any slideshow.
Here is the side: http://www.hundefotografie.biz/?page_id=5
Any idea how to get the slidshow running?
Thanks
Eike
I will use the old version again
Hi Esther, Thanks for the good work.
I’ve upgraded to 2.9 as well as the plugin today but the since then its seems that the javascript is not swapping the images, instead it shows all the images one below the other. I’m not sure what the problem is and I was wondering if you can help!
Thanks in advance
It actually stopped working on your example page too. :0
I’ve updated the plugin to v0.1.5 which fixes this bug. Sorry about that! The new version should be available from the WordPress plugin repository within a few hours.
Hi Esther!
One other question. Is there a place to override/set the height & width of the slideshow? It’s defaulting to width: 716px; height: 560px;
I wasn’t sure if that was something you built in or some wordpress default.
Thanks!!
Nevermind! Got this fixed.
Hey again!
Just finishing up the final touches before launching the site and ran into a weird css issue.
On pages where the slideshow has only 1 image, the caption is jumping out of place: http://www.deebriggsstudio.com/new/work/ten-2/
But on pages where there is more that 1 image in the slideshow it lines up correctly: http://www.deebriggsstudio.com/new/work/seven/
Any thoughts?
Experiencing some really bad image flicker, I’m assuming before the JS loads. Anything I can do to remedy this?
Thanks
Try adding the following CSS:
.wordcycle {overflow:hidden;
}
This will hide content that would normally flow outside of the slideshow container.
Ahh. I had a little css quirk with that. I positioned the caption outside of the slideshow container to mimic the (1 of 4) so if I add overflow:hidden it hides that. Any thoughts on getting around this?
Also noticed a Jquery error on the slideshow..
screen cap of error
This got fixed in v 0.1.6, thanks.
Donated some beer money as well! Cheers. Your plugin is a godsend!
Hi! Love the plugin, I was wondering if you had thought about the possibility of adding the functionality to ‘exclude’ an image from the slideshow show.
I was thinking about it modifying your code for a project I’m currently working on. I’m probably going to just try and ’skip’ any images that have a negative order number.
Thanks for your work on this plugin, it’s really great.
- Simo
I decided against coding new functions to evaluate the menu order number and just opted for simulating similar functionality that the gallery short code uses for include & exclude ( http://codex.wordpress.org/Gallery_Shortcode )
With my changes, your plugin accepts the attachment ID’s for the include and exclude parameters for the [slideshow] shortcode. ( To really take advantage of this I ended up echoing out the attachment ID in the gallery modal window. )
If you are interested implementing this into your plugin let me know! Email me, or reach me on twitter ( @matthewsimo ) – if you don’t feel this is a good direction for your plugin no problemo!
Thanks again, you rock.
Simo
Your additions have been added to the most recent version of WordCycle (0.1.6); thanks for the input!
Hi Esther
I am really enjoying using your plugin thanks – exactly the barebones solution I was looking for!
As I build custom templates though, I am finding I need to get the plugin above the page – out of the post area and into the source of the custom template – do you know any way I could do this? I know this touches a previous request. Could I insert the shortcode in a custom field to code it though to the template that way?
For ref. the non-commercial site I am developing with above is http://www.davidwhitestudio.co.uk/newsite – I wish to add multi column template below the full-size wordcycle slideshow…
Any suggestions helpful! Keep up the great work.
David, I’ve never heard of putting shortcodes into custom fields, but if that’s a technique you’ve used before — maybe?
Being able to use WordCycle in templates is a common request, and at the top of my list. Sorry I can’t put a date on the next release.
How do i add this to my template?
I am really fond of your plugin, but a recent issue that cropped up after the latest update has me banging my head against the wall. I had the previous version installed and working quite well, but I had an issue with adding more images to a post without having them show up in the slideshow. When I installed the new version (0.1.6) I was able to figure out how to use the post id, include and exclude functions to achieve the results I sought, but after a few image uploads I noticed that it was cutting off the right border of the image:
http://www.jimmiemalone.com/2010/lighting-dynamic-lightscaping/
It doesn’t matter what dimensions the images are. If I upload only ONE photo, it works fine, but as soon as I upload a second image the right border crops off. Any idea what could be causing this? I tried going back to the older version of the plugin but the issue persists. Other that installing the new version and uploading some photos I haven’t made any other changes.
Looks like the issue is coming from the borders in wordcycle.css
This file hasn’t changed in the past few versions, so I’m not sure why you’re seeing after an update.
You can override all the styles included in wordcycle.css in your theme’s stylesheet.
Thank you for the response. I appreciate you making this plugin available and taking the time to support it. Your answer was very helpful. I wasn’t crazy about the border at all so I just removed the whole thing!
I dont understand how I can associate a specific set of images to one post. When I paste in the slideshow source code, how can I specify that it only slides specific images? It seems to just cycle all the images in my library?
One tweak I added, that I think will make the slideshows a bit easier to customize: On line 138 of wordcycle.php, I changed the ID from a random number to the post id, this way I can custom style each slideshow on CSS if I want. I dont see the point of a random number here.
So now line 138 reads:
$output = “ID . “‘>”;
oops: it reads
$output = "ID . "'>";Sorry, I am trying not to spam. Seems like the code tag doesnt help here.
Anyway, I replaced all occurences of $rand with $post->ID and deleted $rand = rand(); from wordcycle.php
Hi, Esther:
I’d like to know hoy to add a pager control for the slideshow.
I’ve seen this example:
http://malsup.com/jquery/cycle/goto2.html
but I don’t know how to add it to my page. Where must I put it?
I appreciate your help.
Where do you copy the jquery.cycle.* files? I have tried wp-includes/js/jquery/cycle; wp-includes/js/jquery; either way, not even one picture.
Also, added the [slideshow next='.wordcycle' timeout='0'] in the text of my post and nothing.
Uploaded first by adding pictures to the post by using the Upload/Insert – Add an Image button, but this just adds the graphic to the website page when viewing the website, it’s not inserted into the post.
Then I tried Media Add New but this graphic does not link back to anything? I tried hitting the Attach button but the Attach To states that I have no posts or pages?
I’m driving myself crazy.
This plugin does not require you to manually install any js files.
great plugin – thx so much for your efforts. i have looked high and low for something like this, but i need to be able to use it in my template, not in the shortcode. would love to see this added as a function. thx again.
Nice plugin!!
It it possible to create more than one slideshow on any given page? For instance, I’m trying to put one big slideshow within the body of the homepage AND also a second, small slideshow with different images in the sidebar.
Yes it is possible to use the
[slideshow]shortcode more than once on a page. You will probably want to specify the ID of one or both of the slideshows.Hey Ester!
First this plugin is what I’ve been looking for so long now! but I cant make it to work. It just seems to put the images in a column, but the stylesheet is applied (grey border etc) but It doesn’t cycle.
have a look.
http://www.martinlindelof.com/2009/12/18/tackfilm-se-images/
pw: wordcycle
really thankfull for comments, maybe someone else has encountered this.
the embed code in my post is btw as following
[slideshow next='#wc-slideshow' timeout='0' fx='scrollLeft' size='large']This is probably a conflict with another plugin. For example, if any of the other plugins you use (or your theme) do not load jQuery using
wp_enqueue_script()you can end up with two conflicting versions.Ok. Hum I just took the thematic as a template and started working on that. I’ll try and disable as many plugins I can. I don’t think it’s loaded like that (Haven’t looked through the whole theme it’s huuuuge) but I’ve seen it load jQuery via the tag in the header.
That’s the correct way? Im not usually doing front-end stuf
But Im learning.
Another thing, I couldn’t override the CSS. I had to change your CSS in the plugin directory
because when I inspected the elements I saw they where applied but over-ride by wordcycle.css
It loads jQuery like this.
Is there anybody else that has problems with wordcycle using thematic ?
Ok it’s working hehe
Sorry to bother with idiot questions. I had mess up the header.php myself with javascript stuf.