Hi,
I want to create lightbox and it needs to be zoomable. I want to create it in JavaScript. How can I create it? Please, show me the process of creating a zoomable lightbox in JavaScript.
Thanks.
How can I create zoomable lightbox in JavaScript?
Hello Harris,
Follow the below PHP code to create a lightbox in JavaScript. Make sure to specify the size of the popup in a lightbox. Because of the Ajax zoomable full screen doesn’t work.
Header:
|
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
|
    });
|
Body:
|
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>
|
Otherwise go to htmldrive.net for more information. Or go to http://www.creativebloq.com/net-magazine, this is the best site to get detail instruction to create lightbox.
Thanks.
Akerly Joqw
