Open lightbox from included anchor

Your Account / Forums / Easy FancyBox Pro / Open lightbox from included anchor

  • Author
    • January 11, 2016 at 6:55 pm #5983

      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!

    • January 11, 2016 at 6:55 pm #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 🙂

    • January 11, 2016 at 6:55 pm #5985

      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?

    • January 11, 2016 at 6:55 pm #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

    • January 11, 2016 at 6:55 pm #5987

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

    • January 11, 2016 at 6:55 pm #5991

      That worked great! You can see it working here:

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

    • January 11, 2016 at 6:55 pm #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.