CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlinkfancybox
Mr119
Mr119

Reputation: 13

JQuery & Fancybox clicking image to open a new page/link (Update existing code)

Good morning,

Iv got a page that currently opens an event image when users land on our main page, this code was already in place and I am simply trying to add in a link to an event we are hosting. (Modify the code) I have been trying to use .wrap and "content" along with a few other things I found on here, however I am unable to modify the code correctly. (When I have made attempts the page will simply quit appearing, so I know there is an error) I am not to familiar with java/fancybox so any help with modifying this current code would be greatly appreciated!

Here is what I currently have:

<script type="text/javascript">

jQuery(document).ready(function(){


        jQuery.fancybox({
            'autoScale'         : false,
            'width'             : 783,
            'height'            : 700,
            'autoScale'         : false,
            'transitionIn'          : 'elastic',
            'transitionOut'         : 'none',
            'type'              : 'iframe',
            'titlePosition'         : 'inside',
            'overlayColor'          : '#fff',
            'href'              : '/img/treeofdreams.jpg'
        });

});

</script>

PS I tried to even just change the height on the iframe to add in the following below the image:

For more details visit our FaceBook page: <a href="url">Click Here</a>

However it appears the iframe doesn't want to share more real estate below!

Thank you,

Upvotes: 1

Views: 3865

Answers (1)

JFK
JFK

Reputation: 41143

If you just want to add a link to the image that is shown in fancybox, then .wrap() method is the way to go, however you may need to know exactly what selector you need to target and wrap it within the onComplete (v1.3.4) callback

So try this code :

jQuery(document).ready(function ($) {
    jQuery.fancybox({
        autoScale: false,
        width: 783, // or whatever needed
        height: 700, 
        transitionIn: 'elastic',
        transitionOut: 'none',
        // type: 'iframe', // you don't need this for images
        titlePosition: 'inside',
        overlayColor: '#fff',
        href: '/img/treeofdreams.jpg', // the URL of the image
        title: "the title", // you may need this
        onComplete: function () {
            jQuery("#fancybox-img").wrap(jQuery("<a />", {
                href: "http://facebook.com/", // the URL to open after clicking the image
                target: "_blank", // opens in a new window/tab
                title: "go to facebook" // optional, shows on mouse hover
            }))
        }
    });
}); // ready

Notice #fancybox-img is the selector ID of the fancybox image.

See JSFIDDLE

Note: this is for fancybox v1.3.4

Upvotes: 1

Related Questions