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
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>
With jquery 1.3.2 I’m getting this error:
$container.data(“opts”) is undefined
http://ccpd.uc.edu/
HI Kean,
I just found karmicflow and it looks amazing. I have a question though….
Can images in the slideshow have links to pages or may be lightbox??
Thanks,
ak
you can have anything inside
<li class="karmic_flow_slides" id="slide1"></li>
This version (0.2) is making Safari 4.0.3 pop up new windows, yet 0.1 works fine across Safari, FF, and IE6.
Yeah this isn’t working in Safari – Firefox is fine, but issues with Safari – FYI.
@KG @Andrew Yes, I am aware of the problem. Fix is just round the corner.
Hey Kean—
Thanks for this; it looks great. I’m giving it a shot now, and hopefully it will perform better than the last piece of crap I tried, which will go unnamed
FYI, I noticed a few problems with the markup on your demo page (http://www.karmagination.com/demo/kFlow/0.2/example-jq.html):
- The page title still says “Karmic Flow 0.1″
- You used the wrong closing tag for the first two unordered lists ( instead of )
…</div> instead of </ul>
Hi Kean,
great work, I tested it, but Safari and IE 6/7/8 still doesn’t work. I’m waiting for your fix
Rgds!
Hello…
Job that you did with this plugin is fantastic… great work
I have one question… in case when using flash content in slider, that flash content is visible in “hidden” area of slider (e.g. I’m on slide 5, on slide 6 is flash content, and i can see it on the right side of slide 5, while other content of that slide is hidden – text). I was trying to use wmode=”transparent” or “opaque” on flash object but with no success
I was wondering is this possible to do at all?
thanks.
Hi Kean,
Is there a way to skin the content slider with a transparent png on top, to replace the default white border with some image panel. I tried this with other sliders some times back but overlaying a png disables all my links below the transparent png.
Thanks,
ak
[...] Sitio: http://www.karmagination.com/blog/2009/09/24/karmic-flow-0-2-content-slider-for-karmagination-jquery [...]
Also noticed that this version works fine in Firefox, but not at all in IE – is there a fix on the way?
Quick fix from Kean@Twitter:
@RountrJF Ahh silly me. Just change class to className on line 93 and 101
Thanks Kean, now it works in Safari, IE6/7/8 perfectly (tested)
Great work!
Brilliant – works like a charm now.
Great script. Is there any easy way to make it fade rather than slide?
Thanks,
Ben
Looks great! I’ve converted my page from jflow, but there are a few things I’m still having issues with:
Can links be created that will scroll to a section?
I can’t seem to get styles for other ul’s within the scrolled area. I have a bullet graphic that I like to use for my ul’s, but it’s not showing up. Also, I have an area that when using jflow I could scroll down within the slide section, and now it’s static.
live page with jflow: http://bellechicsalon.com (ul bullets and scroll in “Services” section)
test page with karmic flow: http://test.bellechicsalon.com
CSS for test: http://test.bellechicsalon.com/css/style.css
Any help is much appreciated!!
Nevermind, got it working. I’d still like to know about using links to scroll.
Hi
Great work
I’m using jflow 1.2 and thinking about moving to this new version. Works sweet.
I’m using jflow/karmic to display lists of porfolio items. Each slide presents a new set of links to info pages with additional content.
When a user clicks “back” from an info page the sider page loads the first slide.
I’d like to be able to call the slide that the info page originated from.
(I.E. if the info page linked from slide 3, when the user clicks back, the browser would return to the slider page and load slide 3)
** The link here is using jflow 1.2, but if this can beimpelented with karmic, I’ll upgrade… better to stay current!
Thanks!
Sorry, here is the example link: http://www.redpointdesign.ca/09test/portfolio
hi.. tried using this and it works greeeeat!! thanks! only problem i had was when i also used lightbox on a different part of the page. one of them will not work if used in the same page. depending on the arrangment of the javascripts, the slide will work if the javascript files were used last and lightbox will work if lightbox javascript files were used last.. not sure why.. im using ff3 and ie7 btw,, same case for both.. thanks..
Is there any way to have an image as a link? If I use syntax below, clicking the image does not change the image.
Forgive this question if it’s obvious and I’m missing it – is there a way to get the slider to expand and contract vertically to accommodate longer or shorter content?
Thanks Keane, great script! Just fixed the pop-up issue in IE with the info found in the comments.
Hi was wondering if I could specify a slide from a link, (ie, a user clicks FAQ and it opens a new page with another slider and automatically jumps to the FAQ slide). Is there a way to do this without losing the glide effects or creating seperate functions for each slide. Thanks great job btw
Hi, first of all i want to congrat you for the wonderful job you did on the script man. I try the fix for IE but look like i still have the popup coming up (I’m using IE8 ver 6001.18702) i did change the line 93-101 inside karmic-flow-0.2.js from class to className but nothing change am i doing something wrong ? when you got a chance can you reply,
Thanls in advance and good job
If I change the name of the #container ID, I have the error:
$container.data(“opts”) is undefined on the script line: duration = $container.data(‘opts’).duration
How can I solve this? I need to change all the $container references in the script to the new ID name??
”
Bailywolf said: 2009.10.15 07:11
Forgive this question if it’s obvious and I’m missing it – is there a way to get the slider to expand and contract vertically to accommodate longer or shorter content?”
+1 for that. The best I can get working is to make the content scrollable.
Hi,
This works great, using the “auto” mode.
but as soon as I set the duration, the animation never goes back to the first slide, and I get an error
$container.data(”opts”) is undefined.
If I could get one feature added, it would be to get an instant return to the first slide, I use pretty long contents, divided in 6 slides, so when the end is reached, the rewinding effect is a bit too long…
so I guess it would give 2 separate “duration” options, one for slide by slide, one for the return to slide 1.
cheers
+2 for the request to make the slider set the height automatically. Other than that, I think it’s flawless! Thanks for your hard work!
Hi. I rebuilt my page and the error with the container ID is fixed… now I only have one error with the sliders width on the webkit browsers (Google Chrome, Chromium and Safari)
I think the problem is here: $slides.width($container.width()); If I change these line to $slides.width(960); It works fine… so I think the problem is on the $container.width()… that determines that the width is lower than 960px, that is the width I want…
Ok, problem fixed again… isn’t a problem with your script. I have another script to determine the screen width, and select the correct css with the widths of all objects… I removed this script and yours works fine…
Wondering if I can get help on two customizations:
- any way to not have the sliedshow loop at the end? So just stay at the last slide
- open to a random slide? (so the first slide would be a random slide)
Thanks much!
Jay.
Great job! Keep up the great work! Looking forward for updates..
I am going through several different slider components and I was wondering if it is possible to use images to trigger the slide effect? For example, I want to have brand logos somewhere on a page and want clicking them to trigger the slide effect. The Karmic Flow examples didn’t cover this.
Hi! Really great Job! What a fantastic plugin this is!
I have one question: is it possible to have different heights for the slides?
When I remove the height in the css, the height of the website becomes very big.
Help would be much appreciated!
thx
Timo
I’m still having issues with the timer not resetting when you click the next slide. Navigating slides is a bit buggy. Any ideas?
Working site here: http://www.sixonefive.net/cleancut/
Excellent plugin,
I’m using it with jQuery 1.3.2 and it really rolls (FF,IE6/7/8, Safari, etc …) ^^
(PS : I’ve also replaced “class” with “className” on line 93 ans 101)
Hi i too was getting:
$container.data(“opts”) is undefined
added this to the code:
if ($container.data(‘opts’)!=undefined){
duration = $container.data(‘opts’).duration;
}else{
duration=200;
}
seems to have fixed it for me… not fully tested possible implications though but suits my purpose well so far.
Thanks for the excellent script!
where to add the code, QB3RT?
Hello!
Perhaps a stupid question, whith a slide..
But is it possible to get a fadefunction, instead of slide. So that the content fades from one and another?
Hi,
Excellent script, exactly what I was after for my companies homepage. One pointer for you though – you may want to remove the styling for the ‘body’, ‘pre’, ‘h1′ and ‘p’ tags in your CSS file as this may cause confusion for a lot of people when they load your CSS file after their site’s main CSS file and find their defaults overridden.
Thanks for your efforts!
Phil
@chestah and anyone else with the “$container.data(‘opts’) is undefined” problem:
I’ve improved QB3RT’s fix and hopefully the following will resolve your problems; replace line 44 of karmic-flow-0.2.js with the following line:
duration = ($container.data(‘opts’)!=undefined) ? $container.data(‘opts’).duration : 200,
(Note the comma at the end)
What this does is check whether $container.data(‘opts’) is defined, and if it’s not, set a default value of 200. This problem is not appearing for me on any other line in that file where duration is defined, so hopefully this will be the only required fix.
@Phil, that certainly is an improvement, I really need to brush up on Javascript short notation.
didn’t work on safari..
javascript error IE6/7
@neo, safari works fine for me, both on macbook and iphone…
Hi Kean,
Thanks for the great slideshow. I am wondering if it is possible to have a crossfade or dissolve instead of the slide transition?
Cheers,
B.
My navigation contains a thumbnail image and text. When I click on the image, it just opens the page in a new browser. Does anyone know how to incorporate images in the slide navigation? (Not the forward/back/pause/play controls but the links to the slides themselves.) Any help would be hugely appreciated!
@xtianDC: I asked about the same thing. It’s good to know that I am not the only one who wondered about it, but because I didn’t get any answers I ended up using another component.