/jquery.pwi/demo4.html
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 105<html xmlns="http://www.w3.org/1999/xhtml"> 106 <head> 107 <title>PWI Demo 4 - Picassa Webalbum Integrator (PWI)</title> 108 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<span id="jqueryVersion"></span>/jquery.min.js"></script> 109 110 <!-- These files are needed for <span id="viewername"></span> --> 111 <link href="<span id="viewernameCss"></span>" rel="stylesheet" type="text/css"/> 112 <script src="<span id="viewernameJs"></span>" type="text/javascript"></script> 113 <div id="FancyboxCode" style="display:none"> <!-- These files are needed to display the FancyBox buttons at the top, including slideshow control --> 114 <link href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5" rel="stylesheet" type="text/css"/> 115 <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script></div> 116 <!-- These files are the PWI files --> 117 <link href="css/pwi.css" rel="stylesheet" type="text/css"/> 118 <script src="js/jquery.pwi-min.js" type="text/javascript"></script> 119 120 <!-- Needed for the Google Maps overview map --> 121 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 122 123 <script type="text/javascript"> 124 125 $(document).ready(function () { 126 var settings = { 127 username: '<<USERNAME>>', 128 albumMaxResults: 10, 129 mode: 'album', 130 album: "<<Album Name>>", 131 authKey: "<<Authorisation Key>>", 132 thumbCss: { margin: '5px' } 133 }; 134 $("#container").pwi(settings); 135 }); 136 137 </script> 138 </head> 139 <body> 140 <div id="container"> </div> 141 </body> 142</html> 143 </pre> 144 </div> 145 </div> 146 147 </body> 148</html>