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).
Related
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 working on the project, here is my live link to the site code My link
Here u will see the owl slider of the product. when I toggle between the images the images and the whole content is moved to the top of the page behind the fixed header.
what I want is that the screen remain still and do not move or scroll to top or bottom
You need to prevent the default behavior of the anchor tag that you're using. Maybe try using this:
$(".horizontal-thumb ").click(function(e) {
// change slider image
// do something else
e.preventDefault(); // this is what you need
})
Im trying to get a Bootstrap v4 Slider to work.
Its supposed to have text to the right of the slider and this text is meant to change with each slide.
I have added in the required CSS/JS but the slider will not initialize.
Link to JS FIDDLE
My JS:
<script>
$( document ).ready(function() {
//set here the speed to change the slides in the carousel
$('#features').carousel({});
//Loads the html to each slider. Write in the "div id="slide-content-x" what you want to show in each slide
$('#carousel-text').html($('#slide-content-0').html());
// When the carousel slides, auto update the text
$('#features').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>
looks like your markup in the example is not sufficient.
you have one .carousel-inner div container without .carousel-item inside.
which of course is just one slide.
try to follow the example provided by the bootstrap documentation
put your #slide-content-x containers inside several .carousel-inner div's and remove your JS workaround for that.
you do not need any JS. it's self-initializing.
see my working example here: https://jsfiddle.net/y8h5oqfw/2/
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]
});
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.