You need to include, only the
custom-lightbox.jsfile for the lightbox to work. View demo.
To let any raster image(png,jpg,jpeg,webp) open in lightbox, simply add data-lightbox attribute to that image. Example below:
<img src="img/lighthouse.svg" alt="Lighthouse - Jenkins for jira" data-lightbox>To let any SVG images open in lightbox, simply add data-lightbox-svg attribute to the direct parent of that svg. Example below:
<div data-lightbox-svg>
<!-- your svg code -->
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="794.67004" height="615.3107" viewBox="0 0 794.67004 615.3107" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M774.46039,374.97673a25.32606,25.32606,0,0,0-17.9885-7.44971V352.71028a25.80081,25.80081,0,0,0-25.8177-25.8179V315.72609h6.14471a9.9109,9.9109,0,0,0,0-19.8218h-6.14471v-7.747h-3.03948v7.747h-7.334a9.9109,9.9109,0,0,0,0,19.8218h7.334v11.16629H708.685a13.70808,13.70808,0,0,0-13.71016,13.71005V367.527h-4.37715a51.43354,51.43354,0,0,0-51.43738,51.43758v35.983a54.57939,54.57939,0,0,0-38.066,40.15222H578.54717V472.31794h-13.669v-9.58021h8.39095a9.9109,9.9109,0,0,0,0-19.8218h-8.39095v-6.28938h-3.03747v6.28938h-5.08974a9.9109,9.9109,0,1,0,0,19.8218h5.08974v9.62084A13.70265,13.70265,0,0,0,548.931,486.03183v9.14971a51.4435,51.4435,0,0,0-48.60114,51.36257v210.546H639.16027v.00131H781.9101V392.965A25.32546,25.32546,0,0,0,774.46039,374.97673Z" transform="translate(-202.20106 -142.39273)" fill="#f2f2f2"/><path d="M487.36014,367.52178V352.7136a25.81929,25.81929,0,0,0-25.81931-25.8193h0V312.42245h6.012a9.91089,9.91089,0,1,0,0-19.82179h-6.012v-4.43532h-3.03747v4.43532H451.0347a9.91089,9.91089,0,1,0,0,19.82179h7.46866V326.8943h-18.94a13.71393,13.71393,0,0,0-13.714,13.714v26.9135h-4.3709A51.44444,51.44444,0,0,0,370.034,418.96611v33.33253a54.55346,54.55346,0,0,0-32.47617,42.80114H309.42917V472.31794h-13.669V459.4341h4.95928a9.9109,9.9109,0,0,0,0-19.8218h-4.95928v-2.98575h-3.03768v2.98575h-8.52121a9.9109,9.9109,0,0,0,0,19.8218h8.52121v12.92447a13.70279,13.70279,0,0,0-12.90965,13.67326v9.14971a51.44364,51.44364,0,0,0-48.60114,51.36257v210.546H512.8V392.9614A25.43966,25.43966,0,0,0,487.36014,367.52178Z" transform="translate(-202.20106 -142.39273)" fill="#f2f2f2"/><rect x="300.31648" y="571.03899" width="18.98481" height="15.18785" transform="translate(417.41671 1014.87309) rotate(-180)" fill="#fff"/><rect x="269.1814" y="571.03899" width="18.98481" height="15.18785" transform="translate(355.14654 1014.87309) rotate(-180)" fill="#fff"/><rect x="300.31648" y="609.768" width="18.98481" height="15.18785" transform="translate(417.41671 1092.33111) rotate(-180)" fill="#fff"/><rect x="269.1814" y="609.768" width="18.98481" height="15.18785" transform="translate(355.14654 1092.33111) rotate(-180)" fill="#fff"/><rect x="300.31648" y="648.49701" width="18.98481" height="15.18785" transform="translate(417.41671 1169.78913) rotate(-180)" fill="#fff"/><rect x="269.1814" y="648.49701" width="18.98481" height="15.18785" transform="translate(355.14654 1169.78913) rotate(-180)" fill="#fff"/><rect x="269.1814" y="687.22602" width="18.98481" height="15.18785" transform="translate(355.14654 1247.24715) rotate(-180)" fill="#fff"/><rect x="269.1814" y="725.95503" width="18.98481" height="15.18785" transform="translate(355.14654 1324.70517) rotate(-180)" fill="#fff"/><rect x="410.66157" y="538.76481" width="61.51078" height="4.55635" transform="translate(680.63286 939.69325) rotate(-180)" fill="#fff"/><rect x="410.66157" y="566.86233" width="61.51078" height="4.55635" transform="translate(680.63286 995.88828) rotate(-180)" fill="#fff"/><rect x="410.66157" y="594.95985" width="61.51078" height="4.55635" transform="translate(680.63286 1052.08331) rotate(-180)" fill="#fff"/><rect x="447.1124" y="335.24766" width="18.98481" height="15.18785" transform="translate(711.00856 543.29044) rotate(-180)" fill="#fff"/><rect x="569.4345" y="609.768" width="18.98481" height="15.18785" transform="translate(955.65274 1092.33111) rotate(-180)" fill="#fff"/><rect x="538.29941" y="609.768" width="18.98481" height="15.18785" transform="translate(893.38257 1092.33111) rotate(-180)" fill="#fff"/><rect x="569.4345" y="648.49701" width="18.98481" height="15.18785" transform="translate(955.65274 1169.78913) rotate(-180)" fill="#fff"/><rect x="538.29941" y="648.49701" width="18.98481" height="15.18785" transform="translate(893.38257 1169.78913) rotate(-180)" fill="#fff"/><rect x="569.4345" y="687.22602" width="18.98481" height="15.18785" transform="translate(955.65274 1247.24715) rotate(-180)" fill="#fff"/><rect x="538.29941" y="687.22602" width="18.98481" height="15.18785" transform="translate(893.38257 1247.24715) rotate(-180)" fill="#fff"/><rect x="569.4345" y="725.95503" width="18.98481" height="15.18785" transform="translate(955.65274 1324.70517) rotate(-180)" fill="#fff"/><rect x="538.29941" y="725.95503" width="18.98481" height="15.18785" transform="translate(893.38257 1324.70517) rotate(-180)" fill="#fff"/><rect x="716.23042" y="335.24766" width="18.98481" height="15.18785" transform="translate(1249.24458 543.29044) rotate(-180)" fill="#fff"/><rect x="532.94602" y="257.57598" width="46.76301" height="9.9109" fill="#fff"/><rect x="532.94602" y="287.30867" width="46.76301" height="9.9109" fill="#fff"/><rect x="532.94602" y="317.04136" width="46.76301" height="9.9109" fill="#fff"/><rect x="532.94602" y="346.77405" width="46.76301" height="9.9109" fill="#fff"/><rect x="532.94602" y="376.50675" width="46.76301" height="9.9109" fill="#fff"/><rect x="532.94602" y="406.23944" width="46.76301" height="9.9109" fill="#fff"/><polygon points="309.242 462.575 319.986 471.566 360.55 433.48 344.693 420.211 309.242 462.575" fill="#ffb6b6"/><path d="M543.22893,601.927l-22.75281-15.70532,59.908-94.98118c-43.42038-25.2376-73.2807-56.02509-97.64525-89.84311-8.2801-11.41308-13.32738-24.69527-1.7762-33.25718q.81-.60039,1.663-1.13741c13.172-8.20774,8.89628,4.09321,26.95166-1.94827l16.31382,17.40284,35.24722,34.29628,60.12113,38.37819c12.09053,7.718,15.44533,23.95214,7.49317,36.26q-.62987.97481-1.34157,1.8934Z" transform="translate(-202.20106 -142.39273)" fill="#2f2e41"/><path d="M512.804,597.64439l18.83818,13.9444-6.4332,7.68712,7.19879,26.05627a6.26129,6.26129,0,0,1-10.05368,6.46959l-21.36059-17.87626,2.6816-10.685-7.801,6.40067-8.05379-6.74006Z" transform="translate(-202.20106 -142.39273)" fill="#2f2e41"/><rect x="368.39713" y="523.22463" width="123.40105" height="9.99997" transform="translate(-354.94919 33.27547) rotate(-19.67716)" fill="#3f3d56"/><path d="M513.68586,663.47744,483.41007,637.336a10.5,10.5,0,0,1,13.72427-15.89479l30.27579,26.14147a10.5,10.5,0,1,1-13.72427,15.89479Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><path d="M685.67075,361.45968a13.8444,13.8444,0,0,1-18.1915-10.942L559.325,322.668l17.63841-18.507,103.01063,30.24718a13.91942,13.91942,0,0,1,5.69668,27.05152Z" transform="translate(-202.20106 -142.39273)" fill="#ffb6b6"/><path d="M521.36864,232.15191s-17.586,2.0375-17.27,22.30286,43.4249,66.43021,50.1504,74.079,73.84415,11.55662,73.84415,11.55662l20.96661-18.43582-62.16831-20.94568Z" transform="translate(-202.20106 -142.39273)" fill="#6c63ff"/><path d="M485.69712,327.27005l-3.96747,18.608s-7.22021,15.48692-5.819,19.62462c1.38826,4.11542,63.8827,26.485,63.8827,26.485s5.35426-27.90317,14.28909-46.725Z" transform="translate(-202.20106 -142.39273)" fill="#ffb6b6"/><path d="M685.98272,618.31182l-36.09241,17.2435a10.5,10.5,0,0,1-9.05283-18.94852l36.0924-17.2435a10.5,10.5,0,1,1,9.05284,18.94852Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><path d="M822.88975,755.95931A113.97966,113.97966,0,1,1,936.86941,641.97965,114.10859,114.10859,0,0,1,822.88975,755.95931Zm0-217.40564a103.426,103.426,0,1,0,103.426,103.426A103.54316,103.54316,0,0,0,822.88975,538.55367Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><circle cx="625.70904" cy="507.56658" r="16" fill="#3f3d56"/><path d="M354.44965,757.513a108,108,0,1,1,108-108A108.12217,108.12217,0,0,1,354.44965,757.513Zm0-206a98,98,0,1,0,98,98A98.111,98.111,0,0,0,354.44965,551.513Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><circle cx="152.24841" cy="507.11997" r="16" fill="#3f3d56"/><circle cx="369.24841" cy="505.11997" r="18.5534" fill="#3f3d56"/><polygon points="156.357 505.986 149.061 499.147 279.296 360.214 511.708 290.657 627.053 493.091 618.365 498.042 506.957 302.518 284.748 369.021 156.357 505.986" fill="#3f3d56"/><rect x="255.21929" y="499.67791" width="98.27246" height="10" fill="#3f3d56"/><rect x="277.02203" y="312.33416" width="10" height="52.2832" fill="#3f3d56"/><rect x="690.22182" y="335.39085" width="9.9996" height="106.15792" transform="translate(-287.93903 90.05142) rotate(-17.897)" fill="#3f3d56"/><rect x="519.9099" y="491.83595" width="10.00039" height="162.24673" transform="translate(-419.80257 201.46072) rotate(-30.35812)" fill="#3f3d56"/><rect x="566.40188" y="579.95942" width="213.01643" height="9.99978" transform="translate(-414.80368 338.3907) rotate(-34.29066)" fill="#3f3d56"/><path d="M503.4101,460.95931h-40a10.5,10.5,0,0,1,0-21h40a10.5,10.5,0,1,1,0,21Z" transform="translate(-202.20106 -142.39273)" fill="#6c63ff"/><path d="M698.4101,347.95931h-40a10.5,10.5,0,0,1,0-21h40a10.5,10.5,0,0,1,0,21Z" transform="translate(-202.20106 -142.39273)" fill="#6c63ff"/><path d="M956.38114,693.78776l1.14386-25.71947a83.066,83.066,0,0,1,38.74474-9.80778c-18.60844,15.21376-16.28294,44.54069-28.899,64.99961a49.96433,49.96433,0,0,1-36.63939,23.08922l-15.5722,9.53437a83.72449,83.72449,0,0,1,17.647-67.84511,80.87311,80.87311,0,0,1,14.86294-13.81011C951.39864,684.06262,956.38114,693.78776,956.38114,693.78776Z" transform="translate(-202.20106 -142.39273)" fill="#f2f2f2"/><path d="M996.8711,756.51343a1.18646,1.18646,0,0,1-1.19006,1.19h-792.29a1.19,1.19,0,0,1,0-2.38h792.29A1.1865,1.1865,0,0,1,996.8711,756.51343Z" transform="translate(-202.20106 -142.39273)" fill="#ccc"/><circle cx="545.05305" cy="188.11814" r="29.56777" transform="translate(-226.02058 -48.37696) rotate(-9.64871)" fill="#ffb6b6"/><circle cx="664.86216" cy="157.80496" r="26.70075" fill="#fd6584"/><path d="M926.82569,287.55593a13.24763,13.24763,0,0,0-11.1792-9.29077c-.058-.00818-.113.00263-.17077-.0011a1.66619,1.66619,0,0,0-.22791-.05249c-12.21069-1.57812-26.30591,4.2619-31.3949,15.83814a12.93477,12.93477,0,0,0-10.83325-5.27906,13.19324,13.19324,0,0,0-11.80029,9.51136,1.54784,1.54784,0,0,0,.68933,1.694,6.76581,6.76581,0,0,0,2.78967,1.416q3.32629.70468,6.67627,1.29108,6.53686,1.14394,13.142,1.84973a195.42059,195.42059,0,0,0,26.918,1.01746c2.99267-.09326,5.87866-.19257,8.6206-1.51337a12.82692,12.82692,0,0,0,4.94532-4.31555A14.55148,14.55148,0,0,0,926.82569,287.55593Z" transform="translate(-202.20106 -142.39273)" fill="#f0f0f0"/><path d="M871.33009,323.15689a13.24793,13.24793,0,0,0-11.1792-9.29071c-.05811-.00818-.11316.00262-.1709-.0011a1.66263,1.66263,0,0,0-.22779-.05249c-12.21069-1.57813-26.3059,4.26184-31.395,15.83807a12.93424,12.93424,0,0,0-10.83326-5.279,13.19324,13.19324,0,0,0-11.80029,9.51135,1.54812,1.54812,0,0,0,.68945,1.694,6.76622,6.76622,0,0,0,2.78955,1.416q3.3263.70458,6.67627,1.29107,6.53686,1.14387,13.14209,1.84973a195.427,195.427,0,0,0,26.918,1.01746c2.99256-.09326,5.87854-.19263,8.62061-1.51343a12.82846,12.82846,0,0,0,4.94531-4.31549A14.552,14.552,0,0,0,871.33009,323.15689Z" transform="translate(-202.20106 -142.39273)" fill="#f0f0f0"/><path d="M728.06977,470.98568l-33.39356-70.49024.45215-.21386a19.49825,19.49825,0,0,1,25.97021,9.27392l16.69678,35.24561a19.49825,19.49825,0,0,1-9.27392,25.97021Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><path d="M625.99164,483.37533a19.52926,19.52926,0,0,1-18.67578-13.99073l-.1416-.47949,74.81152-22.07373.1416.47949a19.49938,19.49938,0,0,1-13.18457,24.22119l-37.40576,11.03662A19.58562,19.58562,0,0,1,625.99164,483.37533Z" transform="translate(-202.20106 -142.39273)" fill="#3f3d56"/><polygon points="433.406 462.464 447.019 459.106 440.726 403.809 420.634 408.767 433.406 462.464" fill="#ffb6b6"/><path d="M629.15985,588.98868l21.24484-9.89848,3.68453,9.32212,26.33277,6.11045a6.26129,6.26129,0,0,1,.88663,11.9225l-25.90388,10.23841-8.10949-7.45627,1.90124,9.91006-9.7668,3.86029Z" transform="translate(-202.20106 -142.39273)" fill="#2f2e41"/><path d="M649.98324,555.02926l-29.0263,17.40694L589.99921,463.1043c-50.22034-.42815-96.6552-6.05125-134.56788-23.36933-12.84487-5.81616-18.55863-21.1978-12.762-34.35589q.40641-.92259.88167-1.8116c7.38021-13.65292,21.68774-21.67063,34.38327-35.85935l62.97584,23.25118-4.51264,16.9586,71.23655,3.57587c14.32589.71912,25.27863,13.16261,24.46366,27.79328q-.06457,1.1588-.2281,2.30928Z" transform="translate(-202.20106 -142.39273)" fill="#2f2e41"/><path d="M526.84163,216.98208l19.353,10.11924a5.53214,5.53214,0,0,1,3.47515,5.40067l5.04115,20.1719,17.73711,37.54341s4.62168,19.98113-4.19823,38.84684-28.33972,65.89517-28.33972,65.89517c-12.73145,30.49384-117.23255,6.94507-90-19,3.24042-3.08722,21.45267-29.16348,28.11651-30.66223l16.35072-93.56571a33.94425,33.94425,0,0,1,16.50291-23.80693c2.61982-1.48088,5.0481-2.35769,6.71242-1.91022C521.38621,226.89825,523.17884,218.30733,526.84163,216.98208Z" transform="translate(-202.20106 -142.39273)" fill="#6c63ff"/><path d="M694.92127,340.95854a13.84441,13.84441,0,0,1-19.89013-7.419l-111.4278-7.53559,13.94385-21.42874,106.81134,10.836a13.91942,13.91942,0,0,1,10.56274,25.54732Z" transform="translate(-202.20106 -142.39273)" fill="#ffb6b6"/><path d="M509.68551,243.98741s-16.91377,5.22917-12.8853,25.09261,54.87486,57.33625,62.88943,63.62144,74.711-2.18661,74.711-2.18661l17.22862-21.96936-64.95578-9.1851Z" transform="translate(-202.20106 -142.39273)" fill="#6c63ff"/><path d="M576.59179,178.33638c-4.46454,2.19939-9.5203-.98831-13.42691-4.1584l1.398,1.18244c-6.77767,6.73122-9.87982,16.34716-11.34677,25.79672-1.46864,9.43969-1.54406,19.07874-3.419,28.45563-1.87654,9.367-5.872,18.80014-13.45662,24.6035-10.16087,7.773-24.28887,7.42607-36.87931,5.20487-.16777-.03234-.324-.05647-.49182-.08881a76.722,76.722,0,0,0,3.72808-30.45566,69.75885,69.75885,0,0,1-16.46351,27.62013,160.14073,160.14073,0,0,1-24.40853-8.61075c-5.1055-2.28661-10.60994-5.42848-12.07591-10.82912-1.46908-5.35962,1.75607-11.03039,6.11133-14.469,4.35527-3.43859,9.72523-5.2645,14.70175-7.73351,4.96844-2.45755,9.87429-5.939,11.82029-11.13876,4.48863-11.96152-8.788-25.49774-3.789-37.262,2.46527-5.78508,8.61656-8.9813,14.40359-11.45624a213.1187,213.1187,0,0,1,27.17569-9.47895c8.13053-2.23438,16.62591-3.99315,24.94555-2.66885,8.3197,1.32429,16.50817,6.29207,19.57839,14.14863,5.00475,1.63429,10.31922,3.47966,13.56323,7.64482C581.5026,168.79834,581.31892,176.01118,576.59179,178.33638Z" transform="translate(-202.20106 -142.39273)" fill="#2f2e41"/><rect x="67.65734" y="544.0936" width="168.7373" height="2" fill="#3f3d56"/><rect x="67.65734" y="564.0936" width="168.7373" height="2" fill="#3f3d56"/><rect x="541.65734" y="544.0936" width="168.7373" height="2" fill="#3f3d56"/><rect x="541.65734" y="564.0936" width="168.7373" height="2" fill="#3f3d56"/><ellipse cx="730.5" cy="429.5" rx="11.5" ry="17.5" transform="translate(-305.80592 137.54261) rotate(-20.28778)" fill="#6c63ff"/></svg>
<!-- // your svg code -->
</div>To conditionally add the lightbox script and styles, add this code at the bottom of your html file.
Note: In this example the script will always load, since the if block always resolved to true. You can bind that value to something else to control is this
light box script loads in a page or not.
<script>
(function() {
if (true) { // always true
document.write('<script src="js/custom-lightbox.js"><\/script>');
}
})();
</script>That's all. Thank you.