PageRenderTime 57ms CodeModel.GetById 32ms app.highlight 17ms RepoModel.GetById 1ms app.codeStats 0ms

/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<html xmlns="http://www.w3.org/1999/xhtml">
  3  <head>
  4    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  5    <title>PWI Demo 4 - Picassa Webalbum Integrator (PWI)</title>
  6
  7    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  8
  9    <!-- These files are needed for FancyBox -->
 10    <link   href="js/jquery.fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
 11    <script src="js/jquery.fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
 12    <!-- These files are needed to display the FancyBox buttons at the top, including slideshow control -->
 13    <link   href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5"  rel="stylesheet" type="text/css"/>
 14    <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script>
 15
 16    <!-- These files are needed for ColorBox -->
 17    <link   href="js/jquery.colorbox/colorbox.css" rel="stylesheet" type="text/css"/>
 18    <script src="js/jquery.colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
 19
 20    <script src="js/jquery.blockUI.js" type="text/javascript"></script>
 21
 22    <!-- These files are the PWI files -->
 23    <link   href="css/pwi.css" rel="stylesheet" type="text/css"/>
 24    <script src="js/jquery.pwi.js" type="text/javascript"></script>
 25
 26    <!-- Needed for the Google Maps overview map -->
 27    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 28    
 29    <script type="text/javascript">
 30      var $viewerSelected = "fancybox";
 31      var $url=document.URL.split("?", 2);
 32      if ($url.length == 2) {
 33        var $queryParams = $url[1].split("&");
 34        for ($queryParam in $queryParams) {
 35          var $split = $queryParams[$queryParam].split("=", 2);
 36          if ($split[0] === "viewer") {
 37            $viewerSelected = $split[1];
 38          }
 39        }
 40      }
 41
 42      $(document).ready(function() {
 43        var $viewerShow, $viewerJs, $viewerName;
 44        $('#FancyboxCode').hide();
 45        switch($viewerSelected)
 46        {
 47        case "fancybox":
 48          $viewerName = "FancyBox";
 49          $viewerCss  = "js/jquery.fancybox/jquery.fancybox.css";
 50          $viewerJs   = "js/jquery.fancybox/jquery.fancybox.pack.js";
 51          $('#FancyboxCode').show();
 52          break;
 53        case "colorbox":
 54          $viewerName = "ColorBox";
 55          $viewerCss  = "js/jquery.colorbox/colorbox.css";
 56          $viewerJs   = "js/jquery.colorbox/jquery.colorbox-min.js";
 57          break;
 58        default:
 59          alert("Unknown viewer selected");
 60          $viewerName = "unknown";
 61          $viewerCss  = "unknown";
 62          $viewerJs   = "unknown";
 63          break;
 64        }
 65
 66        $("#jqueryVersion").text($().jquery);
 67        $("#viewername").text($viewerName);
 68        $("#viewernameCss").text($viewerCss);
 69        $("#viewernameJs").text($viewerJs);
 70        $("a#inline").fancybox({closeClick: false});
 71
 72        var settings = {
 73          username: 'jquery.pwi',
 74          albumMaxResults: 10,
 75          mode: 'album',
 76          album: "Album1",
 77          authKey: "Gv1sRgCPCD6oSX3ovM5wE",
 78          thumbCss: { margin: '5px' },
 79          popupPlugin: $viewerSelected
 80        };
 81        $("#container").pwi(settings);
 82      });
 83    </script>
 84  </head>
 85  <body style="font-family:arial">
 86    <h3><a href="index.html">PWI</a> Demo 4, Private album view with authKey</h3>
 87
 88    <form name="selector">
 89      Select popup-viewer: 
 90      <select name="viewerSelect" onChange="location=document.selector.viewerSelect.options[document.selector.viewerSelect.selectedIndex].value;">
 91        <option selected disabled="disabled">Select viewer</option>
 92        <option value="?viewer=fancybox">FancyBox</option>
 93        <option value="?viewer=colorbox">ColorBox</option>
 94      </select>
 95    </form>
 96    <br />
 97    <hr />
 98    <div id="container"> </div>
 99        <hr />
100    Click <a id="inline" href="#data">here</a> to view the code for this example.
101    <div style="display:none">
102      <div id="data">
103        <pre>
104&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
105&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
106  &lt;head&gt;
107    &lt;title&gt;PWI Demo 4 - Picassa Webalbum Integrator (PWI)&lt;/title&gt;
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
110    &lt;!-- These files are needed for <span id="viewername"></span> --&gt;
111    &lt;link   href="<span id="viewernameCss"></span>" rel="stylesheet" type="text/css"/&gt;
112    &lt;script src="<span id="viewernameJs"></span>" type="text/javascript"&gt;&lt;/script&gt;
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    &lt;link   href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5"  rel="stylesheet" type="text/css"/&gt;
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    &lt;!-- These files are the PWI files --&gt;
117    &lt;link   href="css/pwi.css" rel="stylesheet" type="text/css"/&gt;
118    &lt;script src="js/jquery.pwi-min.js" type="text/javascript"&gt;&lt;/script&gt;
119
120    &lt;!-- Needed for the Google Maps overview map --&gt;
121    &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
122
123    &lt;script type="text/javascript"&gt;
124
125      $(document).ready(function () {
126        var settings = {
127          username: '&lt;&lt;USERNAME&gt;&gt;',
128          albumMaxResults: 10,
129          mode: 'album',
130          album: "&lt;&lt;Album Name&gt;&gt;",
131          authKey: "&lt;&lt;Authorisation Key&gt;&gt;",
132          thumbCss: { margin: '5px' }
133          };
134        $("#container").pwi(settings);
135      });
136
137    &lt;/script&gt;
138  &lt;/head&gt;
139  &lt;body&gt;
140    &lt;div id="container"&gt; &lt;/div&gt;
141  &lt;/body&gt;
142&lt;/html&gt;
143        </pre>
144      </div>
145    </div>
146
147  </body>
148</html>