Recent Topics

[Widget] b2 Nivo Slider Plugin

Started by on Mar 14, 2012 – Contents updated: Dec 16, 2014

Mar 14, 2012 06:50    

Nivo Slider is one of the most advanced and widely used slider (slideshow) on the web.
The b2 plugin of this jQuery plugin offers:

- Works Out-of-the-box
- Automatically create slider from image folder.
- Use multiple instances of the plugin.
- All available options / themes from the original plugin.

[url=http://sourceforge.net/projects/evocms-plugins/files/b2nivo_plugin/v1.1/b2nivo_plugin1.1.3.zip/download]Download v1.1.3[/url]

http://s14.postimage.org/juq6gz8hd/sssnb2.jpg

Instructions:

1. Upload the plugin folder in your ../plugins/ folder

2.Install the plugin (you will see "Nivo Slider Widget"' upon installation) under your blog settings > widgets.

3.Go to blog settings>widgets and place 'Nivo Slider Widget' anywhere in your "widget" containers.

4. That's all , really. If you are a novice user, just replace the images (1.jpg, 2.jpg) under the plugins folder.If you know your way around, you have LOTS of options to fiddle with.

[url=https://sourceforge.net/projects/evocms-plugins/files/b2nivo_plugin/]Check/download latest version [/url]

[url=http://postimage.org/]http://s7.postimage.org/nc5u32v3v/ss3445.jpg[/url]

For more detailed information on the original jQuery slider: http://nivo.dev7studios.com/

* TODO: code cleanup
* Add renderer to insert slider in post/pages

Changelog:
* @version 1.1.3: Changes:
* Fixed offset error
* removed unnecessary images & files
* @version 1.1.2: Changes:
* Fixed image titles in manual mode
* Fixed typos
* Added debug info
* @version 1.1.2: Changes:
* Removed width & height for default responsive layout
* Fixed manual mode

* @version 1.1 Changes
* Added multiple widgets (instances) ability
* updated jquery plugin version to 3.1
* @version 1.0.1
* Fixed a bug where transition effects were not taking effect.

Mar 22, 2012 16:58

Hi, this is great, just what I've been looking for. Unfortunately I can't quite get it to run smoothly with the skin I'm using, which is mystique. The transition stalls heavily and I can't seem to change the transition from the default. Any ideas what's causing this conflict?

Thanks a lot

Mar 22, 2012 20:32

I received this error notice on installation. Is this fatal?

Notice: Undefined variable: baseurl in /public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 594

Warning: Cannot modify header information - headers already sent by (output started at /public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php:594) in /public_html/blogs/inc/_core/_template.funcs.php on line 216

Mar 23, 2012 13:15

mojolazarus wrote:

I received this error notice on installation. Is this fatal?

Notice: Undefined variable: baseurl in /public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 594

Warning: Cannot modify header information - headers already sent by (output started at /public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php:594) in /public_html/blogs/inc/_core/_template.funcs.php on line 216

Nope, that's a minor bug due to a forgotten "global" in the after installation message.You can just ignore it.You've only seen it once after the install and it disapperaed later on right ?

Mar 23, 2012 14:34

Yes that's right it did just disappear, thanks. I'll leave up the slider (with default images) for a while today if you want to see the behaviour (in the footer).

Thanks

Mar 24, 2012 15:23

mojolazarus wrote:

Yes that's right it did just disappear, thanks. I'll leave up the slider (with default images) for a while today if you want to see the behaviour (in the footer).

Thanks

The problem was surely in mystique.js and i had tracked it down inside thousands of lines : D
Comment out the lines between 1399 - 1424 inside mystique.js and you should be fine.

It's not anything vital as far as i see.

Code

/*
// fixes for IE-7/8 cleartype bug on fade in/out
jQuery.fn.fadeIn = function (speed, callback) {
  return this.animate({
    opacity: 'show'
  }, speed, function () {
    if (jQuery.browser.msie) this.style.removeAttribute('filter');
    if (jQuery.isFunction(callback)) callback();
  });
};
jQuery.fn.fadeOut = function (speed, callback) {
  return this.animate({
    opacity: 'hide'
  }, speed, function () {
    if (jQuery.browser.msie) this.style.removeAttribute('filter');
    if (jQuery.isFunction(callback)) callback();
  });
};
jQuery.fn.fadeTo = function (speed, to, callback) {
  return this.animate({
    opacity: to
  }, speed, function () {
    if (to == 1 && jQuery.browser.msie) this.style.removeAttribute('filter');
    if (jQuery.isFunction(callback)) callback();
  });
};
*/

Mar 24, 2012 20:15

sam2kb wrote:

Looks nice :)

thanks.. nothing fancy unlike your plugins :D.. just saves a few steps for the regular users. (:

Mar 24, 2012 21:58

The problem was surely in mystique.js and i had tracked it down inside thousands of lines : D

It looks like the code above overrides default jQuery functions. I will probably upgrade the skin to upstream version.
Check this http://wp.digitalnature.eu/mystique/

Mar 25, 2012 01:09

sam2kb wrote:

The problem was surely in mystique.js and i had tracked it down inside thousands of lines : D

It looks like the code above overrides default jQuery functions. I will probably upgrade the skin to upstream version.
Check this http://wp.digitalnature.eu/mystique/

yeah, seems lighter and more agile.frankly i didnt like the 2.x version of the skin, as it was a heavy javascript monster, but it seems they have reduced the load on 3.x and got additional graceful degradation measures for non-js visitors.

Mar 25, 2012 10:16

Thanks a lot for putting in the effort to find the problem, I'll try commenting out that section. I had started to implement the camera slider from Diapo. On checking the link you gave Sam I see Mystique has a slider! So this is version 3.2 Does that mean that I can or can't use it in b2evolution?

Thanks again

Mar 25, 2012 11:20

Quick question about the positioning of the slider. I see you can place it in any of the standard places. Is there a way of placing it in a custom div? Otherwise it looks a bit awkward in the skin I'm using? Cheers

Mar 25, 2012 13:31

mojolazarus wrote:

Quick question about the positioning of the slider. I see you can place it in any of the standard places. Is there a way of placing it in a custom div? Otherwise it looks a bit awkward in the skin I'm using? Cheers

Sure, you can add it virtually anywhere via widget containers.Read below on how to add one.
http://forums.b2evolution.net/viewtopic.php?t=14515

Mar 25, 2012 14:47

oh great, thanks for that. I will go and read more about containers then :)

Mar 25, 2012 16:50

Hi,

I've created an appropriate div and set up a container within that:
<!-- nivo_slider -->
<div id="nivo_slider">
<?php
// "Nivo Slider" CONTAINER EMBEDDED HERE
skin_container( NT_('nivo_slider'), array(
// Contain each widget in a block:
'block_start' => '<li class="block $wi_class$"><div class="clearfix">',
'block_end' => '</div></li>',
) );
?>
</div>
<!-- nivo_slider -->

I 'see' the container in blog settings and can add the nivo slider widget. However, it is not displayed on the blog. Do you know what I'm doing wrong? Thanks tilqicom

http://www.chileno.co.uk/blogs/blog1.php

(I've highlighted it in pink)

Mar 25, 2012 20:29

Ok, I've got it with:

Code

<!-- nivo_slider -->
          <div id="nivo_slider">
          <ul class="blocks">
                      <?php
        // "Nivo Slider" CONTAINER EMBEDDED HERE
    skin_container( NT_('Nivo Slider'), array(
        'block_start'  =>  '<div class="">',
        'block_end'    =>  '</div>',
      ) );
    ?>
 
              </ul>
</div>
          <!-- end of nivo_slider -->

I'll see if I can configure it now :)

Mar 27, 2012 02:12

PHP

<?php //nivo slider container
                skin_containerNT_('Nivo Slider'), array(
                'block_start' => '<div id="$wi_ID$" class="nivo_slider $wi_class$">',
                'block_end' => '</div>',
                'block_title_start' => '<h3>',
                'block_title_end' => '</h3>',
                'list_start' => '<ul>',
                'list_end' => '</ul>',
                'item_start' => '<li>',
                'item_end' => '</li>',
                'group_start' => '<ul>',
                'group_end' => '</ul>',
                ) );    ?>

Mar 28, 2012 00:42

Hi, Iam a newbie in b2evolution and I want to know how can I embed Nivo Slider in a post? With what code? Exactly how please!!!

Thank You

Mar 28, 2012 10:47

spyrou wrote:

Hi, Iam a newbie in b2evolution and I want to know how can I embed Nivo Slider in a post? With what code? Exactly how please!!!

Thank You

You cant "embed the slider in a post" currently, you can insert the slider widget into one of your "widget containers" on your blog.

It should be easy to add rendering functionality to embed slider into post/pages, but i have to look into it.

Mar 28, 2012 12:33

I thought that I can embed it with a shortcode like Wordpress. For example [b2nivo]. So my request is to put nivoslider above the first post in the content area.
Can I do it?

P.S. Is the content are another widget container or not? Because I can not put the slider in the content area from the Widget Menu...

Thanks for your support!!!

Mar 28, 2012 14:41

spyrou wrote:

I thought that I can embed it with a shortcode like Wordpress. For example [b2nivo]. So my request is to put nivoslider above the first post in the content area.
Can I do it?

P.S. Is the content are another widget container or not? Because I can not put the slider in the content area from the Widget Menu...

Thanks for your support!!!

no, currently you can Not use it inside your "content".i could implement "[short_code]" ability.I noted this as a request, may add it in a few days, at around the weekend.

Mar 28, 2012 16:01

Thank you very much!!!
Just for my knowledge the content area is another widget container or not?

Mar 28, 2012 18:19

spyrou wrote:

Thank you very much!!!
Just for my knowledge the content area is another widget container or not?

no it's not but you can add a "widget container" before/after your content

Mar 28, 2012 18:47

Ok. Thanks a lot. I understood. The tutorial that you have linked me is more complicated than a module in Joomla. So to add a "widget container" before/after my content I have to follow the tutorial instructions or it is mote simple?

Mar 28, 2012 19:50

spyrou wrote:

Ok. Thanks a lot. I understood. The tutorial that you have linked me is more complicated than a module in Joomla. So to add a "widget container" before/after my content I have to follow the tutorial instructions or it is mote simple?

its the same as adding a "module position" in Joomla not module.

Get the code here : http://forums.b2evolution.net/viewtopic.php?p=113301#113301

and paste it where you want it to appear (before content section, header, footer, sidebar, wherever)

Go to your blog settings > widgets
You'll See a container named "Nivo Slider" there. (reload containers if necessary) Insert your widget there.

Mar 28, 2012 20:04

Thanks Tilki!!!
In which place I must paste the php code that you suggest me?

Mar 29, 2012 21:50

Hi I've got my slider running now (http://www.chileno.co.uk/blogs/blog1.php), is there a way to only show on homepage. I tried some php before, along the lines of:

$homepage = "/index.main.php";
$currentpage = $_SERVER['REQUEST_URI'];
if($homepage==$currentpage)

but couldn't get it to work. Thanks

mojo

Mar 29, 2012 23:14

mojolazarus wrote:

Hi I've got my slider running now (http://www.chileno.co.uk/blogs/blog1.php), is there a way to only show on homepage. I tried some php before, along the lines of:

$homepage = "/index.main.php";
$currentpage = $_SERVER['REQUEST_URI'];
if($homepage==$currentpage)

but couldn't get it to work. Thanks

mojo

PHP

if( is_default_page() )
{
//do sth on homepage
}

Mar 30, 2012 22:18

Thanks for porting this over!

Are all the settings currently working however? Setting a few different slider effects or animations always seem to result in the default options of random and 8/4 working. Other options such as height however seem fine.

Mar 31, 2012 08:12

daSmirnov wrote:

Thanks for porting this over!

Are all the settings currently working however? Setting a few different slider effects or animations always seem to result in the default options of random and 8/4 working. Other options such as height however seem fine.

You're welcome.Thank you too for finding that huge bug (:

You were right the effects were not taking place, neither were other options.Please redownload the latest version or simply download the one changed plugin file from SVN.

Mar 31, 2012 19:04

great, thanks for the help, I'll try that.

Apr 01, 2012 20:24

Can you help me to provide Nivo Slider to the page that I preferred and not to all the pages. Please!!! because I dont understand how can I do it...

Apr 01, 2012 23:48

spyrou wrote:

Can you help me to provide Nivo Slider to the page that I preferred and not to all the pages. Please!!! because I dont understand how can I do it...

Well that's sth i want for all widgets, but b2 does not support this feature.
You could use hacks like if ($Post->ID = X)

Apr 02, 2012 10:38

I can not understand what is "sth" also I dont know were "hacks" can be include. I think that a "shortcode" in a post or a page is the better way like wordpress!!! I'd like to use B2 than WP because of all of these "multi's". :)

Apr 02, 2012 14:34

spyrou wrote:

I can not understand what is "sth" also I dont know were "hacks" can be include. I think that a "shortcode" in a post or a page is the better way like wordpress!!! I'd like to use B2 than WP because of all of these "multi's". :)

Sth stands for "something", by which i mean i would like that feature as well.

I have actually made a "shortcode" (renderer) plugin to add-on it, however there are a few problems with it, i will post it if i can fix the issue

Apr 13, 2012 14:02

I think I remember a to do list with allow more than 4 slides. Is this possible? That's going to be a fatal flaw for some people I imagine. Cheers

Apr 22, 2012 19:15

mojolazarus wrote:

I think I remember a to do list with allow more than 4 slides. Is this possible? That's going to be a fatal flaw for some people I imagine. Cheers

That one is pretty easy..The next update will include infinite images, and hopefully a [short_code] to embed it in post/pages

Jul 03, 2012 09:13

Hi there, just wondering how your update is going and specifically if infinite images will be available. We need more than four now on the blog :)

Thanks a lot

Jul 21, 2012 11:19

Hi,

I realise that you must be busy with work/life but could you possibly give an indication of when/whether the slider will be expanded to incorporate more images? Depending on the eta I can then look into a temp alternative.

Thanks a lot

mojo

Aug 12, 2012 21:33

Plugin updated.See first post.

Frankly, it was a breeze, if i knew it would be this easy, i would do it earlier, sorry for taking this long.

The jquery (nivo) plugin inside has also been updated, it seems a lot better, responsive, faster, more themes.

mojolazarus wrote:

Hi,

I realise that you must be busy with work/life but could you possibly give an indication of when/whether the slider will be expanded to incorporate more images? Depending on the eta I can then look into a temp alternative.

Thanks a lot

mojo

Aug 14, 2012 19:59

Oh great, thanks for doing this - glad it wasn't too much of a headache for you. I'll try and implement it :)
mojo

Aug 14, 2012 21:07

mojolazarus wrote:

Oh great, thanks for doing this - glad it wasn't too much of a headache for you. I'll try and implement it :)
mojo

