jFlow Plus: Auto Slide and Pause Demo and Tips

UPDATE: jFlow Plus has a new update and this article is no longer updated. Please go to jFlow Plus v2 to view the most recent version’s documentation, demo and download.

jQuery Sliders make a great addition to any website. The ideal slider should allow the user to flip through each slide and have a timer countdown for auto slide functionality. The jFlow plugin for jQuery is a good slider that is easy to implement, but unfortunately lacks an auto slide functionality. Let’s examine how we can extend this plugin to offer an improved jFlow slider with autoslide and pause functionality.

jFlow Plus - The Light-Weight Slider... Improved.

Introducing jFlow Plus

jFlow Plus is an extension of the original jFlow Slider to extend the original light-weight code for added functionality (auto-slide and pause functionality).

jFlow is great for loading quickly and having actual content within your slider such as headings and paragraphs for each individual slide. This is good for both user experience and search engine optimization.

jFlow Plus Demo

jFlow Plus is a free jQuery plugin that is a modified version of the popular jFlow plugin released in 2008. It is available from wordimpress.com and also jQuery.com’s plugins sections.

Download the Demo Package

View the Demo

Visit the jQuery jFlow Plus Page

Please Note: This article does not pertain to implementing with WordPress. A future article will demonstrate how to effectively implement jFlow Plus on the WordPress platform.

Implementing jFlow Plus

Ready to implement jFlow Plus onto your website? Great! Open up your favorite IDE and let’s begin. For this tutorial, I will be using Dreamweaver.

Create the HTML Framework

Create a new HTML document and name it “index.html” and save it to your root directory. If you already have an existing website then skip this step.




Load the Script in your “Head”

Download the jFlow Plus scripts available in the packages above and upload them to the appropriate directory on your website.

Upload your jQuery Scripts

Now let’s load our scripts in the between the head tags of our index.html file:

Do you Have 3 Slider Images?

Make sure that you have some images ready for you to use in the slider. In the jFlow Plus demo package available above there are 3 images of Yosemite that you can feel free to use.

jFlow Slider Images

Add the jFlow Slider Elements to the Page

Now that we are calling our JavaScript files and jQuery in the Head, let’s add the basic HTML framework we will will be working with to our file. Add the following right after the first openingtag:

Slide 1 jFlow Plus

Welcome to the First Slide!

We hope you enjoy the jFlow Plus Slider – a light-weight slider for your web design needs. Read More!

Slide 2 jFlow Plus

Hey you made it to the Second Slide!

We Know you enjoy this plugin… it’s not too hard to implement, right? Read More!

Slide 3 jFlow Plus

Woah You’re on the Third Slide

You’ve completed quiet the journey! All the way from slide 1 to slide 3… congratulations! Read More!

Prev Next

Notice that we are wrapping our content with span tags. We use span tags because if you used div tags it would interfere with jFlow Plus. Ok great, now that we have the scripts and HTML framework in place let’s fire up the jFlow.

Initialize the jFlow Slider

Now that we have the scripts in place for the jFlow slider to work we need to initialize the jFlow scripts once the DOM is ready. To do this we will add the following bit of code to our head right after the jQuery and jFlow scripts:

Add the CSS to the Head

Cool, now we have out scripts importing on page load… the problem now is that it’s plain without and CSS magic. Let’s add a stylesheet to the head before the javascript and lay down some styles for our jFlow slider. To do this create a new directory called “styles” and add a new file called “style.css”:

jFlow styles directory

Above is an image of how your website’s file structure should look now. Below is the code you will need to insert above the jFlow scripts in your head.


Let’s look into the jFlow Plus CSS Further

To develop an understanding of how our jFlow Plus slider is being styled let’s take a look into the style sheet and examine exactly how our markup is being styled. You’re going to be tweaking these styles heavily when you go to implement it on your own web project.

Let’s begin with the Container

The great thing about jFlow Plus is that it takes care of a lot of the CSS for you. For the most implementations, modifying the styles for the container elements is already taken care of. For our demonstration, let’s begin by setting their positioning (we will use absolute) and styling the content within each individual slide’s spans. Also, let’s give a nice transparent background for the content for visual appeal.

