/jquery.pwi/demo4.html

http://pwi.googlecode.com/ · HTML · 148 lines · 126 code · 17 blank · 5 comment · 0 complexity · b543c8b961fee1a46c4354417915b716 MD5 · raw file 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3.   <head>
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    5. 

  5.     <title>PWI Demo 4 - Picassa Webalbum Integrator (PWI)</title>
    6. 

  6. 

  7.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    8. 

  8. 

  9.     <!-- These files are needed for FancyBox -->
    10. 

  10.     <link   href="js/jquery.fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
    11. 

  11.     <script src="js/jquery.fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
    12. 

  12.     <!-- These files are needed to display the FancyBox buttons at the top, including slideshow control -->
    13. 

  13.     <link   href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5"  rel="stylesheet" type="text/css"/>
    14. 

  14.     <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script>
    15. 

  15. 

  16.     <!-- These files are needed for ColorBox -->
    17. 

  17.     <link   href="js/jquery.colorbox/colorbox.css" rel="stylesheet" type="text/css"/>
    18. 

  18.     <script src="js/jquery.colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
    19. 

  19. 

  20.     <script src="js/jquery.blockUI.js" type="text/javascript"></script>
    21. 

  21. 

  22.     <!-- These files are the PWI files -->
    23. 

  23.     <link   href="css/pwi.css" rel="stylesheet" type="text/css"/>
    24. 

  24.     <script src="js/jquery.pwi.js" type="text/javascript"></script>
    25. 

  25. 

  26.     <!-- Needed for the Google Maps overview map -->
    27. 

  27.     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    28. 

  28.     
    29. 

  29.     <script type="text/javascript">
    30. 

  30.       var $viewerSelected = "fancybox";
    31. 

  31.       var $url=document.URL.split("?", 2);
    32. 

  32.       if ($url.length == 2) {
    33. 

  33.         var $queryParams = $url[1].split("&");
    34. 

  34.         for ($queryParam in $queryParams) {
    35. 

  35.           var $split = $queryParams[$queryParam].split("=", 2);
    36. 

  36.           if ($split[0] === "viewer") {
    37. 

  37.             $viewerSelected = $split[1];
    38. 

  38.           }
    39. 

  39.         }
    40. 

  40.       }
    41. 

  41. 

  42.       $(document).ready(function() {
    43. 

  43.         var $viewerShow, $viewerJs, $viewerName;
    44. 

  44.         $('#FancyboxCode').hide();
    45. 

  45.         switch($viewerSelected)
    46. 

  46.         {
    47. 

  47.         case "fancybox":
    48. 

  48.           $viewerName = "FancyBox";
    49. 

  49.           $viewerCss  = "js/jquery.fancybox/jquery.fancybox.css";
    50. 

  50.           $viewerJs   = "js/jquery.fancybox/jquery.fancybox.pack.js";
    51. 

  51.           $('#FancyboxCode').show();
    52. 

  52.           break;
    53. 

  53.         case "colorbox":
    54. 

  54.           $viewerName = "ColorBox";
    55. 

  55.           $viewerCss  = "js/jquery.colorbox/colorbox.css";
    56. 

  56.           $viewerJs   = "js/jquery.colorbox/jquery.colorbox-min.js";
    57. 

  57.           break;
    58. 

  58.         default:
    59. 

  59.           alert("Unknown viewer selected");
    60. 

  60.           $viewerName = "unknown";
    61. 

  61.           $viewerCss  = "unknown";
    62. 

  62.           $viewerJs   = "unknown";
    63. 

  63.           break;
    64. 

  64.         }
    65. 

  65. 

  66.         $("#jqueryVersion").text($().jquery);
    67. 

  67.         $("#viewername").text($viewerName);
    68. 

  68.         $("#viewernameCss").text($viewerCss);
    69. 

  69.         $("#viewernameJs").text($viewerJs);
    70. 

  70.         $("a#inline").fancybox({closeClick: false});
    71. 

  71. 

  72.         var settings = {
    73. 

  73.           username: 'jquery.pwi',
    74. 

  74.           albumMaxResults: 10,
    75. 

  75.           mode: 'album',
    76. 

  76.           album: "Album1",
    77. 

  77.           authKey: "Gv1sRgCPCD6oSX3ovM5wE",
    78. 

  78.           thumbCss: { margin: '5px' },
    79. 

  79.           popupPlugin: $viewerSelected
    80. 

  80.         };
    81. 

  81.         $("#container").pwi(settings);
    82. 

  82.       });
    83. 

  83.     </script>
    84. 

  84.   </head>
    85. 

  85.   <body style="font-family:arial">
    86. 

  86.     <h3><a href="index.html">PWI</a> Demo 4, Private album view with authKey</h3>
    87. 

  87. 

  88.     <form name="selector">
    89. 

  89.       Select popup-viewer: 
    90. 

  90.       <select name="viewerSelect" onChange="location=document.selector.viewerSelect.options[document.selector.viewerSelect.selectedIndex].value;">
    91. 

  91.         <option selected disabled="disabled">Select viewer</option>
    92. 

  92.         <option value="?viewer=fancybox">FancyBox</option>
    93. 

  93.         <option value="?viewer=colorbox">ColorBox</option>
    94. 

  94.       </select>
    95. 

  95.     </form>
    96. 

  96.     <br />
    97. 

  97.     <hr />
    98. 

  98.     <div id="container"> </div>
    99. 

  99.         <hr />
    100. 

  100.     Click <a id="inline" href="#data">here</a> to view the code for this example.
    101. 

  101.     <div style="display:none">
    102. 

  102.       <div id="data">
    103. 

  103.         <pre>
    104. 

  104. &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    105. 

  105. &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    106. 

  106.   &lt;head&gt;
    107. 

  107.     &lt;title&gt;PWI Demo 4 - Picassa Webalbum Integrator (PWI)&lt;/title&gt;
    108. 

  108.     &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<span id="jqueryVersion"></span>/jquery.min.js"&gt;&lt;/script&gt;
    109. 

  109. 

  110.     &lt;!-- These files are needed for <span id="viewername"></span> --&gt;
    111. 

  111.     &lt;link   href="<span id="viewernameCss"></span>" rel="stylesheet" type="text/css"/&gt;
    112. 

  112.     &lt;script src="<span id="viewernameJs"></span>" type="text/javascript"&gt;&lt;/script&gt;
    113. 

  113.     <div id="FancyboxCode" style="display:none">    &lt;!-- These files are needed to display the FancyBox buttons at the top, including slideshow control --&gt;
    114. 

  114.     &lt;link   href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5"  rel="stylesheet" type="text/css"/&gt;
    115. 

  115.     &lt;script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"&gt;&lt;/script&gt;</div>
    116. 

  116.     &lt;!-- These files are the PWI files --&gt;
    117. 

  117.     &lt;link   href="css/pwi.css" rel="stylesheet" type="text/css"/&gt;
    118. 

  118.     &lt;script src="js/jquery.pwi-min.js" type="text/javascript"&gt;&lt;/script&gt;
    119. 

  119. 

  120.     &lt;!-- Needed for the Google Maps overview map --&gt;
    121. 

  121.     &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
    122. 

  122. 

  123.     &lt;script type="text/javascript"&gt;
    124. 

  124. 

  125.       $(document).ready(function () {
    126. 

  126.         var settings = {
    127. 

  127.           username: '&lt;&lt;USERNAME&gt;&gt;',
    128. 

  128.           albumMaxResults: 10,
    129. 

  129.           mode: 'album',
    130. 

  130.           album: "&lt;&lt;Album Name&gt;&gt;",
    131. 

  131.           authKey: "&lt;&lt;Authorisation Key&gt;&gt;",
    132. 

  132.           thumbCss: { margin: '5px' }
    133. 

  133.           };
    134. 

  134.         $("#container").pwi(settings);
    135. 

  135.       });
    136. 

  136. 

  137.     &lt;/script&gt;
    138. 

  138.   &lt;/head&gt;
    139. 

  139.   &lt;body&gt;
    140. 

  140.     &lt;div id="container"&gt; &lt;/div&gt;
    141. 

  141.   &lt;/body&gt;
    142. 

  142. &lt;/html&gt;
    143. 

  143.         </pre>
    144. 

  144.       </div>
    145. 

  145.     </div>
    146. 

  146. 

  147.   </body>
    148. 

  148. </html>
    149.