Sorry if this is an annoying noobie question... but I'd like the transition for the Nivo slideshow to be a simple fade between slices - but I'm having no luck changing this. Could somebody point me in the right direction and/or provide a few pointers?

Many thanks!

Files: 
CommentFileSizeAuthor
#6 nivoslider.jpg244.19 KBcyper983

Comments

onyudo’s picture

OK, so after mucking about in the jquery.nivo.slider.pack.js to no avail, I finally took a peek into script.js.

I changed the code I found there to the following:

(function ($) {
$(document).ready(function() {
/***************************************************************************
* Slideshow
**************************************************************************/
$('#banner #slider').nivoSlider({
effect : 'fade',
directionNav: false
});
}); //end ready
}(jQuery));

I have 5 images in my slideshow... However, it only does the FADE transition on some of them - not all.

Is there something I am missing?

permafix’s picture

This is my code. I have 7 images and it work fine.

(function ($) {
$(document).ready(function() {
/***************************************************************************
* Slideshow
**************************************************************************/
$('#banner #slider').nivoSlider({
pauseTime:5000, // How long each slide will show
effect : 'fade',
directionNav: false
});
}); //end ready
}(jQuery));

onyudo’s picture

thanks permafix... your code still didn't work on my end, though.

i got fades between some of the images. sometimes it would just jump to another image in the slideshow without any fade transition at all.

my code looks really retarded to me, but here it is. for whatever reason, defining the transition effect for each of the 5 images in my slideshow works like a charm:

(function ($) {
$(document).ready(function() {
/***************************************************************************
* Slideshow
**************************************************************************/
$('#banner #slider').nivoSlider({
effect : 'fade,fade,fade,fade,fade',
directionNav: false
});
}); //end ready
}(jQuery));

aembke’s picture

Fixed it, or at least if you're looking to change the 'default' transition across all slideshows on your site.

sites/all/libraries/nivo-slider/jquery.nivo.slider.js

---------------------

...all the way on the bottom

//Default settings
$.fn.nivoSlider.defaults = {
effect: 'fade', //change this from 'random' to whatever
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
controlNavThumbs: false,
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true,
pauseOnHover: true,
manualAdvance: false,
captionOpacity: 0.8,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};

Hope that helps

manimaran.g’s picture

go views ---Format---Settings--Style options --- you can play with it.

cyper983’s picture

StatusFileSize
new244.19 KB

Hi, try to set "Fade" transition in each slide options of your slider. It worked for me.

Regards.

urmoucher’s picture

What is the menu chain for that? I can't find a transition setting on any page having to do with slideshow.

urmoucher’s picture

Where is there a Views menu pick? All I have are the following:
Dashboard (View and customize your dashboard.)
Content (Administer content and comments.)
Structure (Administer blocks, content types, menus, etc.)
Appearance (Select and configure your themes.)
People (Manage user accounts, roles, and permissions.)
Modules (Extend site functionality.)
Configuration (Administer settings.)
Reports (View reports, updates, and errors.)
Help (Reference for usage, configuration, and modules.)

cyper983’s picture

Hi,
it should be in admin/structure/nivo-slider/options address or Structure -> Nivo Slider -> Options