I am using nivoSlider on wordpress and I want the background of my homepage to change based on the current slide image!
I have no experience in javascript nor jquery but im good in php / html5 / css3.
Thanks.
The WordPress nivo slider does not have the ability to edit callbacks on slider change (unless you edit the plugin, thus breaking compatibility with future versions). But the general jQuery plugin allows you to do just that. You would do something like this when setting up the slider:
$('#slider').nivoSlider({
// [snip]
afterChange: function(){
// Get the currently active image
var active_image = $(".nivo-controlNav .active");
// Change the class on your element and style that element with CSS
// E.g. by fetching some attribute with $(active_image).attr()
},
// [snip]
});
Related
I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?
I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. On init page loading image isn`t show (you can see just a slider dots like on screenshot below), when go to next page and than on previous one via buttons image show normally. This is only happens when set adaptiveHeight option to true in the carousel setting otherwise everything is great.
But I need that option set to true, because images not have same size.
Slider Issue preview - just show a blue dot
Slick list div preview here - div with slick-list class have a height of 1px in inline style.
After Google / StackOverflow research I found that is might because image loading before slider. I try different ways to solve this but unfortunately with no success. :(
Component Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts
Pipe Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts
One of site url to see issue:
https://www.markostalma.ninja/selected-work/gizmosphere-infographic
Thanks in advance!
Bug Fixed! This is solution for now.
// Fix slider adaptive height bug on init
slickInit(slideEvent) {
slideEvent.slick.$slider.find('img').first().on('load', () => {
let height = $('.slickImg-item').height();
$('.slick-list').height(height);
console.log("Slider Init");
});
I am successfully using FancyBox with Slider Revolution. Here is the code I have added to my slideshow custom Javascript box:
/* change revapi68 to whatever API name is being used for your slider */
var api = revapi68;
api.on(‘revolution.slide.onloaded’, function() {
jQuery(document).trigger(‘post-load’);
jQuery(this).on(‘click’, function() {api.revpause()});
jQuery(this).find(‘li’).each( function() {
var title = jQuery(this).find(‘div.Photography-Textblock’).text();
jQuery(this).find(‘div.slidelink a’).attr(‘title’, title);
});
});
This pulls the image’s caption from the media library and uses it as the caption for the image in FancyBox. The caption also ends up being a “tooltip” that shows when scrolling over the Slider Revolution image (before clicking to launch the FancyBox slideshow). I want to remove that tooltip from the Slider Revolution slide but maintain the caption in the FancyBox slide. I can remove the tooltip by eliminating the code, “var title = jQuery(this).find(‘div.Photography-Textblock’).text();” but this also eliminates the FancyBox captions. Is there a way to achieve what I want to do?
An example of a project URL with tooltips is https://donnallyarchitects.com/project/lake-union-floating-home-2/
An example of a project URL without tooltips (with eliminated code) is https://donnallyarchitects.com/project/marysville-house/
Try using data-fancybox-title to set title for fancybox only (using v2).
I am building a website with nivo slider image gallery. Its a briliant slider, but i need a slider counter like 1/6 (slide 1 of 6). I searched in the support page and google but all what i have found was the same question unanswered...
Use one of the nivo callback options.
$('#slider').nivoSlider({
afterChange: function(){
$('#counter').text( $('.controlNav .active').text() );
}
});
After each slide change it will take the text contents of the active nav control and use it to populate your counter. If you would like to provide a more specific context I could offer an explicit solution.
I'm using NivoSlider and I'm not really good on using javascript so I was wondering if how can I change the transition effects on nivo-slider? or can I change it? If it is possible, I would like to use only one transition effects on my images. Please help.
// This is the default setting:
$('#slider').nivoSlider({effect:'random'}) // Each transition effect will be random
// You can choose from the following effects:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
There are a number of "effects" the Nivo slider supports for transitions - have you seen the usage page yet? You pass an object literal to the nivoSlider call with the parameters you want to use, effect being one of them you can specify. A list of how all the parameters you can set are shown and immediately following that is a list of the available effects. You'll have to be more specific about what specific effect you want if you want a more specific answer.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({effect:"fade"});
});
</script>
Use other effects as per your need in place of "fade"