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.
Related
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.
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 } ?>
My goal is to use ACF plugin to pass custom content to fancybox title area.
I load fancybox when there is images to display.
Currently i have this code to start with. How can i use ACF fields with fancybox so that every image gets its own custom field content?
For example output a link inside customHTML and a custom title using $color_desc .
Thanks!
<?php if (get_field('c_i')) { ?>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.js"></script>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.pack.js"></script>
<link href="<?php echo THEME_BASEURL?>/js/jquery.fancybox.css" rel="stylesheet">
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect: "fade",
nextEffect: "fade",
prevEffect: "fade",
padding: 0,
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
var customContent = "<div class='customHTML'>My custom content</div>";
this.title = this.title ? this.title + customContent : customContent;
},
afterShow: function () {
$(".fancybox-outer").after($(".fancybox-title"));
}
});
</script>
<div class="color_img">
<ul>
<?php
if( have_rows('c_i') ):
while ( have_rows('c_i') ) : the_row();
$image = get_sub_field('c_if');
$color_desc = get_sub_field('c_d');
$image_url = $image['sizes']['colors'];
$image_url_larger = $image['sizes']['large'];
?>
<li>
<a class="fancybox" rel="gallery01" href="<?php echo $image_url_larger; ?>"><img src="<?php echo $image_url; ?>"></a>
<div><?php echo $color_desc; ?></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
<?php } ?>
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>";
}