What I am trying to do is load in a portfolio item on the click of a div that pertains to that portfolio item. It will load the portfolio single page and populate the view. However the slick slider is not being instantiated and does not work when loaded via ajax.
This is the code that instantiates the slick slider (usually wrapped in $(document).ready. If I enter it in the console after it the ajax gets loaded it works, however if I add it to the end of the .click() function (which will load the content via ajax) it seems to not be intantiated - and nothing in the console to tell me why not:
$('.slick-slider').slick({
lazyLoad: 'ondemand',
centerMode: true,
centerPadding: '60px',
variableWidth: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then here is my code for the click of
$(document).ready(function() {
$('#gallery-view > div').click(function() {
var toLoad = $(this).attr('id')+' #portfolio-single';
$('#ajax-view').hide('fast',loadContent);
$('#load').remove();
$('#ajax-wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('id').substr(0,$(this).attr('href'));
function loadContent() {
$('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-view').show('normal',hideLoader());
}
function hideLoader() {
$('#load').delay(1000).fadeOut('normal');
}
});
});
The link for which I am trying to accomplish this can be found at:
http://april.philiparudy.com/gallery/
If you click on a div with a circle image you will see it loading without slick slider.
I have the single slick slider working here: http://april.philiparudy.com/portfolio/abby-warner/
Is there some type of callback function I could be running to instantiate the slick slider after ajax is loaded?
Your code it's almost ok. The problem is you are assigning the click to the #gallery-view > div.
You must get an existing element, not an element you have added after the function click.so try to change that and get the parent or show me the ajax call to see where are you adding the new item.
Also change the click to onclick and the functions should not be inside the $(document).ready
Take a look below.
$(document).ready(function() {
$('#gallery-view > div').on('click', function() {
var toLoad = $(this).attr('id')+' #portfolio-single';
$('#ajax-view').hide('fast',loadContent);
$('#load').remove();
$('#ajax-wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
});
function loadContent() {
$('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-view').show('normal',hideLoader());
}
function hideLoader() {
$('#load').delay(1000).fadeOut('normal');
}
Hope it's helps!
Related
I'm trying to show 6 products in product recommendation section and I want to show them in a slider. I use slick slider to create all my sliders but at this its not working, the slick slider doesn't initialize and my slick code is perfect, what can go wrong? here's my code..
slick js 👇🏻
$(".product_recommendation_slick").not(".slick-initialized").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
prevArrow:
"<div class='slick-prev'><i class='fas fa-angle-left'></i></div>",
nextArrow:
"<div class='slick-next'><i class='fas fa-angle-right'></i></div>",
autoplay: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 420,
settings: {
slidesToShow: 1
}
}
],
});
product-recommendation.liquid 👇🏻
<div class="row product_recommendation_slick">
{% for recommendation in recommendations.products %}
{% render 'product-card',
product_card_product: recommendation
%}
{% endfor %}
</div>
Your code is probably not working because the DOM elements are not yet created when you look for them. Run your code after the window is fully loaded by using the window:
load event
fired when the whole page has loaded, including all dependent
resources such as stylesheets, scripts, iframes, and images.
// vanilla JS
window.addEventListener("load", (event) => {});
window.onload = (event) => {};
// JQuery
$(window).on('load', function() { })
or DOMContentLoaded event
fired as soon as the page DOM has been loaded, without waiting for
resources to finish loading
// vanilla JS
window.addEventListener('DOMContentLoaded', (event) => {});
window.onDOMContentLoaded = (event) => { };
// JQuery
$(window).on('ready', function() { })
I have a Shopify website and I've added a .js file which holds few javascript functions, how can I tell a <script> which function to call on demand?
I've added the file to <head> like so:
<script src="/urls/for/custom-scripts.js" defer="defer"></script>
And I want to run different functions on different pages when the page is loaded, for example, inside main-product.liquid I want to run only ".aone-slide" and on blog.liquid I want to run only ".ul.accordion", how is this possible?
I've tried to do something like that:
<script>
!function(o) {
console.log("theme.liquid last </body> script -> DOMContentLoaded");
o.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded event listener added successfully!");
$(document).on('ready', function() {
});
});
}(document);
</script>
But I don't know how to continue because the name of the function or the trigger is a div/css class.
This is the file:
(function($) {
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
}), $("ul.accordion").accordion(), $(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: !1,
fade: !0,
asNavFor: ".slider-nav"
}), $(".slider-nav").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: !1,
centerMode: !1,
focusOnSelect: !0,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
}]
})
})
I think you're confusing what a Javascript function is.
In your .js file you have only one function. This particular function is applying a slider (using the slick library) to different html elements. And it is doing that automatically when jQuery ($) is ready.
For example the first .slick call is creating the slider on the elements with class aone-slide.
So the first problem is this, if the .js is loaded (and the code you're showing seems to be correct) it should already work. It should already create the sliders, on all the pages. If it doesn't there is something missing (but I don't have enough elements to tell).
If you want to run slick only on the selected pages you should create functions inside your .js file and call them in the pages.
So your .js would become something like this
function slickAone(){
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
});
}
(without function ($)...)
and then in your page yout put
<script>
function($){
slickAone();
}
</script>
Im using jquery lazyload to load my images
but a part of my website has carouFredSel
when i click on next button the next images are not loaded because require to scroll the page, so is there any way to get images loaded on every slide?
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
}
}),
above code is the javascript to slide the carousel and below I have my lazyscript
jQuery("img.lazy").lazyload();
Any help is very appreciated!
In carouFredSel, you provide the image url in data-src like
<img data-src="image-url"/>
So to show the image in you need to configure, in OnBefore of carouFredSel like.
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
Add this lines in your carouFredSel code like
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
},
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
});
I believe I solved this issue for lazy loading images with caroufredsel
$('#youtube-playlist').carouFredSel({
width: '100%',
height: "variable",
circular: false,
infinite: false,
responsive: true,
items: {
visible: {
min: 2,
max: 4
}
},
onCreate: function(data) {
// Swap data-src for first 4 items
// console.log(data);
$(this).find("img[data-src]").each(function (i, item) {
$(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
return i < data.items.length-1;
});
},
scroll: {
onBefore: function(data) {
// Lazyload next visible thumbnails
// console.log(data.items.visible.length);
for ( i = 0; i < data.items.visible.length; i++ ) {
var $img = data.items.visible.eq(i).find('img');
$img.attr('src', $img.attr('data-src') ).removeAttr('data-src');
}
}
},
align: 'center',
auto: false,
prev: '#prev',
next: '#next'
});
onCreate : find first visible images and swap data-src to src attribute.
Scroll onBefore : Iterate through the next visible items and swap attributes.
Inspect the Network [filter img] tab in chrome dev tools and watch as the lazyload happens.
I tried adding a width value to my items to remove the console log notice from caroufredsel but it doesn't like the lazyload onCreate.
I am facing an issue in slick function.
There are two tabs, inside that i have created carousel dynamically. For the first tab,slick function is triggered on ready function but for the second tab, i have set a timeout function. On click of the second tab, carousel is dynamically created.
below is the function used,
function renderSlick() {
setTimeout(function () {
$('.item2').slick({
dots: false,
arrows: true,
swipe: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
infinite: false,
variableWidth: true,
});
}, 200);$(".item2 > .slick-next").on('click', '#challenge-second-div', function () {
console.log(4)
});
in this, slick next is not getting triggered. It is not going inside this click function. Please do suggest some solution.
I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click