WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Fancybox for WordPress - add a hyperlink (8 posts)

  1. Mark Shirley
    Member
    Posted 1 year ago #

    RE: Fancybox for WordPress

    Is it possible to add a hyperlink inside the lightbox animation. Is so could someone provide some code or a link to a tutorial.

    http://wordpress.org/extend/plugins/fancybox-for-wordpress/

  2. Allen Moore
    Member
    Posted 1 year ago #

    Hey Mark. What kind of hyperlink are you wanting to add?

  3. Mark Shirley
    Member
    Posted 1 year ago #

    Hi Allen just a simple link to a page preferably a (click here link) to go somewhere within the fancybox animation.

  4. Mark Shirley
    Member
    Posted 1 year ago #

    OK I have managed to find code that allows me to create a text link that then opens out a fancybox animation that has a html link in it.

    <a href="#east" class="fancybox">The East</a>
    <div style="display:none" class="fancybox-hidden">
            <div id="east">
           <img src="http://www.ricecreative.co.uk/willisnursing/wp-content/uploads/2013/01/swatch2.jpg" alt="click" /></a>
    <strong>The East</strong>
    Dolem est las pour alfec
            <a href="http://html-ipsum.com/">Click to go to page</a>
    
    </div><!--End of east->
    
    </div><!--End of east href-->
  5. Mark Shirley
    Member
    Posted 1 year ago #

    What I would like if it's possible is code that enables me to have an image that opens a fancybox animation that I can have a link in.

  6. Mark Shirley
    Member
    Posted 1 year ago #

    Ok I have managed to do it

    /*------- (HTML) FANCYBOX LINKED TO AN IMAGE WITH HTML CONTENT-------*/
    
    <div class="wrapper">
    <a href="#north-west" class="fancybox"><img src="http://www.ricecreative.co.uk/willisnursing/wp-content/uploads/2013/01/swatch.jpg" alt="click" /></a></a>
    <div style="display:none" class="fancybox-hidden">
    <div id="north-west">
    <img src="http://www.ricecreative.co.uk/willisnursing/wp-content/uploads/2013/01/swatch.jpg" alt="click" /></a>
    
    Address Lorem ipsum
    Dolem est las pour alfec
    <a href="http://html-ipsum.com/">Click to go to page</a>
    
    </div><!--End of north west-->
    </div><!--End of north west href-->
    </div><!--End of wrapper->
  7. Allen Moore
    Member
    Posted 1 year ago #

    Awesome Mark. I'm just now able to get back to this. Mark this as resolved if you are done with it.

  8. Mark Shirley
    Member
    Posted 1 year ago #

    Yeah - thanks Allen code above works a treat.
    see map on test site i have just started creating

    http://www.ricecreative.co.uk/willisnursing/

Topic Closed

This topic has been closed to new replies.

About this Topic