Link with ID matching URL hash

Your Account / Forums / Easy FancyBox Pro / Link with ID matching URL hash


  • Author
    • May 24, 2018 at 12:48 pm #12224

      How do I setup an auto link with the Link with ID matching URL hash.

      I cannot find any documentation for this feature of the pro plugin

    • May 24, 2018 at 12:48 pm #12231

      Any update on my request, I’ve updated to Pro

    • May 24, 2018 at 12:48 pm #12232

      Hi Neil, the feature is so new that there is no info yet 🙂 but this should get you started:

      1. Set the option “Open on page load” on Settings > Media in the Miscellaneous section to “Link with ID matching URL hash”.
      You may also want to set the option “Hide popup after first visit?” to “No” since that will disable the popup effect after the first visit!

      2. Create a link to the media content you wish to make auto-popup.
      This can be a link to any media file (like image or PDF), to another web page or to inline content (see the instructions on inline content in the FAQ’s). It may also be a ‘regular’ image embedded as a thumbnail with the option “Link to” set to “Media File”.
      The link may be placed in post/page content or in a sidebar widget and it may be hidden from view if you wish (instructions below).

      3. Give that link a unique ID.
      Switch to the Text tab (if you’re in your post/page editor) and give the link tag a unique (!) ID attribute. This ID may only appear once in the page source otherwise the result might be confusing. For example, a PDF link button might look like this:

      <a class="button fancybox-pdf" href="/wp-content/uploads/2018/ebook-preview.pdf">Preview</a>

      Now add a unique ID like this:

      <a id="my-ebook-preview" class="button fancybox-pdf" href="/wp-content/uploads/2018/ebook-preview.pdf">Preview</a>

      Again, the ID in this case my-ebook-preview may only be used once and must not appear anywhere else in the page source. Common IDs used in theme template files like “content”, “aside”, “main”, “top” or “post-N” (where N is a post ID number) should be avoided. So if you wish to use “content”, make it “my-content” for example…

      4. Test the URL hash.
      After saving your post/page/widget visit the front end of your site. Copy the page URL and open a new tab, paste the URL and append the ID from above as a URL hash (with #) to in the browser address bar like this:
      Then hit enter to launch the request. The page should load and (with a delay depending on your settings, by default 1 second) the PDF should pop up automatically.

      Now you can share this URL (with hash) in email or use it for a link in another page or post.

      Last: if you wish to hide the original media link, you can give it the class “fancybox-hidden” so it may look like this:

      <a id="my-ebook-preview" class="fancybox-hidden fancybox-pdf" href="/wp-content/uploads/2018/ebook-preview.pdf">Preview</a>

      Hope this helped 🙂

  • You must be logged in to reply to this topic.