i’m trying to add html content into an image gallery, i was able to add span tag but when i add an a attribute magnific popup treat this as another item.

this is the code what i have:

the javascript

$('.pt-box-gallery').magnificPopup({
        delegate: 'article a',
        type: 'image',
        mainClass: 'mfp-with-zoom',
        gallery:{
            enabled:true
        },
        image: {
                titleSrc: function(item) {
                    return item.el.find('span').text();
                }
        },
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        zoom: {
            enabled: true, // By default it's false, so don't forget to enable it
            duration: 300, // duration of the effect, in milliseconds
            easing: 'ease-in-out', // CSS transition easing function 
            // The "opener" function should return the element from which popup will be zoomed in
            // and to which popup will be scaled down
            // By defailt it looks for an image tag:
            opener: function(openerElement) {
              // openerElement is the element on which popup was initialized, in this case its <a> tag
              // you don't need to add "opener" option if this code matches your needs, it's defailt one.
              return openerElement.is('img') ? openerElement : openerElement.find('img');
            }
        }
    });

and the html, i’m working with wordpress:

<?php while ( have_posts() ) : the_post(); ?>
                    <div class="large-3 columns pt-box-gallery">
                        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                            <article>
                                <a href="<?php echo $feat_image; ?>">
                                    <?php the_post_thumbnail(); ?>
                                     <span class="hide"><?php echo the_content(); ?></span> 
                                </a>
                            </article>
                    </div>  
                    <?php endwhile; ?>

thank you very much in advance!!

Read more here: add html content in magnific popup gallery


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: