Question

I have an issue that I am lost on how to solve. In my program, when a user clicks an image the fancybox script runs causing a new image to appear as a popup. However, in that image I would like to be able to place links as well. Basically I want to use link blocks of specific width and height and position within the popup image, creating a link within a link. Is that even possible to do?

Here is some code:

<!--Using the fancybox functions -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#contentArea a").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'

            });
            });
    </script>

Here is the HTML:

<div id="contentArea" role="main">
             <a href="../images/IRPA_two-navigation-books.png" title="Raj Sharma" style="width: 217px;height: 117px;position: absolute;display: block;top: 340px;left: 450px; background-image:url(../images/transparent.png)"></a>         
</div>

As you can see I created a fancybox image popup for a block link in a specific position. How do I create links with specified width/height and position within the popup fancy box image?

This is the tool/library that I am using, in-case anyone is confused:
http://fancybox.net/

Thanks!

Answer 1

You can do this easily:

var html = "<!--- some html here to add to the fancybox -->";
$('#fancybox-title-over').html(html);
$('#fancybox-title-over').css('background-color' , 'transparent');

It will appear in the overlay title as seen in the sixth example on http://fancybox.net/