Add Custom CSS Transitions
Closed this issue · 6 comments
Hi Matt,
First of all, I LOVE your plugin concept. I'm looking forward to using it (I have to build it into a WordPress plugin in order for it to be usable for me, but I haven't gotten around to that yet).
I hope I'm doing this right, filing this as an "issue." It's more of a proposal or a request actually. I'm new to GitHub though.
I think it would be great if the transition options were "crossfade," "scroll" and "customcss." The customcss option would not affect any style attributes at all. Instead, it would add/remove classes, such as "future," "current," "past," maybe more. In a Fork I've attempted to do this (https://github.com/joerhoney/jQuery-Slideshow/blob/master/src/slideshow.js), but I'm not understanding a lot of what's going on in your script (I'm just not as well versed in JavaScript and jQuery). As a highly experienced CSS coder however, I can say there are almost infinite possibilities in this idea of the customcss transition. I've been looking for a script that does this, but haven't had much success. I've concluded I'll have to build it myself (unless I can talk someone else into building it). I'm seeing if I can achieve this with your slideshow script because it has the most developer-friendly foundation I've found yet. I feel that's important for creating the most customizable jQuery slideshow ever (which I think your's is). So I stand before you with what I consider to be a brilliant idea and the desire to help you make your great invention even better, but I lack the know how. But I'm still going to try.
So would you be able to explain to me in some way what is occurring in the crossfade transition segment of the script, so I can try to tie in what I know about adding/removing classes with jQuery for the customcss transition I'm trying to write? Ultimately I'd like this to be a part of your original jQuery Slideshow code if you're interested. I would love to be a contributor to your project and help you code it if I can get some help learning how to do that. Otherwise, I need to somehow figure out a way to do this for myself anyway and I just need a little help.
Thanks in advance! Let me know if there's a more proper way I should have made this proposal/request.
Joe Rhoney
@joerhoney Thanks for taking to the time to write such a detailed issue.
You're absolutely right in wanting CSS transitions but it's not in the pipeline for this project, I think this style of jQuery plugin is near retirement. While this slideshow remains really robust and flexible, if you're lucky enough to be working solely with modern browsers it's probably overkill.
Fortunately, I have written something that might be up your street. It's a simple sequencer that adds is-before, is-current and is-after classes to the slides. http://jsfiddle.net/i_like_robots/xkwX6/
Wow! This is exactly what I had in mind. Awesome work! Do you have a page that spells out what all the parameters are (can you add a pager for instance and what's the data-* attribute for it)? Or is this currently a work in progress? Are you planning to put this on GitHub?
The slideshow lives here, with a bunch of other components: https://github.com/i-like-robots/groundwork-components
There aren't any parameters, it's opinionated - you give it an element and it gets to work. The same applies to the other components within that project. There's currently no documentation unfortunately, but they do mostly have examples on JSFiddle.
Very fascinating stuff! A lot of it is hard for me to grasp, which is perhaps why you initially only shared the JSFiddle link. :)
Where can I find more JSFiddle links for your GroundWork Components?
Great! Thanks so much!