2009
09.24

Here is a small update to Karmic flow

- Fix auto slide timing not resetting when clicking on controllers
- Fix decesdants of controllers triggering the default behavior of controllers (i.e. popping up new windows)
- Now karmic_flow_slide_selected will trigger the correct slide and controller onDOMready
- Slides now uses id instead of name for standards compliance

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

Karmic Flow Demo

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" href="#" target="container">Play/Pause</a>
<br />
<br />
<br />
<a class="karmic_flow_controller" href="#slide1" target="container"><b>叶上水</b></a>
<a class="karmic_flow_controller" href="#slide2" target="container">沙与石</a>
<a class="karmic_flow_controller" href="#slide3" target="container">迷雾滩</a>
<a class="karmic_flow_controller" href="#slide4" target="container">豹爽</a>
 
<div id="container" class="karmic_flow_container">
    <ul class="karmic_flow_slider">
        <li class="karmic_flow_slides karmic_flow_slide_selected" id="slide1"><img src="i/p1.jpg" /></li>
        <li class="karmic_flow_slides" id="slide2"><img src="i/p2.jpg" /></li>
        <li class="karmic_flow_slides" id="slide3"><img src="i/p3.jpg" /></li>
        <li class="karmic_flow_slides" id="slide4"><img src="i/p4.jpg" /></li>
    </div>
</div>

72 comments so far

Add Your Comment
  1. Alright Fella,
    Great plugin. However, I have noticed a small problem when not explicitly setting a height on the container. It seems that this needs to be set to a specific height, when it is not the total height of all the divs is calculated and added to the container. Is there any chance, or insight into how this could be fixed?

    Many thanks

  2. Hi Kean Tan,
    Is there a way to add pagination? I mean, If suppose I’ve 12 Slides, and showing 4 tabs initially and clicking on Previous/Next buttons will show another 4 tabs.

  3. it doesnt seem to work in IE, it only works in Firefox… http://www.karmagination.com/demo/kFlow/0.2/example-jq.html

    When clicking on a tab, it opens in a new window.

  4. The Jquery example doesn’t seem to work in Safari either (v4.04). Like IE, it opens the tab in a new window

  5. How would you make it so the previous and next buttons dissapear at a relevant slide, for example, if the slide is at the end make the next dissapear, if the slide is at the start, make previous dissapear?

    Thanks.

  6. in firefox and chrome works fine, but in ie (newest version) it doesnt :-(
    hope someone can fix it. here is the example http://www.jeanpaulraymond.com/wp-dyn

  7. Your code no longer works with jquery 1.4, it’s broken even on your page.

  8. Sorry, I should exand. The automation scrolling works, but the nav buttons no longer work.

  9. [...] on the homepage, this Karmic Flow powered slider will display your four latest posts with a custom image should you [...]

  10. @Jan, @David and to anyone else who had issues with karmicflow OPENING NEW windows/tabs in Safari or IE instead of scrolling…found the answer in karmagination’s twitter column:

    [1] Open karmic-flow-0.2.js file in text editor
    [2] Go to line 93 (var isChildOf =…)
    [3] Change “class” for “className”
    [4] do the same for line 101 (if ($(cache[i]…)

    “class” is internal value used by those browsers, hence the behavior.

    Hope it helps

  11. Stops working the mometn I link to Jquery 1.3.2 and I need to link to the file as I have other plugins which need that version.

  12. [...] on the homepage, this Karmic Flow powered slider will display your four latest posts with a custom image should you [...]

  13. Im a Newbie here using pixelcraft, can you tell me what directories I need to install the updated files… I installed the new files directly into the corresponding js and css folders now the all the text is invisible. Help

  14. [...] 4. Karmic Flow [...]

  15. [...] on the homepage, this Karmic Flow powered slider will display your four latest posts with a custom image should you [...]

  16. this is not working with jquery 1.4.2

  17. [...] lavori: per lo slide presente in home page si è utilizzato il plugin Karmik Flow, basato sul framework Karmagination e [...]

  18. [...] Karmic Flow slider included in theme [...]

  19. Can we use this for wordpress blog or cms.

    Thanks.

  20. [...] on the homepage, this Karmic Flow powered slider will display your four latest posts with a custom image should you [...]

  21. [...] muestra en la página principal, este flujo kármico deslizante accionado mostrará sus cuatro últimas entradas con una imagen personalizada si usted [...]