I'm trying to add glidejs to a wordpress site, it's working perfectly on desktop, but on mobile, it's not loading, seems that the JS files aren't being executed. I don't see a single error in the console. This the codepen. On mobile I see 3 pictures on top of each other.
the template
<section id="Glide" class="glide banner_desktop">
<!-- ARROWS -->
<div class="glide__arrows">
<button class="glide__arrow prev" data-glide-dir="<"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
</button>
<button class="glide__arrow next" data-glide-dir=">"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</button>
</div>
<div class="glide__wrapper">
<ul class="glide__track">
<?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?>
<?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?>
<?php if ( get_sub_field( 'image' ) ) { ?>
<li class="glide__slide">
<a href="<?php the_sub_field( 'link' ); ?>">
<img src="<?php the_sub_field( 'image' );?>" />
</a>
</li>
<?php
}
endwhile; endif;
?>
</ul>
</div>
<!-- CAROUSEL DOTS -->
<div class="glide__bullets"></div>
</section>
functions.php
wp_enqueue_script( 'glide', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.js', array('jQuery') );
wp_enqueue_script( 'glide_Js', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_JS.js', array('jQuery') );
wp_enqueue_style( 'glide_css', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.css');
wp_enqueue_style( 'glide_theme', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_theme.css');
glide.js is
var glide = function () {
// glide.min.js code which is on codepen
// https://cdn.jsdelivr.net/npm/glidejs#2/dist/glide.min.js
}();
1- Create a glide folder at the root of your theme, same level as style.css
2- In this folder put glide.min.js, glide.core.css, glide.theme.css and Create my.glide.js
3- In functions.php of your theme add :
/**
* Enqueue Glide.js scripts and styles.
*/
function glide_js_scripts_styles() {
wp_enqueue_style( 'glide-core', get_theme_file_uri( '/glide/glide.core.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.core.css' ) ) );
wp_enqueue_style( 'glide-theme', get_theme_file_uri( '/glide/glide.theme.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.theme.css' ) ) );
wp_enqueue_script( 'glide', get_theme_file_uri( '/glide/glide.min.js' ), array(), filemtime( get_theme_file_path( '/glide/glide.min.js' ) ), true );
wp_enqueue_script( 'my-glide', get_theme_file_uri( '/glide/my.glide.js' ), array('jquery'), filemtime( get_theme_file_path( '/glide/my.glide.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'glide_js_scripts_styles' );
Since Glide has no dependency, you leave the dependency array() empty for glide.min.js, but you add it to you personal one my.glide.js
4- In your my.glide.js, fire the script :
(function ($) {
new Glide('.glide', {
type: 'carousel',
startAt: 0,
perView: 3
});
// OR
$('.glide').glide({
type: 'carousel',
startAt: 0,
perView: 3
});
})(jQuery);
Please, note that you should use a child theme for your customization or all your changes will be removed in the next update of the theme that you are using.
So use a child theme and make the same steps in the child theme.
Related
I'm trying to integrate lightGallery with lightSlider on my Wordpress website, following the instructions on this page
http://sachinchoolur.github.io/lightslider/examples.html
However, I can't seem to get it to work. These are the codes I'm using.
single.php
<?php
// ACF Fields
// tl_slide_images = Gallery Field
function themeprefix_lightslider_thumbslider() {
$images = get_field('gallery'); //add your correct field name
if( $images ): ?>
<ul id="imageGallery" class="image-gallery">
<?php foreach( $images as $image ): ?>
<li data-thumb="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php endif;
}
themeprefix_lightslider_thumbslider(); ?>
lightslider-init.js
jQuery(document).ready(function($){
$('#imageGallery').lightSlider({
gallery:true,
item:1,
auto:false,
loop:true,
thumbItem: 9,
enableDrag: false,
adaptiveHeight: true,
slideMove: 1,
auto: false,
speed: 800,
pause: 4000,
onSliderLoad: function(el) {
el.lightGallery({
selector: '#imageGallery .lSSlide'
});
}
});
});
I have filed lightGallery.js and lightGallery.css and try to call them with
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/lightGallery.js"></script>
However, I suspect this is where it goes wrong, since my lightSlider is called with the following code in functions.php
/**
* LightSlider Scripts
*/
add_action( 'wp_enqueue_scripts', 'ls_scripts_styles', 20 );
function ls_scripts_styles() {
wp_enqueue_style( 'lightslidercss', get_stylesheet_directory_uri(). '/css/lightslider.min.css' , array(), '1.0.0', 'all' );
wp_enqueue_script( 'lightsliderjs', get_stylesheet_directory_uri() . '/js/lightslider.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'lightsliderinit', get_stylesheet_directory_uri() . '/js/lightslider-init.js', array( 'lightsliderjs' ), '1.0.0', true );
}
Can anyone help me? Please note that I'm still a beginner on this.
I use WordPress. Theme name Wp-tuts. My site: http://www.memuralimi.com.
I use the slider; Flexslider. When I click with the mouse, the images are changing.
I want that when the mouse comes over the thumbnail, the images change.
flexslider-home.js
jQuery(function($){
$(window).load(function() {
$('.featured-slider-preloader').hide();
$('#featured-slider').flexslider({
slideshow : true,
controlsContainer: "#featured-slider-wrap",
animation : 'fade',
pauseOnHover: true,
animationSpeed : 400,
smoothHeight : true,
directionNav: false,
prevText : '<span class="fa fa-angle-left"></span>',
nextText : '<span class="fa fa-angle-right"></span>',
controlNav : "thumbnails"
});
});
});
Content-featured-slider.php
<?php
$wpex_featured_cat = get_theme_mod( 'wpex_homepage_slider_cat' );
// Show homepage featured slider if theme panel category isn't blank
if( $wpex_featured_cat !== '' && $wpex_featured_cat !== '-1' ) {
// Get posts based on featured category
$wpex_query = new WP_Query( array(
'post_type' =>'post',
'posts_per_page' => get_theme_mod( 'wpex_homepage_slider_count', '6' ),
'no_found_rows' => true,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'ID',
'terms' => $wpex_featured_cat
)
),
'meta_query' => array(
array(
'key' => '_thumbnail_id',
)
)
) );
if( $wpex_query->have_posts() ) {
// Get Scripts
wp_enqueue_script( 'flexslider', WPEX_JS_DIR_URI .'/flexslider.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'wpex-flexslider-home', WPEX_JS_DIR_URI .'/flexslider-home.js', array( 'flexslider' ), '', true); ?>
<div id="featured-slider-wrap" class="boxed clr">
<div id="featured-slider" class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<?php
// Loop through each post
while( $wpex_query->have_posts() ) : $wpex_query->the_post(); ?>
<li class="featured-slider-slide" data-thumb="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), 490, 340, true ); ?>">
<div class="featured-slider-img">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>">
<img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), '400', '225', true ); ?>" alt="<?php echo the_title(); ?>" />
</a>
</div><!-- .featured-slider-img -->
<div class="featured-slider-caption-excerpt clr">
</div><!-- .featured-slider-caption-excerpt -->
</article><!--.featured-slider-caption -->
</li><!-- .featured-slider-->
<?php endwhile; ?>
</ul><!--.slides -->
</div><!-- .flexslider -->
<span class="featured-slider-preloader"><i class="fa fa-spinner fa-spin"></i></span>
</div><!-- #featured-flexslider -->
</div><!-- #featured-slider-wrap -->
<?php } ?>
<?php wp_reset_postdata(); ?>
<?php } ?>
I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks
I am trying to add bootstrap off canvas to wordpress page to be visible on xs devices, like this example
http://getbootstrap.com/examples/offcanvas/
My theme.js folder doesn't seems to be loaded in my wordpress page.
this is page.php code
<?php get_header(); ?>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-md-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs offcanvas-control" data-toggle="offcanvas">Sidebar <span class="glyphicon glyphicon-resize-horizontal"></span></button>
</p>
<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
<?php endwhile; else: ?>
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
this is sidebar.php
<div class="col-md-3 sidebar sidebar-offcanvas">
<?php if ( ! dynamic_sidebar( 'page' ) ): ?>
<h3>Widget Setup</h3>
<p>Please add widgets to the page widget to have them display here</p>
<?php endif; ?>
</div>
this is theme.js
jQuery(document).ready(function ( $ ) {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
this is functions.php
// Load the Theme JS
function theme_js() {
global $wp_scripts;
wp_register_script( 'html5shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
wp_register_script( 'respond', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
$wp_scripts->add_data( 'respond', 'conditional', 'lt IE 9' );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery','bootstrap_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );
Browser only loads this scripts
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
How can I call this into body from header, I've tried all the ways on the internet and it just simply doesn't work, am I missing something obvious? How would you go about this?
<script type="text/javascript" src="/wp-content/themes/dw-minion/assets/css/jstick/jquery.js"></script>
<script type="text/javascript" src="/wp-content/themes/dw-minion/assets/css/jstick/jquery.stickem.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.container').stickem();
});
</script>
I should probably add that I have multiple instances of this running as I am applying the JavaScript inside content.php on WordPress. Is that the problem?
Here is my content.php file contents:
<div class="title-wrapper">
<?php the_title(); ?>
<a href="<?php the_permalink(); ?>#comments" title="<?php comments_number( 'No Comments', '1 Comment', '% Comments' ); ?>">
<div class="commentnumber"><?php comments_number( '0', '1', '%' ); ?></div>
</a>
</div>
<div class="container">
<div class="stickem-container">
<div class="thelinks stickem">
<div class="sharelinks">
<div class="sharepinterest">
<?php echo get_simple_local_avatar( $id_or_email, $size, $default, $alt ); ?>
</div>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php the_permalink(); ?>&p[images][0]=http://www.otlcampaign.org/sites/default/files/journey-for-justice-mlk-memorial.jpg&p[title]=<?php the_title(); ?>&p[summary]=Click+to+enlarge">
<div class="sharefacebook"></div>
</a>
<a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink(); ?>">
<div class="sharetwitter"></div>
</a>
<div class="sharegoogle"></div>
</div>
</div>
<div class="post-wrapper">
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
</div>
</div><a>
Scripts should be enqueued with wp_enqueue_scripts in functions.php, not directly in other theme template files. Also, looks like the theme has jQuery bundled and that's doing_it_wrong()™.
Any Conditional Tag can be used to filter the enqueue in different pages.
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_so_18774457' ) );
function enqueue_so_18774457()
{
if( is_single() )
{
wp_enqueue_script(
'stickem-js',
get_stylesheet_directory_uri() . '/assets/css/jstick/jquery.stickem.js',
array( 'jquery' ) // This enqueues jQuery as a dependency
);
}
}
And for small scripts, like $('.container').stickem();, this can be used:
add_action( 'wp_footer', 'footer_so_18774457' );
function footer_so_18774457()
{
if( !is_single() )
return;
echo "
<script type='text/javascript'>
jQuery(document).ready(function($) { $('.container').stickem(); });
</script>";
}