WB8 Nivo Slider addon instructions and settings

[protectourlands]

Nivo Slider appears to be the most requested slideshow application. It seems many WB8 users are not aware that Nivoslider is now available as an addon to Slideshow and Photo Gallery. I am starting this thread to explain how to obtain the addon, and to share extra commands like speed and transition effect. These should cover most of the commonly used variables. If you know of other Nivo Slider settings not listed, please share them in this thread.

Download the Lightbox addon for WB8: http://www.wysiwygwebbuilder.com/free_extras.html. When using a Slideshow or Photo Gallery on your page, to access Nivo Slider go to Options > Type > Lightbox Gallery. Then set the Lightbox to nivo-slider.

To customize nivoslider, add any of these to "Settings" (separate each variable with comma like shown):

effect:'fade', (or use 'random', 'fold', 'sliceDown', 'sliceDownLeft', 'sliceUp', 'sliceUpDown', 'sliceUpDownLeft', 'sliceUpLeft')
slices:8, (number of slices when using that transition effect)
animSpeed:1000, (this is the slide transition effect speed in ms)
pauseTime:3000, (this is the slideshow speed in ms)
directionNav:true, (to allow Nav arrows)
directionNavHide:true, (to show Nav arrows on hover)
keyboardNav:true, (to allow use of left & right arrows to navigate)
controlNav:true, (show bullets. Use false to hide bullets)
pauseOnHover:true, (to stop animation while hovering)
manualAdvance:false, (or true - to force manual transitions and disable autoslide)

This is only available in WB8 - another great reason to upgrade if you haven't already.

[amrajadhyaksha]

This will be very useful.
Wish you can do the same with the other extras, notably jqfancy transitions and pikachoose.

[protectourlands]

I have also done:

jQuery fancytransitions - viewtopic.php?f=26&t=44665
Pikachoose - viewtopic.php?f=26&t=44667
Cycle - viewtopic.php?f=26&t=44668

Please be aware that some settings may have been preset as default in the js or css file (particularly Pikachoose). This may require editing that file in an html editor after publishing.

[protectourlands]

The add ons are zip files that self install. After downloading an add on, just click on setup. The installer will place it in the WB8 > lightbox folder for you.

[protectourlands]

Are you downloading from the WB8 site? http://www.wysiwygwebbuilder.com/free_extras.html

[Pascal-Gilles]

Thanks a lot protectourlands for sharing

Just a question : is it possible to define the position of the controlNav bullets ? I've implemented the Nivo on my home page and would like to put them on the top right of the images.

Thanks !

[Pascal-Gilles]

I've tried to tweak the CSS file nivo-slider.css in order to position the bullets in a different place (top tight of the slider for me).

Code: Select all

.nivo-controlNav a {  
        position:absolute;
        left:460px;  
        bottom:332px;
        z-index:9;
        cursor:pointer;
}  

The position is now OK but the trouble is that only the last bullet is displayed (and works)

Has anyone tried to change this position with success or is there any CSS guru here?

Thanks!

[Pascal-Gilles]

Finally got it !

If it can be of help for anyone :

Code: Select all

.nivo-controlNav {
    position:absolute;	
    top: 20px;
}
.nivo-controlNav a {
  cursor: pointer;
  position: relative;
  left:433px;
  z-index: 99;
}

In this case, bullets are positionned
20px from the top of the slider
433px from the center of the slider

Result : see URL 2 posts before.

[supersonictt]

Hello all,

I installed nivo-slider, but I have a problem with it!
When I preview the page, the next and previous arrows appear blurry, and the pagination buttons are over each other!!
I have a licensed version of WB8.

Is there anything I can do to solve the problem?

And one more thing, I also installed jqFancy Transitions, and it is there in the lightbox folder in WWB8 folder, but in the program, there is no option to choose it!!
Thanks.

[Pascal-Gilles]

Hi supersonictt,

Can you provide an URL or post the project?

Did you set it up on a new page or would it be a conflict trouble with other scripts ?

[supersonictt]

Hi supersonictt,

Can you provide an URL or post the project?

Did you set it up on a new page or would it be a conflict trouble with other scripts ?

Hello crochepattes,

I started a new project and Nivo-Slider was the first thing I put in the page.
Plus, when the images rotate, the next image will be the same as the first.
And, jqFancyTransitions is installed, but it is not showing under lightbox galleries (fancybox, prettyphoto, etc.)

I will uninstall WB8 and re-install in and report back.

Thanks for the help

EDIT:
I re-installed WB8 and then nivo-slider but still with no luck

[Pascal-Gilles]

You're welcome.

If possible, post your project here (zip with the images).

Cheers

[supersonictt]

You're welcome.

If possible, post your project here (zip with the images).

Cheers

Thank you.
Here is the project with the images in a zip file.

[Pascal-Gilles]

OK. You chose PhotoGallery item.

See the project with the SlideShow and tell me if it's what you wanted to do

Nivo2.zip

[supersonictt]

OK. You chose PhotoGallery item.

See the project with the SlideShow and tell me if it's what you wanted to do

Nivo2.zip

Oh, Man! It seems that I MUST read things first!! Although I read that nivo-slider is an addon as a photogallery, I thought it will be under PhotoGallery items!!
And YES, I should choose "SlideShow" and NOT "PhotoGallery". Thanks a million man for that, I really appreciate it

[Pascal-Gilles]

Fine !

Sincerely,

[supersonictt]

Fine !

Sincerely,

Thanks a lot
By the way the jqFancy Transition is not working as a slide show, and it is not showing in "PhotoGallery - Lightbox".. Is it working with you?

[Pascal-Gilles]

I've had time to test it in the SlideShow, it works perfectly.

BUT it appears that if you are over (hover) the slide, it freezes.
Mouse out, the transitions run.
I never used jqfancytransitions before but in the parameter settings, this behaviour can certainly be changed.
**EDIT** : Curiously, this pauseonHover parameter doesn't exist in the standard version.

Maybe this script is not compatible with PhotoGallery (?).

Cheers,

[supersonictt]

I've had time to test it in the SlideShow, it works perfectly.

BUT it appears that if you are over (hover) the slide, it freezes.
Mouse out, the transitions run.
I never used jqfancytransitions before but in the parameter settings, this behaviour can certainly be changed.
**EDIT** : Curiously, this pauseonHover parameter doesn't exist in the standard version.

Maybe this script is not compatible with PhotoGallery (?).

Cheers,

Well, yes it seems it is not compatible with PhotoGallery!
Anyways thanks a lot for these info

[Pascal-Gilles]

My pleasure.

Cheers,