not at all.. just remove the old plugin and install brand new

Aug 15, 2012 18:25

Hi, I've installed the slider it looks good but I can't seem to see how to add more than 4 slides. That is, there are still only 4 sections for image name, url and caption in the settings. Am I missing something?
Thanks

Aug 16, 2012 23:07

mojolazarus wrote:

Hi, I've installed the slider it looks good but I can't seem to see how to add more than 4 slides. That is, there are still only 4 sections for image name, url and caption in the settings. Am I missing something?
Thanks

No you are right... "Manual mode" is buggy.Just set it to automatic for now.. you just wont be able to link the images.

I will fix it shortly

Aug 18, 2012 05:13

plugin updated.. it should work fine now.

I also made a renderer add-on plugin to insert slider into post/pages, it was ready but all of a sudden it broke, will upload it too when i fix that.

Aug 19, 2012 17:21

Thanks for this, I can see what you're trying to do and it makes sense. I'm getting an error though which displays in place of where the images should be. Have you any idea why that might be. Thanks a lot:
Notice: Undefined offset: 1 in public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 764

Notice: Undefined offset: 2 public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 764

Notice: Undefined offset: 3 in public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 764

Notice: Undefined offset: 4 in public_html/blogs/plugins/b2nivo_plugin/_b2nivo.plugin.php on line 764