#slide1 span, #slide2 span, #slide3 span {
	background: url("../images/contentBg.png") repeat top left transparent;
        position: absolute;
	bottom: 20px;
	right: 20px;
}

or you can simply:

.jFlowSlideContainer span {
	background: url("../images/contentBg.png") repeat top left transparent;
	position: absolute;
	bottom: 20px;
	right: 20px;
        padding: 10px;
}

You can now see that the text is nicely place over our sliding image in the position we declared above. As well we have also provided a nice background that can be changed per slide. Also remember that you can change up the position of the content by moving it’s span via CSS. Very flexible!

Finish Styling the Slide Content

Let’s make sure that we give each span’s content some individual styles to please our users.

#slide1 h3, #slide2 h3, #slide3 h3 {
	font-family: Georgia, serif;
	color: #FFF;
	font-size: 35px;
	font-style: italic;
	margin: 0 0 10px 0;
}

#slide1 p, #slide2 p, #slide3 p {
	font-family: Georgia, serif;
	color: #FFF;	
	margin: 0;
}

Image showing a view of the demo jFlow Plus slider:

jFlow Plus with some content

Please remember that this is just a demonstration and that you can style each content container much more individualistically than the CSS I’ve shown above.

Don’t forget the Links

Let’s add some quick style to our links to increase usability, click through rates and user experience.

.jFlowSlideContainer a {
	color: #F90;
	text-decoration: none;
	font-style: italic;
}
.jFlowSlideContainer a:hover {
	text-decoration: none;
	border-bottom: 1px dotted white;
}
.jFlowSlideContainer a:active {
	position: relative;
	top: 1px;
}

First give the slider links some color, secondly a hover effect and finally, a little click effect that gives the user an impression that the link is being pressed.

Prettyify the Previous and Next Buttons

You may have noticed that the previous and next buttons aren’t styled yet. Let’s take care of that now using some cool arrows. First, let’s get rid of the “prev” and “next” text in the jFlowPrev and jFlowNext spans and replace them with empty divs:

Now let’s style the divs with our button bg and provide hover effects. We are using an image sprite for this to save load time.

/* your overall slider container */
#container {
	width: 800px;
	height: 350px;
	position: relative;
        /* css border on top and bottom */
        border-top: 5px solid #999;
	border-bottom: 5px solid #999;
}

.jFlowNext div {
	background:url("../images/arrows.png") no-repeat scroll 0 -35px transparent;
	height:130px;
	position:absolute;
	top:110px;
	right: -50px;
	width:50px;
	cursor:pointer;
}

.jFlowPrev div {
	background:url("../images/arrows.png") no-repeat scroll -84px -35px transparent;
	height:130px;
	position:absolute;
	top:110px;
	left: -50px;
	width:50px;
	cursor:pointer;
}

The CSS above first provides some style to our slider’s container element and some nice borders on the top and bottom. Next we are styling and positioning the previous and next buttons. Notice we are using cursor: pointer; so the user knows that this is in face a clickable button.

Previous and Next Hover Effects

Now that our slider and buttons are looking pretty good it’s time to add the hover effect. Since we are using an image sprite we can just use background-position on hover to move our background image up to reveal the hover image.

.jFlowPrev div:hover {
	background-position: -84px -235px;
}

.jFlowNext div:hover {
	background-position: 0px -235px;
}

Final jFlow Plus Wrap-up

Now that you have seen some of the capabilities of jFlow Plus it’s time to go ahead and start tweaking with the demo and implementing the slider on your own websites. If you have any question please feel free to contact WordImpress or leave a comment below!

