how can I visualize the lightbox directly magnific popup

Question

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

Answer 1

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' );