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 1 year, 10 months ago.

  • Author
    Posts
  • #5983

    Anatoliy Marchuk
    Participant

    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!

  • #5984

    RavanH
    Keymaster

    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 🙂

  • #5985

    Anatoliy Marchuk
    Participant

    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

    RavanH
    Keymaster

    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

  • #5987

    Anatoliy Marchuk
    Participant

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

  • #5991

    Anatoliy Marchuk
    Participant

    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.

  • #5992

    RavanH
    Keymaster

    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