224 thoughts on “jFlow Plus: Auto Slide and Pause Demo and Tips

  1. I have used jFlow Plus and love it. Is there a way to make jFlow Plus transitions fade instead of slide? I know there are plenty of jQuery faders out there, but I have all the HTML/CSS set up for jFlow. I am wondering if someone could walk me through tweaking the JavaScript to make the slides transition by fading in/out instead of sliding off to the left. Thanks in advance.

    1. Hey there Chris, I’m actually planning on updating jFlow Plus to include fade functionality. I haven’t had time to do it lately, but I just need a block of time to sit down and slam it out. So my advice to you would be to either wait for me to code it out, code it yourself (and do share if you accomplish this) or switch to another one of jQuery’s wonderful sliders.

  2. I have used jFlow Plus and love it. Is there a way to make jFlow Plus transitions fade instead of slide? I know there are plenty of jQuery faders out there, but I have all the HTML/CSS set up for jFlow. I am wondering if someone could walk me through tweaking the JavaScript to make the slides transition by fading in/out instead of sliding off to the left. Thanks in advance.

    1. Hey there Chris, I’m actually planning on updating jFlow Plus to include fade functionality. I haven’t had time to do it lately, but I just need a block of time to sit down and slam it out. So my advice to you would be to either wait for me to code it out, code it yourself (and do share if you accomplish this) or switch to another one of jQuery’s wonderful sliders.

  3. Love the tutorial. Is there a way to adjust the time duration of each slide. I want to make each image slide after 3 seconds. I know I can adjust the slide transition time, though the actual slide time would be good to have control over. Please let me know. Thanks again. -Chris

    1. Yes you can change this by scrolling to line 286 and changing the defaul 10000ms to a number higher or lower depending on you slide time preference. timer = setInterval(function() { $(opts.next).click(); }, 10000); —— Change the 10000 above to whatever number you desire in milliseconds

  4. Hi, thanks for the tutorial!How come I get all the images showing at once and the slider does not slide the images?I’m using it in the twenty ten theme that I’m tweaking. I placed the #container box after the #header div box and before the #wrapper div box in the twenty ten theme. Ignore! It’s the custom cms I’m coding that makes it act weird, nothing wrong with this code! Thanks again for the tut!

  5. Hi, thanks for the tutorial!How come I get all the images showing at once and the slider does not slide the images?I’m using it in the twenty ten theme that I’m tweaking. I placed the #container box after the #header div box and before the #wrapper div box in the twenty ten theme. Ignore! It’s the custom cms I’m coding that makes it act weird, nothing wrong with this code! Thanks again for the tut!

    1. Hi there, If you have all images showing at once then most likely your JavaScript isn’t referenced properly or the structure of your elements is off. Oh I just saw that you said to ignore this, anyways glad you enjoyed!

  6. Currently there is not an option to use multiple sliders, although in the future this may be released in an update.

  7. Hi there, If you have all images showing at once then most likely your JavaScript isn’t referenced properly or the structure of your elements is off. Oh I just saw that you said to ignore this, anyways glad you enjoyed!

  8. Yes you can change this by scrolling to line 286 and changing the defaul 10000ms to a number higher or lower depending on you slide time preference. timer = setInterval(function() { $(opts.next).click(); }, 10000); —— Change the 10000 above to whatever number you desire in milliseconds

  9. What would also make this amazing is a history ability, so that you can link to an individual slide within the gallery, has anyone modified the gallery to suit this purpose?

      1. It’s becoming standard practice to ensure that the state of sliders, accordions, and other interactive elements of a page are persisted in the URL and can be navigated via history, so adding support for this gets my double-handed vote.Rather than write your own implementation, I suggest you should detect the presence of http://www.asual.com/jquery/address or http://benalman.com/projects/jquery-bbq-plugin (these are the two de facto plugins for URL state persistence and will likely already be used in a given page if the user cares about this kind of thing) and use whichever is found.

        1. Hmm, although I agree with you that a lot of slider and such are leaning towards this I’d say that it’s not a complete necessity. I’d even venture to say that most sliders out there do not support this form of history recognition. I’d love to implement this for jFlow Plus, but lack of time has kept me from this endeavor.

  10. What would also make this amazing is a history ability, so that you can link to an individual slide within the gallery, has anyone modified the gallery to suit this purpose?

      1. It’s becoming standard practice to ensure that the state of sliders, accordions, and other interactive elements of a page are persisted in the URL and can be navigated via history, so adding support for this gets my double-handed vote.Rather than write your own implementation, I suggest you should detect the presence of http://www.asual.com/jquery/address or http://benalman.com/projects/jquery-bbq-plugin (these are the two de facto plugins for URL state persistence and will likely already be used in a given page if the user cares about this kind of thing) and use whichever is found.

  11. Everything working great except when I resize the browser window the arrows seem to move to the middle can’t figure out this problem…

  12. Everything working great except when I resize the browser window the arrows seem to move to the middle can’t figure out this problem…

  13. How can one create a url like mydomain.com#slider2 and have the content slider on the page open on the second slide? Is it possible to set which slide to move to after opening the page?

  14. How can one create a url like mydomain.com#slider2 and have the content slider on the page open on the second slide? Is it possible to set which slide to move to after opening the page?

  15. So have you gotten your fade to work.. ? I’ve actually gotten mine to work.. by changing a few things.. I’ve added an option for fade: true or fade: false and also a pos: ‘absolute’ or pos: ‘relative’ absolute is for the fade and relative is for the sliding. I can e-mail you my code if you like.. I’ve actually modified the original jquery.flow.1.2.auto.js file not your jflow.plus but they are similar. johncarlson21@gmail.com

    1. John, I have sent you an email. I would love to have this script. I am using jquery.flow.1.2.auto.js so it would be perfect for me.

  16. So have you gotten your fade to work.. ? I’ve actually gotten mine to work.. by changing a few things.. I’ve added an option for fade: true or fade: false and also a pos: ‘absolute’ or pos: ‘relative’ absolute is for the fade and relative is for the sliding. I can e-mail you my code if you like.. I’ve actually modified the original jquery.flow.1.2.auto.js file not your jflow.plus but they are similar. johncarlson21@gmail.com

    1. John, I have sent you an email. I would love to have this script. I am using jquery.flow.1.2.auto.js so it would be perfect for me.

  17. Hey I also got some thumbs to work with my updated script if anyone wants it… just contact me.. at my website.. and I can send you the files.

  18. Hey I also got some thumbs to work with my updated script if anyone wants it… just contact me.. at my website.. and I can send you the files.

  19. Is it possible to set a slide view that is different to the slideWrap width, so you can see a little bit of the next slide too? I modified the outputted inline css in firebug and it looked good, is their an extra option at al?

      1. I managed to shoehorn this functionality into the script if anyone else would find this useful or if the developer wants it, let me know.

  20. Is it possible to set a slide view that is different to the slideWrap width, so you can see a little bit of the next slide too? I modified the outputted inline css in firebug and it looked good, is their an extra option at al?

      1. I managed to shoehorn this functionality into the script if anyone else would find this useful or if the developer wants it, let me know.

  21. Hi, is it possible to make the height of the slide relative to the content within it? Basically, auto height? I’ve height: auto; but doesn’t work.

    1. I needed the same thing. Made it work by editing the .js file. Do a search for ‘height’ and replace what comes after it with "auto". There’s three places that needs to be updated. It’s dirty but it works.

  22. Hi, is it possible to make the height of the slide relative to the content within it? Basically, auto height? I’ve height: auto; but doesn’t work.

    1. I needed the same thing. Made it work by editing the .js file. Do a search for ‘height’ and replace what comes after it with "auto". There’s three places that needs to be updated. It’s dirty but it works.

  23. Hi there, I am having trouble adding more than 3 slides. It seems to ignore any more than 3 slides- works fine otherwise. All my slides are contained in the "mySlides" tag. What am I doing something wrong?

    1. I’m also having the same issue! Eventually I was able to get a 4th slide to appear but the content was somehow hidden. Does anyone have a solution?

    2. I had difficulty figuring this out as well, so wanted to share what I learned in the process in case somebody else struggles with this! It has to do with the tag. The code supplied has this tag 3 times, which shows 3 slides. If you want to add a fourth slide (or more), you need to add this code so that the number of times this code appears equals the number of slides you want to appear. I’m more of a designer than a programmer, so hopefully I explained this in a way that makes sense!

      1. Sorry, the code I referred to was stripped out of the message. Let me try this again… (span class="jFlowControl")(/span) Obviously, don’t use parenthesis in your actual code!

        1. Thank you soooooooooo much!!! I’m also more a designer than a Programmer, so your explanation makes perfect sence!

  24. Hi there, I am having trouble adding more than 3 slides. It seems to ignore any more than 3 slides- works fine otherwise. All my slides are contained in the "mySlides" tag. What am I doing something wrong?

    1. I’m also having the same issue! Eventually I was able to get a 4th slide to appear but the content was somehow hidden. Does anyone have a solution?

    2. I had difficulty figuring this out as well, so wanted to share what I learned in the process in case somebody else struggles with this! It has to do with the tag. The code supplied has this tag 3 times, which shows 3 slides. If you want to add a fourth slide (or more), you need to add this code so that the number of times this code appears equals the number of slides you want to appear. I’m more of a designer than a programmer, so hopefully I explained this in a way that makes sense!

      1. Sorry, the code I referred to was stripped out of the message. Let me try this again… (span class="jFlowControl")(/span) Obviously, don’t use parenthesis in your actual code!

  25. Has anyone else had an FOUC (Flash of Unstyled Content) problem with their slide show? I have stopped the slides appearing vertically until the slide show is fully loaded by adding the style overflow:hidden to my slide show container div, but the top of the second slide still appears briefly. Any ideas?

    1. You might hide the slideshow and wait for the dom to fully load and for the plugin to initialize. I typically include a css file in my head, using JS, which contains CSS to hide JS stuff that has not been initialized yet (waiting for dom to load). Once the dom has loaded, and the plugin is ready, I will show the JS HTML content with jquery show() (or something similar). This allows me to show a progress bar in the background container of the div that will hold the, in this case, slideshow/slider. Does that make sense?

  26. Has anyone else had an FOUC (Flash of Unstyled Content) problem with their slide show? I have stopped the slides appearing vertically until the slide show is fully loaded by adding the style overflow:hidden to my slide show container div, but the top of the second slide still appears briefly. Any ideas?

    1. You might hide the slideshow and wait for the dom to fully load and for the plugin to initialize. I typically include a css file in my head, using JS, which contains CSS to hide JS stuff that has not been initialized yet (waiting for dom to load). Once the dom has loaded, and the plugin is ready, I will show the JS HTML content with jquery show() (or something similar). This allows me to show a progress bar in the background container of the div that will hold the, in this case, slideshow/slider. Does that make sense?

  27. That’s a nice slider, but … The needed html markup is totaly invalid. You can’t wrap inside slide content into SPAN wich is online element. The arrow control are sapn too with div inside wich is just not possible

  28. That’s a nice slider, but … The needed html markup is totaly invalid. You can’t wrap inside slide content into SPAN wich is online element. The arrow control are sapn too with div inside wich is just not possible

    1. I thought I would share the answer to this for anyone searching in the future. Place this code in the JFlow CSS file #jFlowSlide { position: absolute !important; }

    1. I thought I would share the answer to this for anyone searching in the future. Place this code in the JFlow CSS file #jFlowSlide { position: absolute !important; }

  29. I’ve managed to get this to work with wordpress, but I want the featured section to auto change rather than have people click through it. The click through works but when I’ve added the auto: true feature nothing changes. You can view the site at.. http://theseednetwork.co.uk/ anyone got any advice? Thanks!

    1. I just went back and stripped things back and fixed it myself, apparently you have to include the pointers to have the auto scroll function work. In the css I just applied ‘display: none’ via CSS.

  30. I’ve managed to get this to work with wordpress, but I want the featured section to auto change rather than have people click through it. The click through works but when I’ve added the auto: true feature nothing changes. You can view the site at.. http://theseednetwork.co.uk/ anyone got any advice? Thanks!

    1. I just went back and stripped things back and fixed it myself, apparently you have to include the pointers to have the auto scroll function work. In the css I just applied ‘display: none’ via CSS.

  31. Any way to change the behavior of jFlow when you reach the last image? My client doesn’t like the way it quickly slides back to the beginning image. She’d rather see it just go back to the first image without any visual animation. I can’t seem to find a way to do this.

    1. I’m also looking for an answer to this. I think switching the animation altogether to fade in and out would do the trick as well. Either way, I’d like to keep it from quickly sliding back to the first slide when it reaches the end. Any help would be appreciated!

  32. Script is working as local in my pc. But when i upload to server and try to see it, I just see vertical slide images and script is not working. Any idea how to fix this?

  33. Script is working as local in my pc. But when i upload to server and try to see it, I just see vertical slide images and script is not working. Any idea how to fix this?

  34. Fantastic script thank ýou very much. Is it possible to loop the slider instead of rewinding it at the last slide?

  35. Fantastic script thank ýou very much. Is it possible to loop the slider instead of rewinding it at the last slide?

  36. I have it working, brilliant. BUT, I cannot get the duration to change. No matter what value I enter, it takes about 8-10 seconds to go from frame to frame.

      1. I’m still trying to figure this one out. How do you control the time that is spent on each frame/slide?

        1. Hi Brandon, You will need to go into your jflow.plus.js file and on line 289 modify the timer slide number you see in milliseconds from 10000 to the proper time duration you’re looking for. The lower the number, the faster the slides skip. Please note: This will be an option in the new version of jFlow Plus that I will be releasing shortly. Keep an eye out for it, I just have to wrap up a few bugs and create some documentation before it’s released. Hope this helps you, Devin

  37. I have it working, brilliant. BUT, I cannot get the duration to change. No matter what value I enter, it takes about 8-10 seconds to go from frame to frame. EDIT: I just realized that duration is the transition time. What I need is to make the automatic change from slide to slide quicker. For example, with 3 images, it would stay 4 seconds on each image, or 12 seconds to cycle through all three images.

      1. I’m still trying to figure this one out. How do you control the time that is spent on each frame/slide?

        1. Hi Brandon, You will need to go into your jflow.plus.js file and on line 289 modify the timer slide number you see in milliseconds from 10000 to the proper time duration you’re looking for. The lower the number, the faster the slides skip. Please note: This will be an option in the new version of jFlow Plus that I will be releasing shortly. Keep an eye out for it, I just have to wrap up a few bugs and create some documentation before it’s released. Hope this helps you, Devin

    1. Yes you can, stay tuned… jFlow Plus v2 coming at you soon with demos and instructions how to insert as many slides as you need.

    1. Yes you can, stay tuned… jFlow Plus v2 coming at you soon with demos and instructions how to insert as many slides as you need.

  38. I’m also looking for an answer to this. I think switching the animation altogether to fade in and out would do the trick as well. Either way, I’d like to keep it from quickly sliding back to the first slide when it reaches the end. Any help would be appreciated!

  39. Any update on the new version release date? Client really on my tail regarding the loop/rewind problem. Thanks so much.

    1. It’s looking like I’ll have some time tonight to finish up some code and pushing for release either tomorrow or the day after. If you’re really in a bind let me know and maybe I can send you over something prerelease.

  40. Any update on the new version release date? Client really on my tail regarding the loop/rewind problem. Thanks so much.

    1. It’s looking like I’ll have some time tonight to finish up some code and pushing for release either tomorrow or the day after. If you’re really in a bind let me know and maybe I can send you over something prerelease.

  41. The slider works perfectly in Firefox and IE, however is completely inactive in Safari and Chrome. Any ideas what could be causing this?

  42. The slider works perfectly in Firefox and IE, however is completely inactive in Safari and Chrome. Any ideas what could be causing this?

  43. Thanks for all your work and contribution to the community. Just wondering if there is a new release date (even if Beta) for JFlow Plus v2. Thanks!

  44. Thanks for all your work and contribution to the community. Just wondering if there is a new release date (even if Beta) for JFlow Plus v2. Thanks!

  45. This is a beautiful slider and it looks perfect when I implement it into Firefox. However, it’s not working at ALL in IE for me?! It looks like a vertical row of images that wont display and no slider whatsoever. Does anyone at all have any suggestions for me?? Would be greatly appreciated…

  46. This is a beautiful slider and it looks perfect when I implement it into Firefox. However, it’s not working at ALL in IE for me?! It looks like a vertical row of images that wont display and no slider whatsoever. Does anyone at all have any suggestions for me?? Would be greatly appreciated…

  47. I love the slider and just used it in the last project. Unfortunately I realized late that it does not work with Internet Explorer 8.

  48. I love the slider and just used it in the last project. Unfortunately I realized late that it does not work with Internet Explorer 8.

  49. Hi there, let me begin with saying that you’ve created a great slider! But after using it in the last project, I realized that it does not work with IE8, which is a little bit of a deal breaker. Anyway, thanks for your effort and great work! Best regards, Alain

    1. I admit, this version of jFlow is a bit outdated but don’t fret! I’m releasing jFlow 2.0 soon and it’s compatible with IE7+ so keep in touch and it’ll be out in the coming week. Thanks for your feedback… if you’re in dire straights I can give you a sneak peek.

      1. Where can I find the new jflow 2.0? I’m trying to debug someone else’s jflow code and we’re having a problem with jflow crashing the browser if we try to resize it while it is loading on Mac. Any thoughts?

  50. Hi there, let me begin with saying that you’ve created a great slider! But after using it in the last project, I realized that it does not work with IE8, which is a little bit of a deal breaker. Anyway, thanks for your effort and great work! Best regards, Alain

    1. I admit, this version of jFlow is a bit outdated but don’t fret! I’m releasing jFlow 2.0 soon and it’s compatible with IE7+ so keep in touch and it’ll be out in the coming week. Thanks for your feedback… if you’re in dire straights I can give you a sneak peek.

      1. Where can I find the new jflow 2.0? I’m trying to debug someone else’s jflow code and we’re having a problem with jflow crashing the browser if we try to resize it while it is loading on Mac. Any thoughts?

  51. Hi, this is cool and I’m currently using it ona mobile site and it works! However I know this is a very late wish but if it is not already there and I’m just too dumb to figure it out, could you add a feature so that it can start from some externally specified slide other than the first, maybe it could pick this value from the query string/cookie???? wherever. If this is already implemented could someone just educate me…Thanks a million.

  52. Hi, this is cool and I’m currently using it ona mobile site and it works! However I know this is a very late wish but if it is not already there and I’m just too dumb to figure it out, could you add a feature so that it can start from some externally specified slide other than the first, maybe it could pick this value from the query string/cookie???? wherever. If this is already implemented could someone just educate me…Thanks a million.

  53. Love this!! Thanks for the time you put in! Looks awesome … but not so much in IE7, where the images fly by and then disappear. Can’t wait for your update on that!

  54. Love this!! Thanks for the time you put in! Looks awesome … but not so much in IE7, where the images fly by and then disappear. Can’t wait for your update on that!

  55. The plugin for WordPress didn’t work until I went to "Settings" > "JFlow Plus" and clicked "Update Options". For some reason, the initial settings weren’t loaded even though I activated the plugin.

  56. The plugin for WordPress didn’t work until I went to "Settings" > "JFlow Plus" and clicked "Update Options". For some reason, the initial settings weren’t loaded even though I activated the plugin.

  57. line# 155 height: $(jFS).height()+"px", The code at line# 155 should not be there as it will set the height relatively. We only want to set width relatively. Right?

  58. line# 155 height: $(jFS).height()+"px", The code at line# 155 should not be there as it will set the height relatively. We only want to set width relatively. Right?

  59. HOW TO ADD MORE PICTURES jFlow Plus v2 Compact slider is there any article / tutorial about this matter ??? Having a hard time to add over than 3 pictures. Please help me out. Thank you for your attention

  60. HOW TO ADD MORE PICTURES jFlow Plus v2 Compact slider is there any article / tutorial about this matter ??? Having a hard time to add over than 3 pictures. Please help me out. Thank you for your attention

  61. when im pressing "Next" on a last picture, slider sliding to the top across all slides ive seen. When i press "previous" on the first picture of slider, slider goest to end across all slides. Is a problem have a solve?

  62. when im pressing "Next" on a last picture, slider sliding to the top across all slides ive seen. When i press "previous" on the first picture of slider, slider goest to end across all slides. Is a problem have a solve?

  63. hi!!! i dont know this program even I dont know to speak english just I wolud like to know if is the same to use dreamwevar instead of jflow???

    1. Hi, jflow and dreamweaver are different things, while jflow its a library of jQuery, DreamWeaver is a IDE, or an program to design an HTML content or with a different languaje, as PHP. Saludos!, jFlow y DreamWeaver son cosas diferentes, mientras jFlow es una libreria de jQuery, DreamWeaver es un IDE, o un programa para diseñar contenido HTML o con otro lenguaje diferente, como PHP.

  64. It’s working great. I was wondering how I could change how it automatically goes through the slides though. Ideally, I would like it to stay on the first slide and only move through the slides if the arrows were clicked. Any help would be awesome. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *