Open lightbox from included anchor

Home Forums Easy FancyBox Pro Open lightbox from included anchor

This topic contains 6 replies, has 2 voices, and was last updated by  RavanH 2 years, 2 months ago.

  • Author
  • #5983

    Anatoliy Marchuk

    Hi there,

    Love this plugin.

    One of our clients ( 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 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 – 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: 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!

  • #5984


    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 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 🙂

  • #5985

    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?

  • #5986


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

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

    From then on, each item can be triggered with a corresponding URL like

  • #5987

    Anatoliy Marchuk

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

  • #5991

    Anatoliy Marchuk

    That worked great! You can see it working here:

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

  • #5992


    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…

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network