libs/js/jquery-mobile-1.2.0/docs/pages/popup/popup-images.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Popup images</title>
   7         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../../js/jquery.js"></script>
  11         <script src="../../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../../js/"></script>
  13
  14         <script src="popup-examples.js"></script>
  15         <link rel="stylesheet" href="popup-examples.css" />
  16
  17 </head>
  18 <body>
  19
  20         <div data-role="page" class="type-interior">
  21
  22                 <div data-role="header" data-theme="f">
  23                 <h1>Popup images</h1>
  24                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  25                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  26         </div><!-- /header -->
  27
  28         <div data-role="content" class="ui-body">
  29                 <div class="content-primary">
  30
  31                         <a href="index.html" data-role="button" data-transition="fade" data-icon="arrow-l" data-inline="true" data-mini="true">Back to Popups</a>
  32                         <h2>Scaling images: Lightbox examples</h2>
  33
  34                         <p>The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the <code>max-height</code> of the image.</p>
  35
  36                         <p>In the two examples below the divs with <code>data-role="popup"</code> have a class of <code>photopopup</code>. </p>
  37
  38                         <a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Photo landscape</a>
  39                         <a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true" data-transition="fade">Photo portrait</a>
  40
  41                         <div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
  42                                 <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-landscape.jpg" alt="Photo landscape">
  43                         </div>
  44
  45                         <div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
  46                                 <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/images/photo-portrait.jpg" alt="Photo portrait">
  47                         </div>
  48
  49                         <p>The handler is bound to the <code>popupbeforeposition</code> event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.</p>
  50
  51 <pre><code>
  52 $( document ).on( "pageinit", function() {
  53     $( ".photopopup" ).on({
  54         popupbeforeposition: function() {
  55             var maxHeight = $( window ).height() - 60 + "px";
  56             $( ".photopopup img" ).css( "max-height", maxHeight );
  57         }
  58     });
  59 });
  60
  61 </code></pre>
  62
  63
  64
  65                 </div><!--/content-primary -->
  66
  67                                 <div class="content-secondary">
  68
  69                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  70
  71                                                         <h3>More in this section</h3>
  72
  73                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
  74
  75                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
  76                                                                 <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
  77                                                                 <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
  78                                                                 <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
  79                                                                 <li><a href="../page-titles.html">Page titles</a></li>
  80                                                                 <li><a href="../page-links.html">Linking pages</a></li>
  81                                                                 <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
  82                                                                 <li><a href="../loader.html">Page loading widget</a></li>
  83                                                                 <li><a href="../dialog/index.html">Dialogs</a></li>
  84                                                                 <li data-theme="a"><a href="index.html">Popups</a></li>
  85                                                                 <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
  86                                                                 <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
  87                                                                 <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
  88                                                                 <li><a href="../page-scripting.html">Scripting pages</a></li>
  89                                                                 <li><a href="../phonegap.html">PhoneGap apps</a></li>
  90                                                                 <li><a href="../touchoverflow.html">touchOverflow feature</a></li>
  91                                                                 <li><a href="../pages-themes.html">Theming pages</a></li>
  92
  93                                                         </ul>
  94                                         </div>
  95                                 </div>
  96
  97 </div><!-- /content -->
  98
  99 <div data-role="footer" class="footer-docs" data-theme="c">
 100                 <p class="jqm-version"></p>
 101                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 102 </div>
 103
 104 </div><!-- /page -->
 105
 106 </body>
 107 </html>