I have setup a custom script on the first product image that uses the dragging events. But now, when I drag - the slider starts functioning. I have figured out how to disable the dragging after the page has loaded (through firebug). But how can I disable right after it's been setup by woocommerce?
I tried this:
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
But it works only partially for some reason. A little dragging does not initiate the slider dragging, but if you do a bigger slide it does.
Figured it out. Just needed to handle the errors.
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
try {
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
catch(err) {
}
}
Related
I'm using Infinite Scroll (https://infinite-scroll.com/) load a large image gallery in Wordpress. I'm also using Fancybox (https://fancyapps.com/fancybox/3/) to display those images in a lightbox.
Ideally, when the lightbox opens, the user should be able to cycle through the full image gallery (not just those currently loaded). However, Fancybox only displays images that have been loaded via Infinite Scroll prior to Fancybox being triggered. To see more images, you need to close Fancybox, scroll the page to load the additional images with Infinite Scroll, then re-open Fancybox.
Is there a way to get Fancybox to display the full image gallery, and not be constrained by the 'pages' that Infinite Scroll has currently loaded?
I'm pretty much stuck on this, so any suggestions would be welcome!
// Infinite Scroll
$container.infiniteScroll({
path: '.nextLink',
append: '.masonry-brick',
history: false,
hideNav: '.pageNav',
outlayer: msnry
});
// Fancybox
$().fancybox({
selector : '[data-fancybox="images"]',
loop: false,
});
Edit: Okay, I managed to get this working with the following:
// Infinite Scroll
$container.infiniteScroll({
path: '.nextLink',
append: '.masonry-brick',
history: false,
hideNav: '.pageNav',
outlayer: msnry
});
// Fancybox
$().fancybox({
selector: '[data-fancybox="images"]',
loop: false,
beforeShow: function(instance, current) {
// When we reach the last item in current Fancybox instance, load more images with Infinite Scroll and append them to Fancybox
if (current.index === instance.group.length - 1) { // 1. Check if at end of group
// 2. Trigger infinite scroll to load next set of images
$container.infiniteScroll('loadNextPage');
// 3. Get the newly loaded set of images
$container.on( 'load.infiniteScroll', function( event, response ) {
var $posts = $(response).find('.masonry-brick');
// 4. Set up an array to put them in
var newImages = [];
$($posts).each( function( index, element ){
// 5. Construct the objects
var a = {};
a['type'] = 'image';
a['src'] = $(this).find('a').attr('href');
// 6. Add them to the array
newImages.push(a);
});
// 7. And append to this instance
instance.addContent(newImages);
});
}
}
});
Hope this helps anyone having the same issue!
I'm trying to limits the times click on button in divi theme in wordpress but don't know how and I need help. Thank you.
You don't need Divi for this, just add a simple javascript at your code to track the clicks.
Supposing that you are using jQuery, here is the code.
var clicks = 0;
var maxClicks = 3; // set the maximum time to be clicked
var elementClassSelector = '.your-class-button';
$(elementClassSelector).on('click', function(e){
// prevent the event if we already have enought clicks
if (clicks >= maxClicks) {
e.preventDefault();
} else {
clicks++ // increase the number of clicks
}
})
Here is a link how to add a custom javascript using Divi.
Here is a link to help you add javascript or CSS in any theme.
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
I'm working with a redactor editor that uses several default buttons and a number of plugin buttons (e.g. 'fontfamily', 'fontcolor', 'fontsize'). I'd like to re-order the buttons so that the plugin buttons can be placed before (i.e. to the left of) the default buttons. This does not appear to be natively supported by the redactor API. How can I do this?
You will need to edit the plugin code, here is a very basic example of a plugin:
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.custombutton = function()
{
return {
init: function()
{
var button = this.button.add('custom-button', 'Add Button');
this.button.addCallback(button, this.custombutton.show);
},
show: function()
{
console.log('myplugin show');
};
};
You need to tweak this line (below), it will be within the init method.
var button = this.button.add('custom-button', 'Add Button');
this.button.add insert the button at the end of the toolbar by default. You can read more about the other options here http://imperavi.com/redactor/docs/api/button/
But to add at the start you will want addFirst:
var button = this.button.addFirst('custom-button', 'Add Button');
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.