yCyclista is a plugin that uses WP’s gallery feature with jquery cycle effects. You can easily, without any editing, create jQuery slideshows or gallery transitions. Cross-browser tested, fully validates. No need to have your galleries in separate locations; now you can attach them to your post and use away! Great for product images, shopping, photo gallery, so on! Now with caption & exclude support.
Other plugins make you upload to specific directories, use FTP, or install additional scripts that you then embed. We’ll have none of that here, thanks! We’ve also put a bare minimum of styles in there so there aren’t too many conflicting problems with other styles.
Our yCyclista plugin overwrites WordPress’s basic gallery function with malsup’s jQuery Cycle plugin, allowing the lay user to dynamically add slideshows or clickthrough galleries to their site.
Please note, as with every plugin or theme modification, you should do a backup of your files beforehand. Although we’ve tested this across many installs, we are not responsible for anything it does to your system and do not guarantee support.
Basic vs Premium
This basic version of the yCyclista is missing some features that are highlighted below – namely, thumbnail navigation and some of the gallery effects. If you are interested in these features, or any other changes to the built-in navigation, please head over to the yCyclista premium page and give us a shout; it may be just what you’re looking for.
- Upload ‘ycyclista’ directory to your ‘/wp-content/plugins/’ directory or use WP’s “Add Plugin”
- Activate the ycyclista plugin through the ‘Plugins’ page in WordPress
- Go to Settings > yCyclista and choose the correct transition effects, time, thumbnail/animation, and next/previous buttons preferences.
- Add a new page or post to your wordpress, click the upload image button and upload images. Do NOT click “insert gallery” as this will insert the gallery using WP’s default. Instead, click Save Changes, close the box and use the shortcode
[ycyclista]wherever you want the slideshow to appear. Use
[ycyclista exclude="imageid"]to exclude any image. You can exclude any number of images, eg using [ycyclista exclude=”27,28,55″]. Pay attention to the quote marks.
- NEW: You may also add PHP-based theme support by calling the function
<? ycyclista() ?>or
<? ycyclista('exclude=28') ?>to exclude.. Note the quote difference from the shortcode system in step 5…
- That’s all – yCyclista will take care of the rest.
Frequently Asked Questions
What’s new in version 2?
I added much better caption/description/title support. Now you can also add a destination link (in the image upload box); the title of the slide will link there if you have entered anything. Completely rewrote the JQ to load faster. Notably abandoned overwriting the
[gallery] shortcode; now uses
[ycyclista] shortcode so you can also use the gallery if you so desire (this was requested in the comments).
What do all the transitions look like?
You can experiment or for a full listing of transitions visit http://www.malsup.com/jquery/cycle/browser.html.
How do I change the location of things or how they look (eg add an image to the next/previous)?
CSS is your friend. Add a background image to yc_next and yc_prev… Move margin-tops (ha!). If you need me to do a custom version of this with everything suited for your needs, please visit us at https://social-ink.net or email me at email@example.com.
Why isn’t it animating?
As stated above, many things don’t play well with WP’s gallery feature. Visit our support page at https://www.social-ink.net/blog/ycyclista-a-plugin-for-your-wordpress-gallery-that-allows-slideshows-transitions-etc and post your comments.
Can I click on the image to move to the next one?
If you disable navigation controls. You can’t have navigation controls AND “click on image” at the same time. Explaining this to you would absolutely blow your mind apart.
Can I have more than one gallery on one page; can it work on multiple loops?
Nope. So if you have a category listing showing many posts’ galleries, only the first on the page will work. Can’t call it twice. If you have multiple loops on one page, only the first will show the gallery. If you need it called twice you can contact me because that’s a real custom job.
I excluded the first image and now everything looks weird!
You cannot exclude the first image, because the plugin calculates many heights and widths based on this image. You can exclude any number of images but the first – rearrange your gallery and then try again. Likewise, the max height and width of the slideshow will be determined by the first image. I’d suggest making all images the same size, but if you must have different sizes, ensure the first is the largest.
I have fancycaptions turned on, and the grey background goes across my whole page
The plugin tries to use fancy jq to divine the appropriate width, but if that doesn’t work, go to your backend and navigate to the Settings – Media page in your WP install, and change the max width for the “Large size” to the width of your images.
The thumbnails look all squishy!
yCyclista doesn’t generate any thumbnails, it only uses your browser to resize the images already loaded on the page. Sometimes these images will look strange depending on how the browser resizes them. Try a different thumbnail dimension in the settings in the backend.
Can I exclude any images from the gallery?
Now you can! Use the general WP shortcode
[gallery exclude="ID"] where ID is the picture “attachment ID”. If you know a little HTML/CSS, you can check the id of the image from the frontend (eg “ycycle_pic_12” means attachment 12), and use that. If you want it through the backend, the easiest way is to go to Media > Library, hover over an image, and look in your statusbar, you’ll see the id. It’s a bit annoying but its the only way I know to find the ID easily. (eg you hover over an image and see “http://your-site.com/wp-admin/media.php?attachment_id=17&action=edit” in the bar; the ID of that image is 17).
[gallery exclude="17"] or for multiple,
[gallery exclude="15,19"] etc.
- Fixed bugs: “Squishiness”, completely rewrote plugin jquery to allow image centering, among other bugs.
- New: shortcodes, styles, additional cycle options, image centering.
- Updated to latest version of malsup plugin
- Fixed bugs: alt text, removed “none” FX option, checked for length, hide remainder of images in case JS is disabled
- Updated to latest version of malsup plugin
- Change commma layout for increased compatibility with IE7
- Change php shorttags to <?php (referenced here here http://wordpress.org/support/topic/ycyclista-not-loading-fx-in-admin) for backwards compatibility
- Added “exclude” option
- Fixed thumbnail PNG problem
- Added captioning, rearranged directory and streamlined markups.
- Implemented dropdown for choosing Fx, changed some of the JS around to make the plugin tighter.
- First version released.
NOTICE: yCyclista 2 has been COMPLETELY rewritten. Now it does not use the
[gallery] shortcode but uses its own new code,