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
I see lots of questions but no answers?
Can I get help with slide pagination and have slide left/right option?
Thanks
Hi,
I have installed this plugin in a wordpress install using the AWAKE theme..
I have installed it as instructed but all I get are 4 square images side by side.. no transition effects or anything.. This isn’t right is it? what’s going on?
this plugin looks fantastic and just what i need but i can’t get it to work. the first image is shown, i can see in firebug the gallery is being wrapped with the cycler divs but nothing fades in or out. could there be a jquery conflict, or something simple i’m missing? i’d really like to use this. i’m on WP 3.31 which is the latest i believe and tried the default 2010 theme as well as manifest theme!
It’s amazing how many WP plugins I had to try that will:
A. Allow use of a post-attached gallery
B. And a shortcode
C. Generate a slide that overtakes the gallery
D. Allows you to not use thumbnails
E. Still has captions
F. Allows users to upload images of different sizes!!
Seriously, you would think that would be pretty common, but it’s actually not. I guess most plugin authors have never dealt with users.
Cheers and thanks!
Loving this plugin….
Love the simplicity….
Is it possible to have different transition types on different pages/instances?
i.e
Is there a way one can make page 1 have “scrollLeft” and page 2 have “scrollRight” ?
the answer to my question, I hope, does not interfere with the simplicity.
Here’s a fix to the Firefox ‘wrong image size appearing’ bug that some people have experienced. It’d be great if you could implement this into the plugin. http://stackoverflow.com/questions/1719475/jquery-cycle-firefox-squishing-images
I’m boycotting Amazon in solidarity to my fellow California affiliates. In the meantime, I am directing people here to get their plug-ins to replace any widgets they formally used at Amazon.
Brilliant plugin, thank you. I’ve successfully implemented it on my WP theme that I coded. One thing I would say though – when only one image is uploaded the caption text doesn’t appear. I know this is a weird request but it would make the plugin 100%.
I’ve added about 15 photos, and since there’s no forward/back arrows on the thumbnails, the thumbs are now wrapping to two lines and breaking the slideshow. Has anyone else had this problem? Thanks…
Also, is there a way to pause the slideshow?
I’m not seeing the thumbnails or “next/previous” navigation, even through they’re activated in the Admin area. I’ve also changed the caption CSS slightly but those changes aren’t appearing. (WP 3.1.3, Firefox 3.6). Any help is appreciated– thanks!
Is there a way to change this plugin’s shortcode to something other than [gallery]. I’d like to be able to use the default wordpress gallery on some pages and this slideshow on others. Thanks.
Sorry, not right now. the point being is that it overwrites default gallery behavior in order to be the simplest plugin. I can look into calling manually via shortcode in future.
Something like this should be in the WordPress core.
I was initially impressed, unfortunately, as you use the settings form, it gradually collapses with controls disappearing to leave it unusable.
Great plugin. I was surprised at the lack of slideshow/gallery options using WP’s core gallery. I was going to hardcode something similar, but this works fantastic.
Question, on upgrades with I lose my custom css?
Thanks,
Jason
Something’s up with ycyclista and internet explorer 8 – on the first load of the page, the image appears about 10px high and 300px wide, no matter the correct size of the image (the thumbnails load fine). On reloading the page, it all looks correct. This even happens with your example pages: http://www.social-ink.net/portfolio/non-profit/womens-environment-development-organization-wedo
If you don’t want to show the full size images on the slider, edit the ycyclista.php
find line: wp_get_attachment_image_src($attachment->ID, ‘full’);
and change it to: wp_get_attachment_image_src($attachment->ID, ‘medium’);
or change it to: wp_get_attachment_image_src($attachment->ID, ‘small’);
Just got this error with the new release:
‘Warning: Cannot modify header information – headers already sent by (output started at /home/glideint/public_html/clients/jarsystems/wp-content/plugins/ycyclista/ycyclista.php:280)’
line 280 has the following: echo “\n”;
changed to output .= “\n”;
Fixed the above error. You should fix this. and release a new one
Your plugin is exactly what I have been looking for! I have a 2 questions…
1. Is it possible to remove the >>> between each thumbnail
2. is it possible to line the first thumbnail up to be flush with the right side of the larger image above?
Thanks so much!
Thanks for the plugin, it’s great!
Only problem I’m having is that in a gallery with three images, one large image and two thumbnails show up. The first large image that loads doesn’t have a thumbnail, so once you’ve browsed the other thumbnails there’s no way to see the first one again without the use of navigation links (which are not permitted by my clients).
I’d appreciate any advice you could give. Thanks!
Hey Ben
Thank you so much for your “line 240″-message
so great… I’ve been waiting for this, since I use ycalista 
THANKS
Greetz,
Olli
oi caio tudo bem? essa problema faz parte do seu template, nao do plugin. ce tem q da uma olhada ao CSS do imagens…
Hi there…
thanks for the plugin…
Yoni, I´m having trouble with the squished images too… any chance you´ve found a way around?
Please take a look at the print below:
http://www.magenta.net.br/cafedelmare/paunagaleria.png
I really liked the plugin and I´d be happy to pay for some beers… but you know.. it should be working properly…
If only I could help you fixing it, but I´m not exactly an expert. I´m a (fairly good) graphic designer with little developing skills…
hope to hear from you.
cheers,
Caio
Nice Job. I needed to reference a gallery from a different page than the post that contains the gallery.
I added the following code to do the trick on line 240 of ycyclista.php. Might be a handy addition.
if($attr["id"])
$thePostID = $attr["id"];
else
$thePostID = $wp_query->post->ID;
I figured out how to get the prev/next buttons to the left/right of the image.
1) In the settings for ycyclista, set the prev/next to be above the image
2) Then float a#yc_prev and a#yc_next to the left and right respectively in ycyclista.css
3) also in ycyclista.ccs, set the margin-top for a#yc_prev and a#yc_next to 200px (or whatever number will get you centered on your image if thats what you want)
This should set the prev/next buttons to the left and right of the image.
**I was also able to replace the text with my own arrows by using my graphic as a background image for a#yc_prev and a#yc_next and then cleared out the text by using text-indent: -9999px; for both selectors.
If anyone else knows a better way to do this, please post.
This worked in all browsers.
nope … tried to fit it into a specific layout with two div’s inline next to each other, left the text and right the gallery … was able to hack this plugin to resize the images (which it would not do by itself, haha, strange) … but then it stopped displaying them at all, causing the ycyclista_image_gallery to collaps to height:0 with overflow-x and-y:hidden …. won’t waste any more time with this beast
Robin- do you know which selector I would put that in?
Thanks for the response!
@crawpdx : try FF
Concerning me, image height (and width) are specified in the CSS and in element style :
#ycyclista_image_gallery img {
height:455px;
width:930px;
}
…
I have an issue with this plugin and internet explorer- IE is only showing a small window to the slider- any help would be appreciated. Thanks
alot of times the squished images come from the lack of image height in the style. we are working to update that in the next version.
again, we receive many emails asking for personalized support for your website. while we appreciate that you enjoy our plugin and respect our work, we do remind that for personalized support, troubleshooting and the like, we will need to agree on a support fee. please be in touch if you need something like this.
Yoni, I would be willing to pay a support fee for someone to fix my ‘squished images’ problem. i’m currently building a site that depends completely on ycyclista & this problem is becoming very burdensome. please let me know how/if you can help me. thank you.
Hi Jaye, you have to go in “insert an image” and then to the tab “Gallery (x)” (x is the number of images you uploaded). If you don’t have upload more than 1 image, you don’t have the tab “Gallery”.
Other choice : type directly the short code [gallery] in your post and apply changes.
This is probably stupid but it says “Go to the gallery tab and “insert gallery.”
and I can’t seem to find the gallery tab anywhere. I got 1 slideshow up and running but now can;t find the tab. Have you heard of this before or is it right in my face?
Nice … and simple. Extremely easy to get up and running.
Thanks a mil. I’d like to go for a bike ride with you but it’s raining out here.
Hello everybody !
I have the same issue than Eric (#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.”
I tried to modify my CSS classes as Robin adviced. But it doesn’t change something.
I think the issue is coming from the browser caching system, or something like that, which explains why the matter disappears when pressing F5.
Note: the issue appears both on Firefox and IE…
I too am having the same “squishing” issue. I’ve tried playing with the different plugin settings, changing the CSS, and even the thumbnail settings under WP’s gallery (like suggested under FAQ’s) but none of these things have helped.
I looks like it’s loading issue for sure. Can someone please help me and Raid Tunisie? It does only appear to be occurring when a user first views a page because refreshing the page eliminates the problem. But still, no bueno
Thank you!
that was version 8, not smile;)
Hello, Yoni
Thanks for wonderful plugin.
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 8) reports an error and stops further javascript execution
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?