jFlow Plus can be used to create simple image sliders with text content in a beautiful manner, it can be used within articles as well as theme files. It does not modify any other images or galleries. You can see its live demo here
Huge changes form version 1.2.2 to version 2.0.0, older users please backup current plugin before updating.
After installing the plugin just write something like:
1 2 3 | [jflow]
[jflowslide imgpath="FullPathOfImage" imgalt="ImageAlt" heading="HeadingOfSlide" slidetext="SlideText" linktitle="LinkTitle"]
[/jflow] |
Where [jflow] and [/jflow] are the beginning and ending of jFlow Plus slider respectively, keep on adding as many [jflowslide imgpath="FullPathOfImage" imgalt="ImageAlt" heading="HeadingOfSlide" slidetext="SlideText" linktitle="LinkTitle"] for as many slides you want.
To implement directly in theme files, use:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div id="container">
<div id="jFlow">
<div id="slide1">
<img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
<span><h3>First Slide Heading</h3><p>First Slide Text.
<a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide2">
<img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
<span><h3>Second Slide Heading</h3><p>Second Slide Text.
<a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide3">
<img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
<span><h3>Third Slide Heading</h3><p>Third Slide Text.
<a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
</div>
<div id="jFlowController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
<span class="jFlowPrev"><div></div></span>
<span class="jFlowNext"><div></div></span>
</div> |
jFlow Plus is originally by Devin Walker with code from ktan
NOTE: This plugin also removes wpautop filter for its functionality.
You can customize these in the Settings section:
- Width of Slider.
- Height of Slider.
- Time to transition one slide.
- Enable/Disable Autoplay.
- Display time per slide.
Installation
- Download the latest version.
- Extract it in the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Customize the plugin in the Settings > jFlow Plus.
Frequently Asked Questions
For any query, ask me here or comment below.
Screenshots(Click for larger image)
Hi Pritesh – Nice work. But for those of us that are code illiterate, would some kind of shortcode be doable? Or a nice media gallery tool?
very nice!
with an additional “display time per slide” in the settings, it would be perfect
Hi Joe,
Yes you can change the display time of each slide by scrolling to line 286 in the .js file, where you will see a code snippet like this:
timer = setInterval(function() {
$(opts.next).click();
}, 10000);
And you can change the 10000 your desired time in milliseconds, I will try to implement your suggestion in future versions of jFlow Plus.
Ha, yeah, shortcodes are cool, but I didn’t feel necessity of it, in the above html code, you just need to replace “images/slide1.jpg” with the image location, “First Slide Heading” with slide heading, “First Slide Text.” with your text, “#” with the hyperlink of slider, and so on.
Isn’t this easy? :-/
If you are having any difficulties, contact me via the Contact Me page.
Anyways, I added this additional option to the new version(1.2.0), now you don’t need to mess up with JS code, just update.
Anyways, I added this additional option to the new version(1.2.0), now you don’t need to mess up with JS code, just update.
wow. thx for the quick implementation!
Thanks for the great plugin. Looks awesome and works great.
You plugin is incorrectly loading scripts into the page causing all
other jQuery plugins to break. This needs to be fixed immediately as it
is causing a lot of problems.
Please make sure you follow basic plugin guidelines when coding a plugin to prevent a lot more work for everyone else
Hey Lee,
Maybe something is wrong at your end, huh?
Cause it works fine for everyone else.
Also, it is not recommended to have like a dozen jQuery plugins, some of them will definitely crash. And can you please expand on plugin guidelines? I know there is a “wp_enqueue_script” but that doesn’t work for it, okay?
Doesn’t work with my WP3.2.1 all my js scripts were stop by your plugin.
Hi Pritesh, thanks for the plugin.
Just have an issue with this in combination with another plugin Carousel Gallery (jQuery). When one of the plugins is activated they work fine. But with both active neither work. Probably a Jquery issue.I want to use your JFlow Plus on the home page only and the other on subpage. Is there a way to solve this. So load the jQuery for your plugin in to a header that is only used on the homepage.
Umm yeah, this is a jQuery conflict. You might try removing the jQuery initialization line from the other plugin or this.
When I installed the plugin and added the code to my page.php template the text formatting on my pages went all screwy (I’m using wordpress) and everything got scrunched together. When I deactivate the plugin everything looks normal and all the fonts on the page return to normal. I tried removing the code above from the page.php but that doesn’t seem to fix the problem. Only deactivation worked. Is there something going on in css to make my text fonts smaller? They almost look like the small fonts your using for the “read more” section.
“NOTE: This plugin also removes wpautop filter for its functionality.”. But since you will be using it for page template php files directly, you can remove “remove_filter(‘the_content’, ‘wpautop’);” from the last line of the php file.
Thanks, removing that code fixed the problem. No more scrunched up words! I almost switched to a different slider plugin but visually yours was the absolute best. Is there any way to increase the font of the two lines of text? The read more text link is a bit too small.
Umm, you can do that by manipulating the CSS.
Hey Pritesh, thanks so much for designing such an amazing plugin. I have inserted the code into the page file, and the slider shows, however the slides are all scrunched together at once. They aren’t sliding in and out of frame. Any idea what might be causing this?
Hi Pritesh – Lee is perhaps a little blunt in his language, but he is essentially correct in what he says. Your plugin does not use the WordPress API correctly and can (and will) therefore conflict with other plugins and even WordPress core.
The functions ‘wp_enqueue_script’ and ‘wp_localize_script’ are the way to go for this plugin. That way, you can make your script dependent jQuery, but without stepping on the toes of others. See the Codex for details.
Also, ‘add_options_page’ should not be called with a user level but rather with a capability. Your plugin generates deprecated warnings at present.
It would also be courteous to add a ‘register_uninstall_hook’ method to remove your options from the database when the plugin is uninstalled.
For some reason this doesnt seem to be working correctly. The images don’t rotate, they stack on top of one another.
I am currently using jflow 1.1. And it doesn’t allow me to add multiple instances of jflow sliders on a single page. Will the new jflow allow this type of usage?
No, only one instance per page can be done with the latest version as well, however, I can suggest you to use classes instead of ids, this will solve your problem.
Hey,
I’m pretty sure you didn’t leave these instructions right:
[jflowslide imgpath="FullPathOfImage" imgalt="ImageAlt" heading="HeadingOfSlide" slidetext="SlideText" linktitle="LinkTitle"]
because youre missing linktext
also your php file doesn’t seem to support the fact that the link needs to be clicked – i modified it to
‘.$linktext.’
lastly im not sure whats going on but your jflowcontroller is only showing three spans for me so i had to hack it and add extra spans in the page it’s embedded in to be able to get all of the images to show
Is it possible to make the image link to something else on click for the wordpress plugin?
Thanks!
Hi Pritesh.
Do you know if your plugin is compatible with WordPress 3.4.1 as my implementation seems to have stopped working?
Thanks.
Hi there, I am using this dynamically, and it works brilliantly, however is there a way to code that the arrows are hidden if the user only uploads one photo? Thanks in advance.
Might I suggest an addition? I found that when I didn’t want to include prev and next buttons in my layouts, it broke the autostart fxnality. Here is my fix in jflow.plus.js
//initialize the controller
if ($(opts.prev).length == 0) { $(‘body’).append(”); }
if ($(opts.next).length == 0) { $(‘body’).append(”); }
Really only the “next” line is necessary, since that’s what autostart relies upon. I added the other for consistency. These will add innocuous spans to the end of the body for the handlers to attach to.
Better yet, this may be a better solution, does not modify the document body. Fires the fxn directly without relying on the existence of an HTML element.
var dotimer = function (x) {
if ((opts.auto) == true) {
if (timer != null) clearInterval(timer);
timer = setInterval(function () {
dotimer();
donext();
}, pause);
}
}
Also added this to initialization block after slidesNum is calculated:
//quit if there are no slides to rotate through
if (slidesNum < 2) { $(opts.controller).hide(); return; }
No sense initializing if there is nothing to rotate through.
1-I’m trying to add more slides, more than the current 3 … Is there a way to do it? For example, add 2 more slides.
2-I would like that after the last slide images continue to flow as a carousel, without going back to the first. Is it possible???