Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Librarygeekpro
0viewers