JSFiddle - React, Tailwind, and code Playground

by sachin377

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.1.6/css/lightGallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.1.6/js/lightGallery.js"></script>
<link rel="stylesheet" href="http://www.ingelanznaster.com/example/audioplayer.css">
<script src="http://www.ingelanznaster.com/example/audioplayer.js"></script>
<ul id="lightGallery" class="gallery">
    <li>
<a class="selector" href data-src="http://www.ingelanznaster.com/example/img1.jpg" data-responsive-src="http://www.ingelanznaster.com/example/mobile1.jpg" data-sub-html="<div class = 'customHtml'> IMG1 </ div>">
<img src="http://www.ingelanznaster.com/example/thumb1.jpg" />
</a> 
        <div id="thumbcaption">
            <p>In lightgallery (continuing forward in the slide) 2 slides appear empty! (fault to audioplayer?)</p>
        </div>
        <div id="audioplayer">
            <audio src="http://www.ingelanznaster.com/example/song1.mp3" preload="none" controls></audio>
        </div>
    </li>
    <li>
<a class="selector" href data-src="http://www.ingelanznaster.com/example/img2.jpg" data-responsive-src="http://www.ingelanznaster.com/example/mobile2.jpg" data-sub-html="<div class = 'customHtml'> IMG2 </ div>">
<img src="http://www.ingelanznaster.com/example/thumb2.jpg" />
</a> 
        <div id="thumbcaption">
            <p>In lightgallery (continuing forward in the slide) 2 slides appear empty! (fault to audioplayer?)</p>
        </div>
        <div id="audioplayer">
            <audio src="http://www.ingelanznaster.com/example/song2.mp3" preload="none" controls></audio>
        </div>
    </li>
</ul>

CSS

.gallery {
        width: 100%;
        display: block;
        height: auto;
        float: none;
        padding-top: 3px;
        position: relative;
        text-align: center;
        padding-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px;
        padding-right: 0px;
    }
    .gallery ul {
        list-style-type: none;
        list-style-image: none;
        display: block;
        z-index: 0;
    }
    .gallery li {
        display: inline-block;
        float: none;
        height: auto;
        width: 158px;
        clear: none;
        margin-top: 11px;
        margin-right: 5px;
        margin-bottom: 14px;
        margin-left: 6px;
        z-index: 0;
        border: 1px solid #161616;
        -webkit-box-shadow: 2px 2px 5px 0px;
        box-shadow: 2px 2px 5px 0px;
    }
    .gallery li a {
        border-style: none;
        margin: 0px;
        padding: 0px;
        display: block;
    }
    .gallery li a img {
        width: 120px;
        height: 120px;
        display: block;
        float: none;
        background-color: #FFFFFF;
        margin-top: 9px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        padding-top: 2px;
        padding-right: 2px;
        padding-left: 2px;
        padding-bottom: 2px;
        border: 7px solid #E4E4E4;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
    #thumbcaption {
        width: 138px;
        height: auto;
        display: block;
        float: left;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .customHtml {
        background: none repeat scroll 0 0 black;
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
        color: #fff;
        font-family: Arial, sans-serif;
        height: 70px;
        left: 0;
        position:...

JavaScript

$("#lightGallery").lightGallery({
    selector: '#lightGallery li a.selector'
});



$(function () {
    $('audio').audioPlayer();
});