/jquery.pwi/demo1.html
HTML | 141 lines | 117 code | 19 blank | 5 comment | 0 complexity | a934be214e3acad788d738cc68065917 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 1 - 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" rel="stylesheet" type="text/css"/> 14 <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js"></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 popupPlugin: $viewerSelected 75 }; 76 $("#container").pwi(settings); 77 78 }); 79 </script> 80 </head> 81 <body style="font-family:arial"> 82 <h3><a href="index.html">PWI</a> Demo 1, Simple, all defaults</h3> 83 84 <form name="selector"> 85 Select popup-viewer: 86 <select name="viewerSelect" onChange="location=document.selector.viewerSelect.options[document.selector.viewerSelect.selectedIndex].value;"> 87 <option selected disabled="disabled">Select viewer</option> 88 <option value="?viewer=fancybox">FancyBox</option> 89 <option value="?viewer=colorbox">ColorBox</option> 90 </select> 91 </form> 92 <br /> 93 <hr /> 94 <div id="container"> </div> 95 <hr /> 96 Click <a id="inline" href="#data">here</a> to view the code for this example. 97 <div style="display:none"> 98 <div id="data"> 99 <pre> 100<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 101<html xmlns="http://www.w3.org/1999/xhtml"> 102 <head> 103 <title>PWI Demo 1 - Picassa Webalbum Integrator (PWI)</title> 104 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<span id="jqueryVersion"></span>/jquery.min.js"></script> 105 106 <!-- These files are needed for <span id="viewername"></span> --> 107 <link href="<span id="viewernameCss"></span>" rel="stylesheet" type="text/css"/> 108 <script src="<span id="viewernameJs"></span>" type="text/javascript"></script> 109 <div id="FancyboxCode" style="display:none"> <!-- These files are needed to display the FancyBox buttons at the top, including slideshow control --> 110 <link href="js/jquery.fancybox/helpers/jquery.fancybox-buttons.css?v=2.0.5" rel="stylesheet" type="text/css"/> 111 <script type="text/javascript" src="js/jquery.fancybox/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script></div> 112 <script src="js/jquery.blockUI.js" type="text/javascript"></script> 113 114 <!-- These files are the PWI files --> 115 <link href="css/pwi.css" rel="stylesheet" type="text/css"/> 116 <script src="js/jquery.pwi-min.js" type="text/javascript"></script> 117 118 <!-- Needed for the Google Maps overview map --> 119 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 120 121 <script type="text/javascript"> 122 123 $(document).ready(function () { 124 var settings = { 125 username: '<<USERNAME>>' 126 }; 127 $("#container").pwi(settings); 128 }); 129 130 </script> 131 </head> 132 <body> 133 <div id="container"> </div> 134 </body> 135</html> 136 </pre> 137 </div> 138 </div> 139 140 </body> 141</html>