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">
|
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>
|
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"
|
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