We Keep Coding

Slick slider code only works for Android - why isn't it working for iOS (portrait only)?

I have an issue here and would love your input. So, I have a page with 3 images side by side in desktop mode and landscape mode, and they need to turn into a slider on mobile, portrait. I used slick slider, the code below, added the newest jQuery link and worked just fine - they were all added in the same file, to test them: html, jquery cdn, jquery code. However, we are using a CMS, so when I moved the js code to a .js file and the jquery v3.5.1 loaded externally, it stopped working for iOS. Did you encounter a similar situation? Any ideas? Thanks!
$slickTest = false;
function startSlider() {
if ($(window).width() <= 540) {
if (!$slickTest) {
$(".responsive").slick({
dots: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true
});
$slickTest = true;
}
} else if ($(window).width() > 540) {
if ($slickTest) {
$('.responsive').slick('unslick');
$slickTest = false;
}
}
}
$(document).ready(function() {
startSlider();
});
$(window).on('resize', function() {
startSlider();
});
});

I managed to make it work by adding the jquery cdn in the head as opposed to how we normally add the js files as related. Adding it before the closing head tag was the solution in this case. Now it works perfectly! Thank you all :)

TypeError: $(...).lightGallery(...).destroy is not a function

I am getting this error from firefox:
TypeError: $(...).lightGallery(...).destroy is not a function
I am using following plugin for play video and show image gallery
https://github.com/sachinchoolur/lightGallery.
I want re-initialize lightGallery because I am using ajax to add element dynamically in container. It was working fine with previous version of lightGallery but it is not working with current version.
I am using following code.
// destroy previous gallery
$("#lightGallery2").lightGallery({
selector : '.image_gallery',
videojs: true,
download: false
}).destroy();
// re-initialize
$("#lightGallery2").lightGallery({
selector: '.image_gallery',
videojs: true,
download: false
});
Please suggest.
Thanks

The following code works for me:
$lg.on('onBeforeClose.lg',function(event, index, fromTouch, fromThumb){
try{$lg.data('lightGallery').destroy(true);}catch(ex){};
});

For destroy data you should add data attribute to your gallery then destroy it, for example if you apply gallery to all links:
var myGallery = 'body',
lightgallery = function() {
$( myGallery ).attr('data-lightGallery', '1');
$( myGallery ).lightGallery({selector: 'a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]'});
};
Then:
$( myGallery ).data('lightGallery').destroy(true);
lightgallery();

If it is written like most plugins/widgets, you should be calling the destroy method like this.
$("#lightGallery2").lightGallery("destroy");

You have to use the following method to destroy lightgallery version 1.2.x.
var $lg = $('#lightGallery2');
$lg.lightGallery({
selector : '.image_gallery',
videojs: true,
download: false
});
$lg.data('lightGallery').destroy(true);
Here is the docs

I simply created a global variable. It allows me to perform the desired function.
var PLUGIN; // global variable
...
if(PLUGIN) PLUGIN.data('lightGallery').destroy(true); // destroy
PLUGIN = $("#lightGallery2").lightGallery();

bootstrap carousel auto sliding when window is not active

This is the website i'm working on. The problem is even tough i used interval:false and pause:true, whenever i inspect the code or switch to another the main slider starts auto-sliding. How can i stop it for good?
$(document).ready(function () {
$('.carousel').carousel({
pause: true,
interval: false
});
This is the javascript concerning the said item.

try to remove data-ride="carousel" from the carousel HTML container and only use class="carousel"
then use interval: false only you don't need to use pause option
$(function() {
$('.carousel').carousel({
interval: false
});
});

jQuery fancyBox for Soundcloud tracks

I'm using jQuery fancybox http://fancyapps.com/fancybox/ for soundcloud tracks in my web application where it is not working. Here is the jsfiddle http://jsfiddle.net/QNHN5/106/
The soundcloud url is http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/53816732&show_artwork=true
It shows this error
The requested content cannot be loaded.
Please try again later.
Could anyone tell me the mistake I've done?
Thanks!

Since you are opening an external site, fancybox should be opened in iframe mode.
You either add the class fancybox.iframe to your selector like
<a class="fancybox fancybox.iframe" ....
or add type: "iframe" to your fancybox script options
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
type: "iframe",
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
}
});​

Taken from: Getting a "The requested content cannot be loaded" with fancy box (no errors in console though)
You just need two more things:
1). add the fancybox-media helper js file like (check your own path):
<script type="text/javascript" src="fancybox2.0.6/helpers/jquery.fancybox-media.js"></script>
2). add the helpers media option to your script:
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
padding: 0, //<-- notice I added a comma here ;)
helpers : {
media : {}
}
});

select box jquery transition not working

I am trying to use this: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
to add a transition by default to my select-box.
This is the bit of JavaScript:
$(document).ready( function() {
$("SELECT").selectBox()
$("SELECT").click( function() {
$("SELECT").selectBox('settings', {
'menuTransition': 'slide',
'menuSpeed' : 'fast'
});
});
});
I can't seem to make it slide by default. What am I doing wrong? I was able to get it to work by including a separate button exactly like in the demo page. But I want it to use the slide animation by default and can't see/figure out what is wrong?

The selectBox plugin looked interesting so I tried it out and I believe your issue is that you are trying to dynamically set the transition type to slide but you want to create the selectBox with different settings than the default ones, try this:
$(document).ready( function() {
$("SELECT").selectBox({
menuTransition : 'slide',
menuSpeed : 'fast'
});
});
Here is a working example of this solution: http://jsfiddle.net/jasper/APzDJ/