/jquery.pwi/demo9.html
HTML | 145 lines | 121 code | 19 blank | 5 comment | 0 complexity | 673330fac09f9547e0207f6ce0f00eee 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 9 - 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: 'jdiderik', 74 useQueryParameters: true, 75 showPermaLink: true, 76 popupPlugin: $viewerSelected 77 }; 78 $("#container").pwi(settings); 79 80 }); 81 </script> 82 </head> 83 <body style="font-family:arial"> 84 <h3><a href="index.html">PWI</a> Demo 9, identical to Demo1, with PermaLinks</h3> 85 86 <form name="selector"> 87 Select popup-viewer: 88 <select name="viewerSelect" onChange="location=document.selector.viewerSelect.options[document.selector.viewerSelect.selectedIndex].value;"> 89 <option selected disabled="disabled">Select viewer</option> 90 <option value="?viewer=fancybox&pwi_album_selected=DanceParade2008&pwi_albumpage=4">FancyBox</option> 91 <option value="?viewer=colorbox&pwi_album_selected=DanceParade2008&pwi_albumpage=4">ColorBox</option> 92 </select> 93 </form> 94 <br /> 95 <hr /> 96 <div id="container"> </div> 97 <hr /> 98 Click <a id="inline" href="#data">here</a> to view the code for this example. 99 <div style="display:none"> 100 <div id="data"> 101 <pre> 102<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 103<html xmlns="http://www.w3.org/1999/xhtml"> 104 <head> 105 <title>PWI Demo 9 - Picassa Webalbum Integrator (PWI)</title> 106 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<span id="jqueryVersion"></span>/jquery.min.js"></script> 107 108 <!-- These files are needed for <span id="viewername"></span> --> 109 <link href="<span id="viewernameCss"></span>" rel="stylesheet" type="text/css"/> 110 <script src="<span id="viewernameJs"></span>" type="text/javascript"></script> 111 <div id="FancyboxCode" style="display:none"> <!-- These files are needed to display the FancyBox buttons at the top, including slideshow control --> 112 <link href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5" rel="stylesheet" type="text/css"/> 113 <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script></div> 114 <script src="js/jquery.blockUI.js" type="text/javascript"></script> 115 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 useQueryParameters: true, 129 showPermaLink: true 130 }; 131 $("#container").pwi(settings); 132 }); 133 134 </script> 135 </head> 136 <body> 137 <div id="container"> </div> 138 </body> 139</html> 140 </pre> 141 </div> 142 </div> 143 144 </body> 145</html>