bhadresh chotaliya
Joined
50 Experience
0 Lessons Completed
0 Questions Solved
Activity
I am creating one rails application with the latest version 6.1.3 and ruby version 2.7.2. I have one old theme and I want to integrate it into my application.
But somehow I can not able to integrate it successfully. Please check my error and integration steps below.
Error:
theme.js:26 Uncaught TypeError: $(...).ImagesLoaded is not a function
app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
require("./external/imagesloaded.min")
require("./external/isotope.min")
require("./external/simpleLightbox.min")
require("./external/theme")
Rails.start()
Turbolinks.start()
ActiveStorage.start()
All custom theme js files store in app/javascript/packs/external.
app/javascript/packs/external/theme.js
;(function($){
"use strict"
/* Isotope Fillter js */
console.log("file execute successfully");
function gallery_isotope(){
if ( $('.gallery_f_inner').length ){
// Activate isotope in container
$(".gallery_f_inner").imagesLoaded( function() {
$(".gallery_f_inner").isotope({
layoutMode: 'fitRows',
animationOptions: {
duration: 750,
easing: 'linear'
}
});
});
// Add isotope click function
$(".gallery_filter li").on('click',function(){
$(".gallery_filter li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr("data-filter");
$(".gallery_f_inner").isotope({
filter: selector,
animationOptions: {
duration: 450,
easing: "linear",
queue: false,
}
});
return false;
});
}
}
setTimeout(() => {
gallery_isotope();
$('.imageGallery1 .light').simpleLightbox();
}, 800);
})(jQuery)
I tried all possible solutions but I have 7 custom js files and each file in a minimum of 16 different kinds of functions so it's very tough to convert all js files manually.
Please guide me where I am wrong and suggest me a feasible solution. Thanks in Advance.