Advance Custom Field Lightbox isn’t Working

For my gallery page I’m using ACF for display images as well as image lightbox. But lightbox is not working. Even I tried debugging js function and nothing wrong with it. Here is my code.

page-gallery.php

get_header();?>

<section class=”content pull-left width-wide clear-both”>
<div class=”wrap”>
<!– Inside Content –>
<div class=”inside-content inside-page pull-left width-wide clear-both”>

<!– page header –>
<div class=”page-header pull-left width-wide”>
<!– Title –>
<h1>Gallery</h1><!– Title –>

<!– Breadcrumb –>
<ul class=”_bread”>
<li><a href=”http://localhost:8080/wordpress/” title=”Home”>Home</a></li>
<li><a href=”#” title=”Gallery” class=”active”>Gallery</a></li>
</ul>
<!– Breadcrumb –>
</div><!– // page header –>

<!– Gallery –>
<div class=”gallery pull-left width-wide”>
<!– Menu –>
<div class=”cat-menu pull-right padding-right-20″>
<!–Categories : –>

<!– <a href=”#showall” title=”Show All” class=”active”>Show All</a>
<a href=”#Category1″ title=”Category 1 ” >Category 1 </a>
<a href=”#Category2″ title=”Category 2″ >Category 2</a>
<a href=”#Category3″ title=”Category 3″ >Category 3</a> –>

<ul class=”nav nav-pills”>
<li class=”active”><a data-toggle=”pill” href=”#showall”>Show All</a></li>
<li><a data-toggle=”pill” href=”#Category1″>Category 1</a></li>
<li><a data-toggle=”pill” href=”#Category2″>Category 2</a></li>
<li><a data-toggle=”pill” href=”#Category3″>Category 3</a></li>
</ul>
</div><!– // Menu –>

<!– Gallery Items –>

<div class=”gallery-items pull-left width-wide”>

<div class=”tab-content”>
<div id=”showall” class=”tab-pane fade in active”>

<?php $images = get_field(‘gallery’);
if( $images ): ?>

<?php foreach( $images as $image ): ?>
<div class=”gallery_content_wrapper”>
<div class=”col-sm-4 col-xs-12 profile”>
<a href=”<?php echo $image[‘url’]; ?>” class=”thumb”>
<!– <div class=”gallery_image_wrapper img-hover-zoom”> –>
<div class=”panel panel-default”>
<div class=”panel-thumbnail”>
<img src=”<?php echo $image[‘sizes’][‘large’]; ?>” alt=”<?php echo $image[‘alt’]; ?>” data-toggle=”modal” data-target=”.modal-profile-lg” width=”344″ height=”215″>
<!– </div> –>
</div>
</div>
</a>
</div>
</div>

<?php if ( function_exists(‘slb_activate’) ){
$content = slb_activate($content);
}
echo $content; ?>

<?php endforeach; ?>
<?php endif; ?>

</div>
</div><!– // Gallery Items –>
</div><!– // Gallery –>

</div><!– Inside Content –>
</div>
</section><!– // Content –>

<div class=”modal fade modal-profile” tabindex=”-1″ role=”dialog” aria-labelledby=”modalProfile” aria-hidden=”true”>
<div class=”modal-dialog modal-lg”>
<div class=”modal-content”>
<div class=”modal-header”>
<button class=”close” type=”button” data-dismiss=”modal”>❌</button>
<h3 class=”modal-title”></h3>
</div>
<div class=”modal-body”>
</div>

</div>

</div>
</div>

<?php get_footer(); ?>

functions.php

<?php
function load_stylesheets(){

wp_register_style(‘isb-reset’, get_template_directory_uri() . ‘/assets/css/reset.min.css’ , array(), 1, ‘all’);
wp_enqueue_style(‘isb-reset’);

wp_register_style(‘isb-bootstrap’, get_template_directory_uri() . ‘/assets/css/bootstrap.min.css’ , array(), 1, ‘all’);
wp_enqueue_style(‘isb-bootstrap’);

wp_register_style(‘isb-fontAw’, “https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”, null);
wp_enqueue_style(‘isb-fontAw’);

wp_register_style(‘isb-pre-classes’, get_template_directory_uri() . ‘/assets/css/pre-classes.css’ , array(), 1, ‘all’);
wp_enqueue_style(‘isb-pre-classes’);

wp_register_style(‘isb-style’, get_template_directory_uri() . ‘/assets/css/style.css’ , array(), 1, ‘all’);
wp_enqueue_style(‘isb-style’);

wp_register_style(‘isb-customcss’, get_template_directory_uri() . ‘/custom.css’ , array(), 1, ‘all’);
wp_enqueue_style(‘isb-customcss’);

wp_register_style(‘isb-font’, “//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700”, null);
wp_enqueue_style(‘isb-font’);

}

function isb_loadScripts(){

wp_enqueue_script(‘isb-jqry’, “https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”, array(), null, true);

wp_enqueue_script(‘isb-jqrymigrateminjs’, “https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js”, array(), null, true);

wp_enqueue_script(‘isb-btslim’,”https://code.jquery.com/jquery-3.4.1.slim.min.js”, array(), null, true);

wp_enqueue_script(‘isb-btpopper’,”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”, array(), null, true);

wp_enqueue_script(‘isb-btjqry’,”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js”, array(), null, true);

wp_enqueue_script(‘isb-cycl’, “https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js”, array(), null, true);

wp_register_script(‘isb-custjq’, get_template_directory_uri() . ‘/assets/js/custom.jquery.js’ , array(), 1, ‘all’);
wp_enqueue_script(‘isb-custjq’);

wp_register_script(‘isb-customjs’, get_template_directory_uri() . ‘/custom.js’ , array(), 1, ‘all’);
wp_enqueue_script(‘isb-customjs’);

}

add_action(‘wp_enqueue_scripts’, ‘isb_loadScripts’);
?>

custom.css

#profile-grid { overflow: auto; white-space: normal; }
#profile-grid .profile { padding-bottom: 40px; }
#profile-grid .panel { padding: 0 }
#profile-grid .panel-body { padding: 15px }
#profile-grid .profile-name { font-weight: bold; }
#profile-grid .thumbnail {margin-bottom:6px;}
#profile-grid .panel-thumbnail { overflow: hidden; }
#profile-grid .img-rounded { border-radius: 4px 4px 0 0;}

.modal-content{
width: 67% !important;
}

.modal-dialog{
margin-top: 10%;
margin-left: 35%;
}

.modal-body{
background-color: rgba(0, 0, 0, 0.5);
}

.modal-header{
background-color: rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0,0,0,0.5);
}

custom.js

$(document).ready(function() {
$(‘a.thumb’).click(function(event){
event.preventDefault();
var content = $(‘.modal-body’);
content.empty();
var title = $(this).attr(“title”);
$(‘.modal-title’).html(title);
content.html($(this).html());
$(“.modal-profile”).modal({show:true});
});
});

Please help me with this issue.

Read more here:: Advance Custom Field Lightbox isn’t Working

Leave a Reply

Your email address will not be published. Required fields are marked *