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
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!