JSFiddle - React, Tailwind, and code Playground

by shatul patil

HTML

<a href="javascript:void(0);" data-id="gif1" data-toggle="modal" data-target="#myModal">gif1</a> | 

<a href="javascript:void(0);" data-id="gif2" data-toggle="modal" data-target="#myModal">gif2</a>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h2 class="showname"></h2>
                <img class="showimage img-responsive" src="" />
                <p class="showcontent"></p>
            </div>
<div class="modal-footer">
       <p id="result"></p>
		<div id="next">next</div>   
		<div id="prev">prev</div>
      </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
let data = {
	gif1 : {
  	name : 'my name',
    content : ' kjjknjknj kkjnjkn knkjnkjnkj nknknk',
    img : 'http://i.imgur.com/R3WLi9s.jpg',
    gif : 'https://media.giphy.com/media/k2xbaNGSnQkzC/giphy.gif'
  },
  gif2 : {
  	name : 'my gif2',
    content : ' kjjknjknj kkjnjkn knkjnkjnkj nknknk',
    img : 'http://i.imgur.com/R3WLi9s.jpg',
    gif : 'https://media.giphy.com/media/1iu8uG2cjYFZS6wTxv/giphy.gif'
  }
}
    $('a').on('click', function () {
        var selgif = $(this).attr('data-id');
        //alert(data[selgif].name);
        $('#myModal').on('show.bs.modal', function () {
            $(".showimage").attr("src", data[selgif].gif);
            $(".showname").text(data[selgif].name);
            $(".showcontent").text(data[selgif].content);
        });
    });
    
    $('#next').on('click', function () {
        /* var selgif = $(this).attr('data-id') */;
        alert('data[selgif].name');
       /*  $('#myModal').on('show.bs.modal', function () {
            $(".showimage").attr("src", data[selgif].gif);
            $(".showname").text(data[selgif].name);
            $(".showcontent").text(data[selgif].content);
        }); */
    });
    
    
});