Aug 19, 2012 19:03

The offending line is this one I think (764):
<a href="'. trim($image_links[$i]).'">

Aug 20, 2012 03:22

mojolazarus wrote:

The offending line is this one I think (764):
<a href="'. trim($image_links[$i]).'">

Well i cant replicate that offset error, so i dont know why you are getting it..
I removed the trim bit, it's unnecessary as it is for url's, see if that fixes it.

Also titles were not appearing in manual mode, fixed that and added debug information.

Aug 20, 2012 20:13

ok, that's a shame, thanks anyway. I cannot remove that section of the code as the slider then gives a further offset which is the following:
line 792 echo $manual_c;
in the latest version (1.1.2). I can't remove that because then the slider breaks completely. Maybe it's a conflict with the skin (Mystique).

Sep 02, 2012 06:56

Okay, it was caused because you either had titles or links empty.Took failsafe measures to prevent that.Please download latest v and you should be fine

mojolazarus wrote:

ok, that's a shame, thanks anyway. I cannot remove that section of the code as the slider then gives a further offset which is the following:
line 792 echo $manual_c;
in the latest version (1.1.2). I can't remove that because then the slider breaks completely. Maybe it's a conflict with the skin (Mystique).

Sep 05, 2012 09:46

That's great thanks a lot. I'm testing it now but it seems to work like a charm!

