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
}

Advance slick slider when image in gallery is clicked (multiple slick sliders on one page)

I came across this modification for slick slider for advancing when clicking on the current image (see below). When I implement it on my page with multiple galleries it advances all galleries when I click on one, not only the one selected. Is there a possibility to use e.g. "this" selector in here?
http://codepen.io/ethanclevenger91/pen/MYNGrN
window.onload=function(){
$slideshow = $('.slider').slick({
dots:false,
autoplay:false,
arrows:false,
adaptiveHeight: true,
slidesToShow:1,
slidesToScroll:1
});
$(".slide").click(function() {
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
};

Please see the following codepen: http://codepen.io/anon/pen/ZOGmWo?editors=1010
The main idea is to define each slider separately.
First, define an object to hold all the sliders:
var sliders = {};
Then, looping through all the sliders, extracting the ID and saving a reference to the newly defined slider in our map, indexed by the ID:
$('.slider').each(function (index, slider) {
var id = slider.getAttribute('id');
console.log(id);
sliders[id] = $(slider).slick({ ... })
});
Now, on the click handler, we determine to which slider do the clicked slide belong to, using $(this).closest('.slider') and using progressing it.
$('.slide').click(function() {
var id = $(this).closest('.slider').get(0).getAttribute('id');
var $slideshow = sliders[id];
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});

Re-apply JQuery in Meteor template

I have a template with a slick carousel, depending on some JQuery. I add this code to the template as follows:
Template.show_house.rendered = function () {
$('#carousel').slick({
dots: true,
arrows: true
});
};
This template depends on a helper:
Template.show_house.helpers({
house : function() {
return Houses.findOne({_id : Session.get("selectedHouse")});
},
...
When the session changes (user clicking on another item), the data in the template changes, but the JQuery isn't applied again, and the images are just shown as a list rather than a carousel.
I've been playing around with UI.render, but to no avail. What can I do?

I had the same problem, the things for is that i wasnt applying the event Template.foo.rendered to the specific template. Try to apply the jquery event on "rendered" to the proper template and see if it works!

In JQuery Cycle how do you get the src of the current slide?

Im trying to work out the way to find the source of the current slide using JQuery cycle. I will be taking the source and using it to match the background image of another div using the 'after' method, it will change with each slide. This is what I have so far, all I need is to correct the var slideURL:
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL = currSlide.content.find('img').attr('src');
Thanks in advance!

you can get the current source like this
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL =this.src;
}
http://jsfiddle.net/dWstA/

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.