jFlow Plus


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

After installing the plugin just write something like:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<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)

The Settings menu in the admin panel for customization.

  • Pingback: Pritesh Gupta på "jFLow Plus" - CyberMaster

  • Pingback: jFlow Plus: Awesome WordPress Slider Plugin | PriteshGupta.com

  • Tony Thompson

    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?

  • Joe

    very nice!
    with an additional “display time per slide” in the settings, it would be perfect

  • http://www.priteshgupta.com Pritesh Gupta

    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. :-)

  • http://www.priteshgupta.com Pritesh Gupta

    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.

  • http://www.priteshgupta.com Pritesh Gupta

    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. :-)

  • http://www.priteshgupta.com Pritesh Gupta

    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. :-)

  • Joe

    wow. thx for the quick implementation!

  • http://twitter.com/mayoff Jason Mayoff

    Thanks for the great plugin. Looks awesome and works great.

  • Lee

    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
     

  • http://www.priteshgupta.com Pritesh Gupta

    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? 

  • Asiansexynine

    Doesn’t work with my WP3.2.1 all my js scripts were stop by your plugin.

  • Wenters

    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. 

  • http://www.priteshgupta.com Pritesh Gupta

    Umm yeah, this is a jQuery conflict. You might try removing the jQuery initialization line from the other plugin or this. 

  • http://www.facebook.com/Ajoyshop Trevor D Kincaid

    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. 

  • http://www.priteshgupta.com Pritesh Gupta

    “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.  

  • http://www.facebook.com/Ajoyshop Trevor D Kincaid

    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. 

  • http://www.priteshgupta.com Pritesh Gupta

    Umm, you can do that by manipulating the CSS.

  • Allansaro

    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? 

  • Christian

    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.

  • Christian

    It would also be courteous to add a ‘register_uninstall_hook’ method to remove your options from the database when the plugin is uninstalled.

CssChopper PSD to HTML Christmas Offer


Advertise Here