JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<img src="http://www.c-and-a.com/iview/FRONT_ZOOM2X/148243_1.jpg"
         data-swap="http://www.c-and-a.com/iview/BACK_ZOOM2X/148243_1.jpg" id="images">

JavaScript

(function($) {


    $.fn.jqueryPlugin = function() {






        $("#images").click(function() {
            var _this = $(this);
            var current = _this.attr("src");
            var swap = _this.attr("data-swap");
            _this.attr('src', swap).attr("data-swap",current);

            $("#images").dialog({
            dialogClass: "no-close",
            width: 'auto',
            height: 'auto',
            resize: "auto",
            close : function(){
               _this.attr('src', current).attr("data-swap",swap);
             }
        });
        });



    };






})(jQuery);

 $(function() {

            $(document).ready( function() {
                $('body').jqueryPlugin();
            });


        });