How can I create zoomable lightbox in JavaScript?

Asked By 0 points N/A Posted on -
qa-featured

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.

SHARE
Answered By 0 points N/A #157262

How can I create zoomable lightbox in JavaScript?

qa-featured

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

    });

31

</script>

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

Related Questions