Develop Reference

How to change Javascript carousel (slick.js) settings on one page only?

I'm using Slick carousel by Ken Wheeler. I set the global settings (for the whole site) to autoplay slides like this:
autoplay: true,
autoplaySpeed: 5000,
but on one page on the site I don't want it to autoplay.
Is there any way I can override this global setting using an inline script?
Something like this:
<script>
function (iSuckAtJavaScript) {
autoplay: false,
};
</script>
?? Thank you!

There are a number of ways you could approach it depending on how your site is set up and how the plugin gets initialized. But to fill in the iSuckAtJavaScript part of your question, you could match on a specific path/page like this.
if (window.location.pathname === '/no-autoplay-page.html') {
// Initialize the carousel
}

How to disable swiping fancybox slides by mousemove

I'm using fancybox 3. I need to turn off swiping fancybox slides by mousemove. I would like to leave only control buttons next\prev.
How can I do that?
Thanks.

So, the full answer will be:
Using data-options attribute
<a data-options='{"touch" : false}' data-fancybox data-src="#myElement" href="javascript:;">Click me</a>
Or when initializing fancybox
$('selector').fancybox({
touch: false
});
From #Janis answer here: https://github.com/fancyapps/fancybox/issues/1277

Simply set touch:false to disable touch events.

The previous answer did not work for me on Fancybox 3.5.*. I had to move the touch option to inside the opts object, like as follows:
$.fancybox.open({
src: yoursource,
opts: {
touch: false
}
});

Multiple bx-slider with single pager manage all in javascript

Want to manage the 3 slider with same pager
i had tried this code but its not Working
<script language="javascript">
$('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({
//pagerCustom: '#bx-pager',
pager:true,
controls: false,
touchEnabled : true,
mode: 'fade',
easing: 'swing',
auto :true,
});
$('.mobile_left_mble,.mobile_right_mble').each(function(i){
alert (i);
slider_array[i] = $(this).bxSlider({pager:false});
});
</script>

Here is what I would do. First of all, in my JS file I would initialize all my 3 elements, in this case 'mobile_left_mble, mobile_right_mble and text_btn' with a unique BxSlider call. I would store each call in three unique variables.
var mySlider1;
var mySlider2;
var mySlider3;
jQuery(document).ready(function($){
mySlider1 = $('.mobile_left_mble').bxSlider({
pager:false
});
mySlider2 = $('.mobile_right_mble').bxSlider({
pager:false
});
mySlider3 = $('.text_btn').bxSlider({
pager:false
});
});
Once this is done, you can create your custom pager in your HTML file. Each pager-item, whether they be 'li, a href , div' (you decide), will need to have an indication to determine which slide to go to. What you can do is add inline custom attributes to your pager-item. This attribute would be, for example: data-slide="x", x being the slide index (according to BxSlider documentation, 0 being slide 1, etc).
<ul class="one-pager-to-rule-them-all">
<li><a class="pager-item" data-slide="0">1</a></li>
<li><a class="pager-item" data-slide="1">2</a></li>
<li><a class="pager-item" data-slide="2">3</a></li>
<li><a class="pager-item" data-slide="3">4</a></li>
</ul>
Back to your JS file, I would create an OnClick event for my pager-items. BxSlider is a great plugin and provides all sort of nifty and useful callbacks, methods and events you can use to your advantage. That way, by clicking a pager element, you will be able to retrieve the slide index value with jquery and call BxSlider's own 'goToSlide(x)' method. You will need to call that method on each of the previously declared variables in which we stored our slider initialization. Take the time to read bxSlider documentation.
var toSlide = $(this).attr('data-slide');
mySlider1.goToSlide(toSlide);
mySlider2.goToSlide(toSlide);
mySlider3.goToSlide(toSlide);
By doing this, all sliders will be controlled by the same pager.
Check out my jsfiddle
Is this what you wanted?

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});

try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....

You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

jquery fancybox - prevent close on click outside of fancybox

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});

<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.

If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.

There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)

The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},

you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);

Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;