<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: zoom-in;
margin: 2rem auto;
text-align: center;
max-width: 240px;
background: white;
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>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |