embedded.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <meta name="apple-mobile-web-app-capable" content="yes" />
  3. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="theme-color" content="#4b75ff">
  8. <!-- <link rel="stylesheet" href="../script/tocas/tocas.css"> -->
  9. <script src="../script/tocas/tocas.js"></script>
  10. <script src="../script/jquery.min.js"></script>
  11. <script src="../script/ao_module.js"></script>
  12. <link rel="manifest" href="manifest.json">
  13. </head>
  14. <body style="background:rgba(34,34,34,1);overflow:hidden;">
  15. <img id="img" style="max-height: 100vh;max-width: 100vw;">
  16. <script>
  17. //Get file playback info from hash
  18. var playbackFile = ao_module_loadInputFiles();
  19. //Only handle one file
  20. playbackFile = playbackFile[0];
  21. //Update title name
  22. ao_module_setWindowTitle("Photo - " + playbackFile.filename);
  23. setTimeout(function() {
  24. updateImgSize();
  25. }, 500);
  26. //Setup img src
  27. $("#img").attr("src", '../media?file=' + encodeURIComponent(playbackFile.filepath))
  28. //realigin to center
  29. $('img').on('load', function() {
  30. updateImgSize();
  31. });
  32. $(window).on("resize ", function() {
  33. updateImgSize();
  34. });
  35. function updateImgSize() {
  36. $('#img').css("margin-top", (window.innerHeight - $("#img").height()) / 2);
  37. $('#img').css("margin-left", (window.innerWidth - $("#img").width()) / 2);
  38. }
  39. </script>
  40. </body>
  41. </html>