We Keep Coding

how can I visualize the lightbox directly magnific popup

with wordpress i installed magnific popup, how can I view the popup directly, without the preview of the images? in the work I am doing I need that when I click on an image, the popup opens immediately! I have tried in a thousand ways but I cannot find the most suitable solution

I apologize for the delay, I have tried two methods, one is tied directly to the plugin so the code I have to make it work is the following:
(function ($) {
$('.gallery').each(function() {
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled:true
}
});
});
}(jQuery));
it works but as previously said I would like you to be able to view the popup without the preview of the gallery!
the second option i used genesis custom block, the system works but can't find the images here is the code:
(function ($) {
$('a.btn-gallery').on('click', function(event) {
event.preventDefault();
var gallery = $(this).attr('href');
$(gallery).magnificPopup({
delegate: 'a',
type:'image',
gallery: {
enabled: true
}
}).magnificPopup('open');
});
}(jQuery));
.btn-gallery img{max-width: 100%;height: auto;padding: 30px;}
.hidden{overflow: hidden;display: none;visibility: hidden;}
<div class=" block-gallery <?php block_field('className'); ?>">
<div class="col-100 grid grid--center">
<div class="col-30">
<a href="#gallery-1" class="btn-gallery">
<?php $attachment_id = block_value( 'image-preview-1'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
</a>
</div>
</div>
<div id="gallery-1" class="hidden">
<a href="
<?php $attachment_id = block_value( 'image-1'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-2'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-3'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-4'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-5'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-6'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
</div>
</div>
this is the function that calls the block on wordpress:
<?php
use function Genesis\CustomBlocks\add_block;
use function Genesis\CustomBlocks\add_field;
/* gallery */
function register_gallery_block() {
add_block( 'gallery', array( 'icon' => 'waves' ) );
add_field( 'gallery', 'image-preview-1', array(
'control' => 'image'
) );
//gallery-1
add_field( 'gallery', 'image-1', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-2', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-3', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-4', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-5', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-6', array(
'control' => 'image'
) );
add_action( 'genesis_custom_blocks_add_blocks', 'register_gallery_block' );

bootstrap panels not collapsing

I've got a bootstrap accordion panel, and the panels aren't collapsing like they should when I click on them if they're already open. I can't figure out why. I had this working with the panels hard coded, but once I set up wp_query to load the panels, everything worked except the panels closing.
the function:
<script>
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -50
}, 500);
}
});
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
and the nested loops to generate the accordion panels:
<div class="home-contents">
<div class="container">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="faqheading"><?php the_title(); ?></h1>
<!-- <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> -->
<?php endwhile; ?>
<div class="clear"></div>
</div> <!-- row -->
</div> <!-- container -->
<div class="blog-page">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="container">
<div class="panel-group" id="accordion">
<?php
/*
* Loop through Categories and Display Posts within
*/
$post_type = 'faq';
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $post_type ) ); /* gets taxonomy from posts */
foreach( $taxonomies as $taxonomy ) :
// Gets every "category" (term) in this taxonomy to get the respective posts
$terms = get_terms( $taxonomy );
foreach( $terms as $term ) : ?>
<div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div>
<?php
$args = array(
'post_type' => $post_type,
'posts_per_page' => -1, //show all posts
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => $term->slug,
'orderby' => 'collapse id',
'order' => 'desc'
)
),
'order' => 'DESC'
);
?>
<?php
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="panel panel-default col-sm-9">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field( "faq_heading"); echo $value; ?></a>
</h4>
</div>
<div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse">
<div class="panel-body col-sm-9">
<p><?php $value = get_field( "faq_text", false, false); echo $value; ?></p>
</div>
</div>
</div> <!-- .panel -->
<?php endwhile;?>
<div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div>
<div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div>
<?php
endif; ?>
<?php endforeach;
endforeach; ?>
</div> <!-- .panel-group -->
</div><!-- end col-sm-12 -->
</div> <!-- end row -->
</div><!-- end container -->
</div><!-- end blog-page -->
</div> <!-- .container -->
Edit: Ok, I've added the following but it's still not working:
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in");
});f
});
</script>
2nd edit: I feel like the issue is that .parent isn't finding the right element, but I'm not sure how to direct it correctly.
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).addClass("collapsed");
$(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in");
$(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");;
});
});
</script>

Ok, I've solved this. I had originally built this page as part of a wordpress site, and I had included the bootstrap code at the top of the template. In the process of rebuilding the whole site, I put a new bootstrap include in the header file for the site. I left the old include at the top of my template when I got around to working on this particular page, and this redundancy of code was, somehow, causing the collapse to function incorrectly. I still don't know/understand why this was the case, but I've got it working correctly now.
I realize I didn't actually get any responses to this, but thank you to everyone who at least looked.

how to properly replace a hover with off-canvas menu

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

Twitter Bootstrap Carousel doesn't auto-start

Bootstrap carousel used to work before but it's no longer working. I can't figure it out what I have done wrong now. I' am loading jQuery on my head and Javascript external files and bootstrap JS in the footer.
I want when the document is loaded / page is loaded the Carousel should auto start. I have tried few options but no luck.
$(function(){
$('.carousel').carousel({
interval: 2000
});
});
$(function(){
$('.carousel').carousel({
interval: 2000
});
$('.carousel-control.right').trigger('click');
});
This is the JavaScript which is loaded in the footer.
$("#homeCarousel .item:first").addClass("active");
$("#homeCarousel .carousel").carousel({interval: 100});
This the HTML
<div id="homeCarousel" class="carousel slide visible-lg">
<div id="CurrentDemandMeter">
<div class="graph"><?php require_once("snippets/home_current_deman_graph.php"); ?></div>
<div class="graphDeails">
<div class="our_current_demand_label">Our current demand</div>
<div class="what_is_this_label"><a class="what_is_this_link" href="#"></a></div>
</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$i=0;
$args = array('category_name' => 'homepage-carousel',);
$loop = new WP_Query($args);
while($loop->have_posts()): $loop->the_post();
$link = get_field("learn_more_link", $post->ID);
//$link = $meta_values[0];
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$attachment = wp_get_attachment_url( $attachment->ID, 'full' );
?>
<div class="item">
<div class="fill"><img src="<?php echo $attachment; ?>" class="img-responsive"/></div>
<div class="carousel-caption">
<h1><?php echo substr(the_title($before = '', $after = '...', FALSE), 0, 30); ?></h1>
<div class="excerpt"><?php echo the_excerpt(); ?></div>
</div>
</div>
<?php
}
}
endwhile;
wp_reset_query();
?>
</div>
</div>

I' ve managed to find the Answer for my Question. For some reason "data-ride="carousel" was missing from
<div id="homeCarousel" class="carousel slide visible-lg" data-ride="carousel">
Just a simple mistake...Cheers!

How to call JavaScript from header to body?

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>";
}