Created
April 27, 2015 09:35
-
-
Save narennaik/1a9c85d0842a95b98b16 to your computer and use it in GitHub Desktop.
Custom Lightbox Control // source http://jsbin.com/tufeze
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <!-- | |
| Created using JS Bin | |
| http://jsbin.com | |
| Copyright (c) 2015 by michadelic (http://jsbin.com/tebef/1/edit) | |
| Released under the MIT license: http://jsbin.mit-license.org | |
| --> | |
| <meta name="robots" content="noindex"> | |
| <style> | |
| .lightbox { | |
| cursor: -webkit-zoom-in; | |
| margin: 2rem auto; | |
| text-align: center; | |
| max-width: 240px; | |
| background: white; | |
| -webkit-transition: all 0.5s ease-in-out; | |
| } | |
| .lightboxDialog img { | |
| display: blocK; | |
| } | |
| .lightboxDialog label { | |
| font-weight: bold !important; | |
| font-size: 1rem !important; | |
| } | |
| .lightboxDialog .sapMDialogScrollCont { | |
| padding: 0 !important; | |
| } | |
| </style> | |
| <title>Custom Lightbox Control</title> | |
| <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script> | |
| <script> | |
| jQuery.sap.require("sap.m.ImageRenderer"); | |
| /* lightbox control start */ | |
| sap.m.Image.extend("Lightbox", { | |
| metadata: { | |
| properties: { | |
| large: "sap.ui.core.URI" | |
| }, | |
| }, | |
| // set up the inner controls | |
| init: function () { | |
| var that = this; | |
| this.attachPress(function () { | |
| that._open(); | |
| }); | |
| }, | |
| // helper function to update the meta text | |
| _open: function () { | |
| var oBusyIndicator = new sap.m.BusyDialog(), | |
| oPreload = new Image(), | |
| fnClose = function () { | |
| oDialog.destroy(); | |
| oDialog = null; | |
| }; | |
| oDialog = new sap.m.Dialog({ | |
| stretch: sap.ui.Device.system.phone, | |
| customHeader: new sap.m.Bar({ | |
| contentLeft: new sap.m.Label({ | |
| text: this.getAlt(), | |
| }), | |
| contentRight: new sap.m.Button({ | |
| icon: "sap-icon://decline", | |
| press: function () { | |
| oDialog.close(); | |
| } | |
| }) | |
| }), | |
| verticalScrolling: false, | |
| horizontalScrolling: false, | |
| afterClose: fnClose, | |
| content: [ | |
| new sap.m.Image({ | |
| src: this.getLarge(), | |
| }).attachPress(fnClose), | |
| ] | |
| }).addStyleClass("lightboxDialog"); | |
| // Preload image | |
| oBusyIndicator.open(); | |
| oPreload.src = this.getLarge(); | |
| oPreload.onload = function() { | |
| oBusyIndicator.close(); | |
| oBusyIndicator.destroy(); | |
| oDialog.open(); | |
| }; | |
| }, | |
| // render control with the image renderer | |
| renderer: sap.m.ImageRenderer.render | |
| }); | |
| /* lightbox control end */ | |
| var app = new sap.m.App(), | |
| page = new sap.m.Page({ | |
| title: "Lightbox", | |
| enableScrolling: false, | |
| content: | |
| new sap.m.Carousel({ | |
| height: "100%", | |
| pages: [ | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Koala.jpg/248px-Koala.jpg", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Koala.jpg/496px-Koala.jpg", | |
| alt: "A cute little coala bear" | |
| }), | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Sentinel_parrots.jpg/320px-Sentinel_parrots.jpg", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Sentinel_parrots.jpg/640px-Sentinel_parrots.jpg", | |
| alt: "A bunch of wonderful parrots" | |
| }), | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/320px-Hawaii_turtle_2.JPG", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/640px-Hawaii_turtle_2.JPG?uselang=de", | |
| alt: "A turtle taking a deep dive" | |
| }) | |
| ] | |
| }) | |
| }); | |
| app.addPage(page).placeAt("content"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="content"/> | |
| <script src="http://static.jsbin.com/js/render/edit.js?3.25.23"></script> | |
| <script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-1656750-34', 'jsbin.com'); | |
| ga('require', 'linkid', 'linkid.js'); | |
| ga('require', 'displayfeatures'); | |
| ga('send', 'pageview'); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <\!-- | |
| Created using JS Bin | |
| http://jsbin.com | |
| Copyright (c) 2015 by michadelic (http://jsbin.com/tebef/1/edit) | |
| Released under the MIT license: http://jsbin.mit-license.org | |
| --> | |
| <meta name="robots" content="noindex"> | |
| <style> | |
| .lightbox { | |
| cursor: -webkit-zoom-in; | |
| margin: 2rem auto; | |
| text-align: center; | |
| max-width: 240px; | |
| background: white; | |
| -webkit-transition: all 0.5s ease-in-out; | |
| } | |
| .lightboxDialog img { | |
| display: blocK; | |
| } | |
| .lightboxDialog label { | |
| font-weight: bold !important; | |
| font-size: 1rem !important; | |
| } | |
| .lightboxDialog .sapMDialogScrollCont { | |
| padding: 0 !important; | |
| } | |
| </style> | |
| <title>Custom Lightbox Control</title> | |
| <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"><\/script> | |
| <script> | |
| jQuery.sap.require("sap.m.ImageRenderer"); | |
| /* lightbox control start */ | |
| sap.m.Image.extend("Lightbox", { | |
| metadata: { | |
| properties: { | |
| large: "sap.ui.core.URI" | |
| }, | |
| }, | |
| // set up the inner controls | |
| init: function () { | |
| var that = this; | |
| this.attachPress(function () { | |
| that._open(); | |
| }); | |
| }, | |
| // helper function to update the meta text | |
| _open: function () { | |
| var oBusyIndicator = new sap.m.BusyDialog(), | |
| oPreload = new Image(), | |
| fnClose = function () { | |
| oDialog.destroy(); | |
| oDialog = null; | |
| }; | |
| oDialog = new sap.m.Dialog({ | |
| stretch: sap.ui.Device.system.phone, | |
| customHeader: new sap.m.Bar({ | |
| contentLeft: new sap.m.Label({ | |
| text: this.getAlt(), | |
| }), | |
| contentRight: new sap.m.Button({ | |
| icon: "sap-icon://decline", | |
| press: function () { | |
| oDialog.close(); | |
| } | |
| }) | |
| }), | |
| verticalScrolling: false, | |
| horizontalScrolling: false, | |
| afterClose: fnClose, | |
| content: [ | |
| new sap.m.Image({ | |
| src: this.getLarge(), | |
| }).attachPress(fnClose), | |
| ] | |
| }).addStyleClass("lightboxDialog"); | |
| // Preload image | |
| oBusyIndicator.open(); | |
| oPreload.src = this.getLarge(); | |
| oPreload.onload = function() { | |
| oBusyIndicator.close(); | |
| oBusyIndicator.destroy(); | |
| oDialog.open(); | |
| }; | |
| }, | |
| // render control with the image renderer | |
| renderer: sap.m.ImageRenderer.render | |
| }); | |
| /* lightbox control end */ | |
| var app = new sap.m.App(), | |
| page = new sap.m.Page({ | |
| title: "Lightbox", | |
| enableScrolling: false, | |
| content: | |
| new sap.m.Carousel({ | |
| height: "100%", | |
| pages: [ | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Koala.jpg/248px-Koala.jpg", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Koala.jpg/496px-Koala.jpg", | |
| alt: "A cute little coala bear" | |
| }), | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Sentinel_parrots.jpg/320px-Sentinel_parrots.jpg", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Sentinel_parrots.jpg/640px-Sentinel_parrots.jpg", | |
| alt: "A bunch of wonderful parrots" | |
| }), | |
| new Lightbox({ | |
| src: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/320px-Hawaii_turtle_2.JPG", | |
| large: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/640px-Hawaii_turtle_2.JPG?uselang=de", | |
| alt: "A turtle taking a deep dive" | |
| }) | |
| ] | |
| }) | |
| }); | |
| app.addPage(page).placeAt("content"); | |
| <\/script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="content"/> | |
| <script src="http://static.jsbin.com/js/render/edit.js?3.25.23"><\/script> | |
| <script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});<\/script> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-1656750-34', 'jsbin.com'); | |
| ga('require', 'linkid', 'linkid.js'); | |
| ga('require', 'displayfeatures'); | |
| ga('send', 'pageview'); | |
| <\/script> | |
| </body> | |
| </html> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment