We are pleased to present a simple to install and extremely intuitive to use brand new html pop-up plugin for krpano/panotour. It has responsive layout and works well under fullscreen mode. This plugin support insert inline html,iframe page,image galleries,ajax content,etc. Easy to use, just copy files into folder and add simple line of code,done.
two ways to purchase : install Wechat app on your mobile,bind your bank card in app, then use wechat app scan this qrcode to pay this plugin.
or you can install Alipay app,then use Alipay app scan qrcode below this line
1. The plugin use js scripts. You must place the folder with the name js in the same directory as your main html file, which start the pano/tour.
2. You must include in the head of your html file the js scripts and the style sheet before the close tag </head>
<link rel="stylesheet" href="js/popup.css" /> <script src="js/jquery.js"></script> <script src="js/popup.js"></script>
3. go on,embed some js functions in html file before the close tag </head>.
<script type="text/javascript"> <!-- pop-up inline html content directly --> function a1(){ $.ddttll.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>'); } <!-- pop-up image galleries --> function a2(){ $.ddttll.open([ { src : 'photo/1.jpg', opts : { caption : 'First caption'} }, { src : 'photo/2.png', opts : { caption : 'Second caption'} } ], { loop : false }); } <!-- another way to open complex inline html content --> function a3(){ $.ddttll.open({ src : '#hidden-content', type : 'inline' }); } <!-- powerful! you can open iframe page! so any content you can use by this way --> function a4(){ $.ddttll.open({ src : 'https://krpano.com/plugins', type : 'iframe', opts : { caption : 'heres the caption text' } }); } </script>
4. Last one step! you just need call these js functions in your xml file.
<hotspot ... onclick="js(a1();)" />
<script type="text/javascript"> function aaa(){ $.ddttll.open({ src : '' // Source of the content type : '' // Content type: image|inline|ajax|iframe|html (optional) opts : {} // Object containing item options (optional) }); } </script>
inline html
object vr demo1
object vr demo2
parallax&magnify
photo_pan&zoom
3d chart
pdf_support
team_intro
iframe page
inline html with caption
inline html without caption
responsive image galleries(with caption)
image pan&zoom(with caption)
image galleries without caption
inline html pop-ups under krpano fullscreen mode
image galleries pop-ups under krpano fullscreen mode
image galleries pop-ups under krpano fullscreen mode with thumbs
image galleries pop-ups under krpano fullscreen mode with autoplay