WB8 Nivo Slider addon instructions and settings

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

WB8 Nivo Slider addon instructions and settings

Post by 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.
Last edited by protectourlands on Wed Jan 11, 2012 12:25 am, edited 1 time in total.
User avatar
amrajadhyaksha
 
 
Posts: 157
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by amrajadhyaksha »

This will be very useful.
Wish you can do the same with the other extras, notably jqfancy transitions and pikachoose.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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.
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by Pascal-Gilles »

Thanks a lot protectourlands for sharing :D

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 !
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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? :roll:

Thanks!
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by Pascal-Gilles »

Finally got it ! :D

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
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by 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.
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by supersonictt »

crochepattes wrote: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 :(
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by Pascal-Gilles »

You're welcome. :)

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

Cheers
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by supersonictt »

crochepattes wrote: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.
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by supersonictt »

crochepattes wrote: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 :)
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by Pascal-Gilles »

Fine !

Sincerely,
:D
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by supersonictt »

crochepattes wrote:Fine !

Sincerely,
:D
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?
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by 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. :wink:
**EDIT** : Curiously, this pauseonHover parameter doesn't exist in the standard version.

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

Cheers,
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: WB8 Nivo Slider addon instructions and settings

Post by supersonictt »

crochepattes wrote: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. :wink:
**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 :)
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: WB8 Nivo Slider addon instructions and settings

Post by Pascal-Gilles »

My pleasure.

Cheers,
8)
Post Reply