JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://carnavalonline.cl/assets/etalage/css/etalage.css">
<link rel="stylesheet" href="http://carnavalonline.cl/assets/etalage/demo_files/_fancybox_plugin/jquery.fancybox-1.3.4.css">
<script src="http://carnavalonline.cl/assets/etalage/js/jquery.etalage.min.js"></script>
<script src="http://carnavalonline.cl/assets/etalage/demo_files/_fancybox_plugin/jquery.fancybox-1.3.4.pack.js"></script>
<body>
    <ul id="etalage">
        <li>	<a href="http://carnavalonline.cl/assets/etalage/demo_files/images/image2_thumb.jpg">
					<img class="etalage_thumb_image" src="http://carnavalonline.cl/assets/etalage/demo_files/images/image2_thumb.jpg">
					<img class="etalage_source_image" src="http://carnavalonline.cl/assets/etalage/demo_files/images/image2_thumb.jpg">
				</a>

        </li>
        <li>	<a href="http://carnavalonline.cl/assets/etalage/demo_files/images/image3_thumb.jpg">
					<img class="etalage_thumb_image" src="http://carnavalonline.cl/assets/etalage/demo_files/images/image3_thumb.jpg">
					<img class="etalage_source_image" src="http://carnavalonline.cl/assets/etalage/demo_files/images/image3_thumb.jpg">
				</a>

        </li>
    </ul>	<a href="#" class="klik">Klik</a>

</body>

</html>

CSS

#etalage .etalage_magnifier {
    background: none;
    border: 1;
    cursor: pointer;
}

JavaScript

$(function () {
    var value = {};

    value = {
        "zoom_element": '#zoom',
            "magnifier_opacity": 1,
            "source_image_width": 200,
            "source_image_height": 200,
    };

    $(".klik").click(function () {
        console.log("Klik");
        value = {
            zoom_element: '#zoom',
            magnifier_opacity: 1,
            source_image_width: 2,
            source_image_height: 100,
        };
    });

    $('#etalage').etalage(value);

    console.log(value);
});