dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.38k stars 3.49k forks source link

Switch galleries from a link in a magnific pop up gallery ? #1068

Closed RolandBASSET closed 6 years ago

RolandBASSET commented 6 years ago

Hello, I tried everything I could but i'm unable to create a link between two galleries with magnific pop up.

So, i want this :

link " previous project " link " next project " my photos link " previous " photo link " next photo "

My js code is : `(function ($, root, undefined) {

$(function () {

    $('.gallery-link').on('click', function () {
        $(this).next().magnificPopup('open');
    });

    // Initialize Magnific Popup Gallery + Options
    $('.gallery').each(function () {
        $(this).magnificPopup({
            delegate: 'img',
            gallery: {
                enabled: true,
                tPrev: '',
                tNext: '',
            },
            type: 'image',
        });
    });

    var imgs = $('.gallery-link img');
    imgs.each(function(){
      var item = $(this).closest('.gallery-link');
      $(this).addClass('hide');
    });
    $('.modal-gallery-link').magnificPopup({
      removalDelay: 500,
      callbacks: {
        beforeOpen: function() {
          this.st.mainClass = this.st.el.attr('data-effect');
        },
        open: function () {
          $('.modal-gallery-link').on('click', function(e){
            e.preventDefault();

            console.log(items);

            $.magnificPopup.close();

            setTimeout(function(){
              $.magnificPopup.open({
                items: items,
                type: 'image',
                gallery: {
                    enabled: true
                }
              });
            }, 500);
          });
        },
        afterClose: function () {

        },
      },
      midClick: true
    }); 
    var items = [];
    $(".gallery img").each(function() {
      items.push( {
        src: $(this).attr("data-mfp-src"),
      } );          
    });

});

})(jQuery, this); ` And here is my php code with Wordpress :

`

<?php $args = array( 'post_type' => array('projets'), 'order' => 'DESC', ); $projet = new WP_Query( $args ); if ( $projet->have_posts() ) { while ( $projet->have_posts() ) { $projet->the_post();

            $image1 = get_field('image1');
            $image2 = get_field('image2');
            $image1= wp_get_attachment_image_src( $image1, 'large');
            $image2= wp_get_attachment_image_src( $image2, 'large');
    ?>
        <div class="nav_projets">
            <a class="next modal-gallery-link" href="#gallery<?php $next_post = get_next_post();echo $next_post->ID; ?>" >Next</a>
            <a class="previous modal-gallery-link" href="#gallery<?php $previous_post = get_previous_post();echo $previous_post->ID; ?>" >Previous</a>
        </div>

        <div class="projet gallery-link">
            <img src="<?php echo the_post_thumbnail_url('small'); ?>">
        </div>
        <div class="gallery" id="gallery<?php echo get_the_ID();?>">
            <img data-mfp-src="<?php if($image1): echo $image1[0]; else: echo ""; endif;?>" src="<?php if($image1);?>" />
            <img data-mfp-src="<?php if($image2): echo $image2[0]; else: echo ""; endif;?>" src="<?php if($image2): echo $image2[0]; else: echo ""; endif;?>" />
        </div>
    <?php
        }
    } else {
        // no posts found
    }
    wp_reset_postdata();

?>`

Thanks for your help.

Roland