How can I create zoomable lightbox in JavaScript?

01

<!– Fancybox css file –>

02

<linkrel="stylesheet"href="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.css"media="screen"type="text/css">

03

04

<!– jQuery  –>

05

<script type="text/javascript" src="/axZm/plugins/jquery-1.7.2.min.js"></script>

06

07

<!– Easing plugin for more transitions –>

08

<script type="text/javascript" src="/axZm/plugins/demo/jquery.fancybox/jquery.easing.1.3.js"></script>

09

10

<!– Fancybox js –>

11

<script type="text/javascript" src="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.js"></script>

12

13

<script type="text/javascript">

14

    jQuery(document).ready(function() {

15

        // Bind fancybox to some element

16

        jQuery("#ifrmExample1").fancybox({

17

            "padding"               : 0,

18

            "overlayShow"           : true,

19

            "overlayOpacity"        : 0.4,

20

            "zoomSpeedIn"           : 500, // has nothing to do with AJAX-ZOOM

21

            "zoomSpeedOut"          : 500, // has nothing to do with AJAX-ZOOM

22

            "hideOnContentClick"    : false, // important

23

            "frameWidth"            : 754, // has to be defined

24

            "frameHeight"           : 458, // has to be defined

25

            "centerOnScroll"        : false,

26

            "imageScale"            : true,

27

            "easingIn"              : "swing",

28

            "easingOut"             : "swing"

29

        });

30

    });

31

</script>

1

<!– A simple link, class must be "iframe" for fancybox –>

2

<aclass="iframe"id="ifrmExample1"href="example1.php?zoomDir=4&example=1">Example 1</a>