From the blog:
yCyclista: a WordPress gallery carousel plugin that allows slideshows, transitions, etc – now with captions!
UPDATE 3 (Dec 23, 2010): I’ve released yCyclista v1.2.3, implementing user suggestions from the comments below. See the readme for complete changelog.
UPDATE 2: I’ve released yCyclista v1.2.2, fixing some old bugs and adding the “exclude” option. See the readme for complete changelog.
UPDATE: I’ve released yCyclista v1.2 now with captions! Thanks to support from people out there, I was able to work on this quickly and bring it up to date without waiting too long.
EDIT: Power users, download the latest plugin from the wordpress plugin exchange, and vote if you like it! See the demo right here.
We’re happy to announce the publication of our first plugin, yCyclista. yCyclista overwrites your normal WordPress gallery with the jQuery Cycle plugin, allowing tons of cool carousel effects, slideshows, and so on. This is our first version (ed: and my first plugin – yonatan reinberg), so please feel free to comment, ask questions and share with your best friends!
We recently had a client that needed a dynamic way to insert their own jcarousel/carousel-style slideshows, both automatic and manual (ie click-through). Realizing we couldn’t find what we needed on the web, we decided to develop it and share it! (we’re even using it here on Social Ink’s portfolio of non-profits and educational institutions in NYC. Have a look around, thanks very much!)
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!
To use, download the plugin and copy the ycyclista directory to your wp-content/plugins directory. Go to your blog’s Plugins section and activate. Then navigate to the settings menu:
Choose the appropriate options: a transition effect (examples of many effects are available here). A speed for the transition. Finally, check if you want it a slideshow or a manual gallery. If you select a slideshow, with a transition of slideDown, for example, everything will happen on its own. If you uncheck this box, the user will have to click on the image to go to the next one.
The following section is for thumbnails: Do you want a mini thumbnail navigation section? If so, enter dimensions for your thumbnails, or leave blank to use the WordPress defaults. Note that yCyclista will always display the full images at the size marked in your Settings > Media panel. If you find your images are too small, you’ll need to change it there. We also provide a whole host of styles (in ycyclista.css, in the plugin directory) which you can use to style your gallery exactly how you want. By the way, some transitions conflict with WP’s gallery and won’t work.
The following section is for the next/previous navigation: select the checkbox if you want navigation on. Then choose if you want it above the gallery (above the large image, NOT above the thumbnails) or below the thumbnails. Currently you can’t have them in the middle. Finally give your text labels (next/previous, go forward/go back, next item/previous item).
FAQ
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 contact me at through our contact form or email me at yoni@social-ink.net. Note we will not respond to basic plugin support through emails, only through comments at this page.
Why isn’t it animating?
As stated above, many things don’t play well with WP’s gallery feature. Visit our support page at http://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?
Only if you disable navigation controls. It’s not compatible. Explaining this to you would absolutely blow your mind apart.
Can I have more than one gallery on one page
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 need it called twice you can contact me because that’s a real custom job.
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 hooks into the WP gallery feature, which in turn generates thumbnails itself based on the settings in the backend, under Settings > Media. The squishiness lies there, friend! For example, if under there you have thumbnail size to 150×150 (the WP default), the plugin takes these WP-generated thumbs and then compresses them further to the size in the yCyclista backend. for smoothest results, then, the yCyclista settings thumb size AND the WP thumb size should be the same (and you need to reupload your gallery every time you change the WP thumb size so it can regenerate these images).
My thumbnails are checked, but they’re not showing
Is animation checked? It’s not designed to show thumbnails when it animates (kind of redundant).
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).
Use [gallery exclude=”17″] or for multiple, [gallery exclude=”15,19″]] etc.
Does this use the same features as the jcarousel jQuery plugin?
No, there are many carousel/cycling plugins for jQuery. We used this one because we felt it was the lightest and easiest. It has lots of options and great (little) overhead. If you’re interested in using a different one, drop us a line.
yCyclista by Yonatan Reinberg has been tested on all the latest versions of FireFox, Chrome, and, why not, Internet Explorer. It also validates 100% as HTML5, etc. Note too, 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.
Download v1.2.3 here from social ink’s site(63k zip) (v1.2.2/v1.1) or go to the wordpress plugin directory for yCyclista. See it in action here or by browsing our portfolio items below. Stay updated with all the latest plugin news by signing up for our email newsletter (below in the footer).
Go ahead and install, and leave your comments and questions below! If you’re so inclined, please buy us a beer and we can blow off steam to cover the hours making this plugin! Carousel away!
Follow us on Twitter @social_ink!
Our Facebook Page
that was version 8, not smile;)
Hello, Yoni
Thanks for wonderful plugin.
reports an error and stops further javascript execution
I think I’ve found a bug regarding ycyclista and internet explorer. On the pages where there is no gallery present, ycyclysta code still loads, and internet explorer (I’ve tested it in version
for robin
Thanks for your help- is that in #yc_nav, a#yc_prev or a#yc_next?
Yoni,
The code didn’t show, I mean a div tag with style display none around the extra slides.
Yoni,
jQuery Cycle allows ‘img’ around the extra “slides”. Then after the JS resizes the images (or whatever), it changes this tag to display:block. This functionality would prevent the large thumbnail images showing for a second before getting resized by JS.
For Eric,
I am sorry, I meant the comment for the developer not your issue.
Regarding #1. You can try using CSS and targeting the img with a set height, width:
#ycyclista_image_gallery img {
width:250px;
height:300px;
}
Regarding #2: I asked the developer for a fix (if he just wraps the thumbnails in a div tag with display:none, that will solve this issue)
Good Luck Eric
robin,
i’ll add the length tag but please be aware you can just disable thumbnails if you dont want them shown? or do you want a
For: crawpdx
Yes, using CSS position: absolute;
For Yonatan Reinberg,
A feature request: To add the option of wrapping the thumbnails in ‘div style=”hidden”>’ for those who still don’t have JS enabled, the thumbnails now become a list of huge images. I want them to just disappear. (the jQuery Cycle has that feature)
Also to add an if tag exists, like:
if($j(‘#ycyclista_image_gallery’).length > 0 ) {
$j(‘#ycyclista_image_gallery’){
}}
Thanks for a great and simple plugin. This is the temporary page I’m using the plugin on (‘http://glideint.com/clients/jarsystems/products/jar-remote-management-solution’)
Can I set up the prev/next to be at the right and left of an image?
had to download 1.2.2 to get the fx list- Thanks!
Great plugin! My fx effects are not showing up on the options page and I’m not seeing the prev/next buttons on the page that I added a gallery to. any help?
OK, I found it, just having trouble implementing your suggestion.
Thanks. I tried to find that bit in the js but it doesn’t appear to be there anymore (I just installed the update)
I would suggest adding to your js
if($j(‘#ycyclista_image_gallery’).length > 0 ) {
right before
$j(‘#ycyclista_image_gallery’)
The plugin was outputting error “site_url isn’t defined” on pages that the cycle wasn’t on. The above fixed the errors, plus it’s good practice.
This plug-in is great. I am having a problem, however, with two elements.
1. Sometimes the galleries work perfectly, other times, the images appear to load incorrectly so I end up with “squished” images (e.g. A an original 756 x 500 displays at 154 x 19) . If I reload the page it works fine.
2. All the images in the gallery show for a brief period of time before disappearing.
I saw a little bit on item #2, but wasn’t sure how to implement a fix.
Thanks
hey hey!
the plugin doesn’t animate my pictures? what’s wrong?
need your help!
Thank you!
How to display the gallery on a template?
how to make your pictures posted on the center ?
ok… i’ll think about it…
ollie,
what you’re asking for is not yet supported.
we’re happy you like the plugin but we develop it for free in our spare time, and can’t get to every request immediately. if you’d like to hire us to fix this problem, please be in touch using the contact form above.
*cry* no one can help me with this prob
please help me – you really did a great job… and THIS is EXACTLY what i want,… but i need that function…
i mean,… ich cant link to another gallery – from another post
hi – thanks for your fast answer… i hope u fully understand me… my english is not that perfect
) here is what i mean: http://codex.wordpress.org/Gallery_Shortcode
i copy n paste:
[id]
specify the post ID. The gallery will display images which are attached to that post. The default behaviour if no ID is specified is to display images attached to the current post. For example, to display images attached to post 123:
example: [gallery id="123"]
but that doesn’t works
i cant relate one gallery from that post to another one,… that makes me sad…
ollie,
what is ID-shortcode? can you explain what you’re looking for in more detail?
does anyone has an idea how i can use the ID-shortcode for ycyclista
i really want that plugin, but the ID-shortcode doesn’t work – and i dont want to re-upload all of my pics 
Chris,
you can wait for the next release to see if it’ll fix, or if you would like personalized support and debugging on your site, we can discuss that privately – email us at the contact link above!
thanks much,
yoni
exclude doesn’t work right now – i’m trying to implement it for the next release.
Hi Yoni!
Any idea why exclude=[ID] is disabled when ycyclista is activated ? I’m really having a hard time tryin’ to hide the post’s thumbnail.
thanks a lot, man
I’m running it on Genesis with the Corporate Child theme.
I’ll try adding captions. Already tried navigations.
Fiddled around with speed etc. Nothing.
I looked for the comma error but didn’t find it. I’ll look again.
BTW Yoni, this is everything I want in a slideshow plugin, I sure hope I can get it to work.
I’ll buy you a whole case of beer!
Chris,
can you try adding captions or adding navigations? If it works well, its a problem with the commas that Dan referenced above, which I’ll fix in the next release. otherwise, it might be your theme doing something OR something with the media settings in the options backend…
More…
I have it running on animated.
The images are resizing themselves to either 165×20 or 170×30
Love the plugin, but have a question/glitch.
does anyone know why my galleries run just fine sometime and then just start showing squished thumbnails, then will sometime just go back.
Thumbnails is not clicked in the set up.
http://www.paulmaynard.com/ftw/galleries/portraits/
Hi there !
Nice work, really it’s exactly what I was looking for.
Just a question : Is there a way to get the exclude=”[picID]” funtion to work with yCyclista ? I’m loosing it tryin to hide post thumbnail.
Thanx anyway !
Dan, thanks for that! Will update it soon.
Davide,
You’ll need to upload the correct file in full. It reads the full size of the image you uploaded. So you need to crop it, either on your computer or any online program (picasa, etc). I can look in the future into adding something that limits the size.
Hi, i can’t in any way set the size of the image in the gallery.
i have in the media, my preferred size, than i have in the page a [gallery size="medium"] wordpress shortcode, but the pictures is always big.
i’ve done it via css, but there’s another way?
After spending some time dissecting, I found the problem – odd that it works in almost all other browsers and not IE6/7, and with no code errors.
The issue I found is when you load the plugin with navigation, the script output is rendered like this:
$(‘#ycyclista_image_gallery’).cycle({
fx: ‘fade’,
speed: 1500,
prev: ‘#yc_prev’,
next: ‘#yc_next’,
});
….there is an extra comma after “#yc_next” which breaks the script. You need to remove this additional comma from ycyclista.php so that it renders as:
$(‘#ycyclista_image_gallery’).cycle({
fx: ‘fade’,
speed: 1500,
prev: ‘#yc_prev’,
next: ‘#yc_next’
});
….and that fixes the problem in IE7 and below.
Hope that saves someone’s afternoon
Thanks for this great plugin!
Any ideas why it won’t work in slideshow mode (single image, next/prev nav, no thumbs) in IE7 though? Just displayed a stacked UL of images instead, no code errors.
Cheers
Dan
thanks Yuri. captions are coming quite soon, thanks to support from somebody special out there
I’ve been searching for a great gallery since I joined WordPress but this one really caught my interest. I love it so much.
My only beef with it though is that it doesn’t allow captions to show. Maybe you could add that in further releases. Or if you could provide a tutorial on how to do it, that would be awesome.
Thank you for the plugin!
Hello. please get in touch with us at info@disengised.com. We would like you to customize the plugin for us… Just some minor things. Its of some urgency so it would be great if you could get in touch as soon as possible. Thank you.
Yep, it was the hosting. Sorry for posting two issues on this page which had nothing to do with you. You did a great job. The other explanation is that last time I installed it through wordpress and this time i grabbed it off your site. Just wondering. Anyways, thank you.
Ok I will try now and let you know. I will also post a link in a second. For you to see. Thank you for your quick reply! When I was having that problem it was on some really dodgy hosting. Maybe that was it. Ill keep you posted! Thanks again from the folks at:www.disengised.com
Mathias. I’ve set up a similar page here: another test. its showing 12 images. do you have the latest plugin version? try redownloading.
do you mean why does the wordpress gallery only have 10 images in it? i have no idea. this plugin should fade in/out everything you put into the gallery.
Hello, yeah an bvious one. Your plugin isnt the culprit. Its great though, we really like, but are having the problem that it will not display more the 10 images. Any ideas? Some support would be great. I really like what you did.
not possible, it doesn’t modify anything in your system to be able to do this. plus we’ve tested it across many installs, never seen anything like that happening.
you could always test it by deactivating it?
hello, my flash uploader for wordpress is no longer appearing (neither is the option to switch from to flash uploader from the browser uploader. I am asking myself if this plugin could possibly be the cause for this. Anyone else having this problem?