Best way to integrate mdbootstrap pro in a wordpress templat

Mateusz Łubianka staff commented 5 years ago

Hi @a.mendoza.contact@gmail.com,

Can you show me how did you try to do this now? I'll try to help you.

Best,

a.mendoza.contact@gmail.com commented 5 years ago

Hi Mateusz,

Sorry for the delay. Is a bit hard to follow up on this platform, as I don´t receive any email or notification when you reply. I will check this daily now onwards.

I'm adding the MDB files in the functions.php

// Scripts y Styles function ablate_scripts_styles(){

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.3.1' );
wp_enqueue_style( 'mdb', get_template_directory_uri() . '/css/mdb.min.css', array(), '4.9.0' );
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css', array(), '1.0.0' );
wp_enqueue_style( 'twentyTwenty', get_template_directory_uri() . '/css/twentytwenty-no-compass.css', array(), '1.2.1' );


//Main Style
wp_enqueue_style( 'style', get_stylesheet_uri() , array(), '1.0.0' );


//Scripts
wp_enqueue_script( 'fontAwesome', get_template_directory_uri() . '/js/all.min.js', array(), '5.12.1', true);
wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.3.1', true);
wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '4.9.0', true );
wp_enqueue_script( 'ajax', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', array(), '1.10.1', true);
wp_enqueue_script( 'jQueryEvent', get_template_directory_uri() . '/js/jquery.event.move.js', array(), '1.0.0', true);
wp_enqueue_script( 'jQueryTwenty', get_template_directory_uri() . '/js/jquery.twentytwenty.js', array(), '1.0.0', true);


wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true);

} add_action('wp_enqueue_scripts' , 'ablate_scripts_styles');

And I'm including a scripts.js where I initialize all the componentnts of MDB as required in the documentation.

$(window).load(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7}); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'}); });

$('#play').on('click', function (e) { e.preventDefault(); $("#player")[0].src += "?autoplay=1"; $('#player').show(); $('#video-cover').hide(); }) $('#modal1').on('hidden.bs.modal', function (e) { $('#modal1 iframe').attr("src", $("#modal1 iframe").attr("src")); });

$('.carousel.carousel-multi-item.v-2 .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this));

for (var i=0;i<4;i++) {
  next=next.next();
  if (!next.length) {
    next=$(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}

});

$(function () { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html");

});

$(function () { var selectedClass = ""; $(".filter").click(function () { selectedClass = $(this).attr("data-rel"); $("#gallery").fadeTo(100, 0.1); $("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation'); setTimeout(function () { $("." + selectedClass).fadeIn().addClass('animation'); $("#gallery").fadeTo(300, 1); }, 300); }); });

jarallax(document.querySelectorAll('.jarallax'), { speed: 0.08, });

The weird thing is that some components work perfectly and others just don't work (Lightbox, accordion, dropdowns in contact forms.).

Right now I sorted the issu by not using this components. I have not been able of using the maing compoents that I wanted to use with the pro version.

A bit frustrated to be honest.

Mateusz Łubianka staff commented 5 years ago

Hi, If some of the component works well, could you check path of the lightbox? '$(function () { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html");'

Best,