S0-26194044

by Tushar Gupta

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://redopop.com/loupe/jquery.loupe.min.js"></script>
<a id="single_1" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" title="test">
	<img id="test" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" alt="" />
</a>

<img id="demo-2" src="http://farm3.static.flickr.com/2479/3549662506_4374920e94.jpg" width="191" height="240" />

CSS

.loupe {
    z-index:8020
}

JavaScript

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    afterLoad: function () {
        this.inner.prepend('<h1>1. My custom title</h1>');
        this.content = '<h1>2. My custom title</h1>' + this.content.html();

    }
});
//$('#single_1').loupe();

$('#demo-2').loupe();

$(document).ready(function () {
    $("#single_1").fancybox({
        helpers: {
            title: {
                type: 'float'
            }
        },
        afterShow: function () {
            $('.fancybox-image').loupe();
        }
    });
});