Oct 10, 2013 07:46

I'm using this plugin on a new site, but am having problems with it: there doesn't seem to be a way to add alt text to the images. Is there a way to do this?

Thanks!

Nov 11, 2013 12:12

Bump!

As it is, this plugin is creating invalid code because there's no way to add alt text to the images. I'd add fields to the plugin myself, but have no idea how to go about adding the resulting info to the jquery files.

Nov 11, 2013 12:36

Right, alt attr was not defined if titles were empty. add one line after 777

PHP

if(!empty($image_titles[$i])) {
                $manual_c .= 'alt="'.$image_titles[$i].'" title="' htmlspecialchars$image_titles[$i] ).'"';
            }

So that it looks like

PHP

if(!empty($image_titles[$i])) {
                $manual_c .= 'alt="'.$image_titles[$i].'" title="' htmlspecialchars$image_titles[$i] ).'"';
            }
            else {            $manual_c .= 'alt="image"';            }

Nov 11, 2013 13:57

Great, that fixed it. So in order to have different alt texts for each image, I would need to further add fields to the plugin?

PS. Am using the manual mode, not automatic.

Nov 11, 2013 14:08

If you enter titles for images, those titles are both added to title and the alt attribute
@fredsy wrote earlier:

Great, that fixed it. So in order to have different alt texts for each image, I would need to further add fields to the plugin?
PS. Am using the manual mode, not automatic.

