Open lightbox from included anchor

[Anatoliy Marchuk]

Hi there,

Love this plugin.

One of our clients (http://www.voalte.com) would like to be able to send their customers a link and have it open up a lightbox within that page. An example of a page customers will be sent is http://www.voalte.com/resources/infographics. Within that page are a number of links that open up in a lightbox when clicked. We would like to have a particular image open up on page load when clicking a link like http://www.voalte.com/resources/infographics#img-xxxx – where #img-XXXX is a unique identifier.

Can we do something like this with your plugin? And if not, do you have another solution?

For your reference, their previous website was doing this functionality here: http://hub.media/voaltebackup/resources/video. Click on the first image to see the URL change at the top. The client could paste this URL into email newsletters and have the lightbox pop up while staying on that page. Very useful. (The feature isn’t working because the website broke a little with the migration.)

Thanks for your help!

[RavanH]

Hi Anatoliy, welcome on this forum 🙂

To answer your question shortly: Yes it is possible.

The longer answer: because the lightbox is triggered by a click, you’ll need to add some jQuery javascript that will trigger a click based on the # URL identifier. You can see an example on the demo/test site http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds where you’ll notice these permalinks mentioned below each of the test cases. These are the kind of links you are looking for, I suppose?

Lower on that same page, you’ll see a script snippet that was placed on the site to trigger a click based on the # identifier. Of course, the identifier must match the ID given to the link you want to fire on page load.

So to be clear, you’ll need to (1) add that script snippet to the site and (2) give each media link that you want to have opened on page load a unique ID. Then, this ID should be appended with a # after the page URL and sent to your clients customers.

Hope that helps 🙂

[Anatoliy Marchuk]

Thanks for the detailed post! Definitely sounds doable.

So the main question is how do I set the identifier for each post? Each item is its own post within WordPress. Is there a plugin you would recommend or can I used something like the post or image ID?

[RavanH]

I’m not completely sure if I understand correctly so tell me if I’m wrong…

If I go to the example page you you gave earlier http://www.voalte.com/resources/infographics/ then I suppose each item there is created from a Portfolio Post with a Featured Image, a title and a short text. Correct?

Is that part of the theme or is that a plugin? And did you already modify the theme/plugin so that these items link not to the portfolio item itself but to the large image version or was that already the case?

In any case, to make it work, you’ll have to modify the theme/plugin to include an ID for each item link there. This ID can simply be done by adding something like

id="resource-<?php echo get_the_ID() ?>"

in the correct place in the corresponding template file. Note that (1) this only works inside a Loop and (2) an ID in HTML may not start with a number, hence the prefix.

The resulting link source should then be like

...
    <a class="w-portfolio-item-anchor" id="resource-12531" href="..."
...

Then, since you’re modifying the template already, find a good spot outside the loop where you can add

<script type="text/javascript">
window.onload = function() {
if(location.hash) { jQuery(location.hash).trigger('click'); }
};
</script>

so that it only occurs once on the resulting page source.

From then on, each item can be triggered with a corresponding URL like http://www.voalte.com/resources/infographics/#resource-12531

[Anatoliy Marchuk]

Thank you! I’ll let you know how it goes for us.

[Anatoliy Marchuk]

That worked great! You can see it working here:
http://www.voalte.com/resources/media/#go12197

Thank you for the detailed info, it really helped my team.

[RavanH]

Great! That looks good 🙂

One more tip: I notice you tried adding ?rel=0 to disable Youtube’s “Related Videos” at the end of the video URL. Adding a rel=0 is the correct approach but it needs to be &rel=0 in this case.

To be completely correct the & actually needs to be & amp; (without that space between the & and the amp;) but that’s only for strict compliance…

[Author]

Posts