Need to pass an URL parameter to a lightbox script

Question

I've got a page where I need to launch a video in a Magnific lightbox, but underneath it I'm adding a "Project Details" link, along with social media icons. It will look like this:

enter image description here

The plugin supports a callback:

// Initialize Magnefic Lightbox
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        iframe: {
            markup:
                '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>'+
                '<div class="after-iframe">'+
                '<div class="details-link"><i class="icon-link"></i> <a class="project-link" href="#">Project Details</a></div>'+
                '<div>[Sharing Buttons]</div>'+
                '</div>'
        },
        delegate: 'a',
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: true,
        fixedContentPos: false,
        callbacks: {
            open: function() {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object
                initShare();
            },
            close: function() {
                // Will fire when popup is closed
            }
        }
    });

When I create a post loop in WordPress, I need to grab the permalink from the page and pass it to the correct instance as a unique variable. That is, unfortunately, just a bit over my head as my JS skills aren't quite where I'd like them to be. My PHP loop template (forgoing all of the variable definitions) looks like this:

<li>
        <div class="overlay-box popup-vimeo">
            <img itemprop="image" data-interchange="[<?php echo $img_std[0]; ?>, (default)], [<?php echo $img_retina[0]; ?>, (retina)]" alt="<?php the_title(); ?>" />
            <noscript><img src="<?php echo $img_std[0]; ?>" alt="<?php the_title(); ?></noscript>
            <div class="details">
                <h3><?php the_title(); ?></h3>
                <p><?php echo get_the_excerpt(); ?></p>
                <p class="details-link mobile-only"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                <p class="tiny button alignright"><i class="icon-play"></i> Play Video</p>
            </div>
            <a class="play-it desk-only" href="<?php echo $thisvid; ?>" title="{<?php the_title(); ?> - Watch Video}"><span></span></a>
    </li>

As best I can figure, the click capture being used in this solution is going in the right direction.

Once I know how to add the callback and get the "Project Details" link to function, then I should be able to apply that same technique to pass social media links. That'll make a nice practice exercise for me once I have an initial solution.

I really, really, really need a helping hand on this first part though, as I haven't had ot do this before and my understanding of JS scopes could be much stronger than it is =/

Imperative · Accepted Answer · 2014-05-27 04:01:20Z

Don't you just love it when you spend all weekend trying to do something the hard way, only to solve it with two lines of code? Ahh, sweet experience. This is how it's won.

The Magnific plugin includes several callbacks, which you can read about in (not quite enough) detail in the API documentation. Unfortunately, parts of the documentation are incomplete, as mentioned by the developer here.

As stated in the API "In each callback this is $.magnificPopup.instance"

What isn't said, is that in order to access the objects below the instance, you need to target this.st.el and not this.el

/cue lightbulb icon graphic

My ultimate solution was to put the target link in a data attribute in the source like this:

data-target="<?php the_permalink(); ?>"

I then accessed that target in the "open" callback, and dynamically applied it to the "details link" under my pop-up:

callbacks: {
    open: function() {
        var $target = this.st.el.context.dataset.target;
        $('a.project-link').attr('href', $target);
    }
}

Easy peas. It's repeatable for all the social media sharing links as well, so long as I've encoded the necessary data in other attributes.

Hopefully somebody stumbles on this, some day, and finds it useful. If you do, please note that none of this parsed data makes SEO happy, so it should be included elsewhere if you need it spidered.

Janek · Accepted Answer · 2014-06-13 08:43:25Z

0

Excellent post.

Can you give an example how you implemented social media sharing links. I managed to add Pinit and Facebook buttons but I’ve got stuck on Google+.

Your idea of using data attributes and callback is quite interesting.

answered Jun 13, 2014 at 8:43

Janek

1

2 Comments

Imperative Over a year ago

Well, the whole thing is kind of a dirty hack because I'm targeting all of the links at once. I probably should have used the jQuery $(this) to capture just the one I was working on, so I'll go back and revisit things now with a little more perspective. For sharing though, I created another data target and called share-url. From there, I let sharrre.com do the heavy lifting and just included a target element: pastebin.com/303ra7Uv

Imperative Over a year ago

Here, you'll see a slightly more refined approach using the Froogaloop Vimeo API. I had the exact same problem with the seekTo function on multiple links but in this case I couldn't afford the blunt approach. Here's how I solved it much more elegantly: pastebin.com/qmfZzd6b

Collectives™ on Stack Overflow

Need to pass an URL parameter to a lightbox script

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related