Nov 11, 2013 22:09

You mean captions? I don't have fields for titles, just captions.

On another issue: I find the slider stops working on 404 error pages. See
http://puppetsinmelbourne.com.au/pelican/aboutus.php/g
The odd thing is that it works if I'm logged in, but once logged out the slider doesn't show up (the code is there, it just doesn't display). The slider works on all other pages perfectly.

Nov 14, 2013 09:05

Re: the problem of the slider not showing on 404 error pages. The plugin needs to be changed so that the jquery file is called before the slider jquery file. See changed code below:

Code

//  $slider_theme = $this->Settings->get( 'slider_theme' );
require_js( '#jquery#' );
    require_js( $plug_url . 'res/jquery.nivo.slider.pack.js', TRUE );
  /*  $slider_css = '<style type="text/css">
       <!--   ';
        if(!empty($slider_id)) $slider_css .= '#'.$slider_id.'';
        $slider_css .= '.nivoSlider {
          width:'.$slider_width.';
          height:'.$slider_height.';
        }
       -->
    </style>';
    add_headline( $slider_css );*/
// Removed line, moved to second line of quoted code
    require_css( $plugins_url . 'b2nivo_plugin/themes/default/default.css' );
    // if ( $slider_theme == 'pascal' )

Dec 16, 2013 22:35

Really nice plugin, thank you. Did you by any chance finish the shortcode plugin you mentioned? And I got a slight problem when viewing in Internet Explorer, the navigation points are not visible but I'm not sure if this is my fault.

Just wanted to mention some things I changed/added so far, maybe helpful for somebody:
In the p2nivo_plugin.php added

PHP

$dot strrpos($file'.'); 
$caption substr($file0dot 4);

plus a view lines further down I changed

PHP

echo 'title="'.$file.'"';
to
echo 'title="'.$caption.'"';

to remove the file extensions in the captions. Seems to work so far, have to check that again, I was just guessing.

Also I'm using it on a static page so I added

CSS

.hidden
  {
  display: none;
}

to the nivo-slider.css and im calling it with

HTML

<div id="nivo_slider" class="hidden">
<script type="text/javascript">
    $("#nivo_slider").removeClass("hidden");
</script>

just in case someone disabled java script.

Dec 17, 2013 12:42

yea it makes sense to hide it first, and show if js is enabled only if your slideshow content is not that important, but accesbility-wise it's not ideal for everyone, i still might need to see what's there even if i dont have js. The plugin needs to be updated that's for sure, but i dont know when.

Dec 14, 2014 09:28

I've recently upgraded to 5.2.0 and the slider plugin is no longer working. On some pages the first image in the slideshow appears, on other pages no images are appearing at all. On some pages the navigation has stopped appearing, on others it's there but clicking on the buttons doesn't do anything. I'm thinking there must be a javascript conflict somewhere (there are lots of scripts on the site) but I don't know how to debug this. Any help - especially fast help - would be appreciated as this is on a live site for a client.

Thanks!

Dec 14, 2014 10:51

I have seen that it's also failing in b2evo 5.1.2, maybe due to a jQuery conflict. What I did was to update the Nivo Slider library from version 3.1 ( included in the plugin ) to version 3.2, and it worked again. This is the project's page: https://github.com/gilbitron/Nivo-Slider, so you can download it from there.

If you preffer, use the file attached to this comment and replace the files plugins/b2nivo_plugin/res/jquery.nivo.slider.js and plugins/b2nivo_plugin/res/jquery.nivo.slider.pack.js in your site ( make a backup copy of them first ).

Regards!


Attachments:


Form is loading...

powered by b2evolution free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.