09.10
Note: I have released a new version of Karmic Flow here. Please click to get the latest Karmic Flow.
This is a remake of my wildly popular plugin for jQuery, known as jFlow. It works with Karmagination 0.2 or jQuery 1.3.2.
Download or see a demo with Karmagination or see a demo with jQuery
Basic usage
$('#container').karmicFlow();
Here are the configurable options:
duration: (int) the time in milliseconds it takes to move 1 slide
timer: (int) waiting time in milliseconds for each slide before it slides, used when slides are played
auto: (boolean) specify whether to automatically play the slides on load
The options below are not to be modified unless you know what you are doing. If you change the options below make sure you change the corresponding class name for the HTML.
container: (string) the class name for container of slider and slides
slider: (string) the class name for slider
slides: (string) the class name for slides
slide_selected: (string) the class name added to currect active slide
slide_overflow: (string) the class name that handles how to display overflow slide
controller: (string) the class name for controller that slides to a particular slides
controller_selected: (string) the class name added to the controller of the current active slide
next: (string) the class name that slides the slider to the next slide
prev: (string) the class name that slides the slider to the previous slide
play: (string) the class name that automatically slides slide in timed intervals
pause: (string) the class name that pauses the effects of play
The default values for the options:
duration: 300
timer: 2500
auto: false
container: ‘karmic_flow_container’
slider: ‘karmic_flow_slider’
slides: ‘karmic_flow_slides’
sliding: ‘karmic_flow_sliding’
slide_selected: ‘karmic_flow_slide_selected’
slide_overflow: ‘karmic_flow_slide_overflow’
controller: ‘karmic_flow_controller’
controller_selected: ‘karmic_flow_controller_selected’
next: ‘karmic_flow_next_controller’
prev: ‘karmic_flow_prev_controller’
play: ‘karmic_flow_play_controller’
pause: ‘karmic_flow_pause_controller’
Recommended HTML structure:
<a class="karmic_flow_prev_controller" href="#" target="container">Prev</a> <a class="karmic_flow_next_controller" href="#" target="container">Next</a> <a class="karmic_flow_play_controller karmic_flow_pause_controller" href="#" target="container">Play/Pause</a> <br /> <br /> <br /> <a class="karmic_flow_controller karmic_flow_controller_selected" href="#slide1" target="container">Leaves</a> <a class="karmic_flow_controller" href="#slide2" target="container">Sand</a> <a class="karmic_flow_controller" href="#slide3" target="container">Beach</a> <a class="karmic_flow_controller" href="#slide4" target="container">Cheetah</a> <div id="container" class="karmic_flow_container"> <ul class="karmic_flow_slider"> <li class="karmic_flow_slides karmic_flow_slide_selected" name="slide1"><img src="i/p1.jpg" /></li> <li class="karmic_flow_slides" name="slide2"><img src="i/p2.jpg" /></li> <li class="karmic_flow_slides" name="slide3"><img src="i/p3.jpg" /></li> <li class="karmic_flow_slides" name="slide4"><img src="i/p4.jpg" /></li> </div> </div>
Excellent! Even better than your first one, JFlow! Thanks very much and keep up the good work!!
Any chance instead of (or in addition to) specifying each class name individually, there could be a class name prefix option?
Thank you so much! I have found this to be sooo useful. Just a tip for those designers that believe in validation: The “name” attribute does not validate; instead you must replace “name” with “id” in the HTML. Also don’t forget to open up the karmic-flow-0.1.js file and replace the three “name” instances with “id” to make sure that the slider works.
Hy,
how do I set the selected slide after a reload?
$('#container2, #container3').karmicFlow({ duration: 200, slide_selected: "karmic_flow_slide_selected" });doesn´t seem to work ..
Thanks
@didi
The slide_selected property is used as a pointer to see which slide is selected but not to set the initial slide that is selected but yes I will build this into the feature in the next release.
@nick You can use the default class name and not set it at all. I give the option to overwrite it so you can use a shorter class name. Since the class name has to be unique anyways as they style differently, I don’t see how a prefix will have any advantage here.
Kean, I discovered a bug… sometimes when you quickly click a controller link the slide does not activate; instead, the page opens in a new window (the correct #slidenumber appears in the URL, but the page is simply reloaded with the default slide selected). This happens on both IE6 and FF3.5. Any chance you can have a look? Thanks a lot! Allan
Nevermind – I figured out that my problem was due to me wrapping tags around the link text inside the controller. Any idea why the addition of the tags would cause the erratic behavior? It would be beneficial to be able to add these because it allows for more control of the styling of the link text between the different states (selected, non-selected, etc). Thanks, Allan
How do i get this to work within wordpress? It works when it in the absolute begining of Body but as soon I put the code in another Div it doesn’t change content, just tabb-selected.
Check ut my homepage to see what I mean.
Very grateful for answer.
Best regards
Mikael
No worries, got it work now… had to make sure all the div’s are closed for it to work.
I love the new changes… however there is no API functions such as telling it to StopOnClick for like the controller. If someone is reading the content on a slide I need it to stay put… and maybe start the timer backup after they mouse off of the controller button.
I looked through the plugin before posting this to make sure there weren’t any API funcs for it.
Please implement something like this – it would make this great!
@Joshua That’s absolutely a great idea and a big thing for usability. I will implement it on the next release.
@Allan You are right. I know how to fix the bug and plan to release the update soon.
Love the slider. Very customizable! Would love to have one that slides vertically. Would that be possible? Thanks for the good work.
[...] Karmic Flow 0.1 – Content Slider for Karmagination / jQuery | Karmagination (tags: jquery slider javascript slideshow webdesign ajax) Bookmarkealo [...]