Advance Custom Field Lightbox isn’t Working

Question

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">&#x274C;</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.jsWPTricks.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.

0
, , Private the Penguin 9 months 0 Answers 44 views 0

Leave an answer