JSFiddle - React, Tailwind, and code Playground

by dozoisch

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.js"></script>
<!-- make a paper object -->

JavaScript

(function ($) {
    /**
     *
     * @param path the paper path
     * @param imageNumber the image number which is used in href and pdf and for the id
     * @param basePath the base path for the image
     * @param options option to override defaults settings
     */
    $.fn.animatePath = function (path, imageNumber, basePath, options) {
        
        //Default settings
        var defaults = {
            htmlAttr: {
                'class': 'reserved',
                    'id': 'ap_' + imageNumber
            },
            cssOptions: {
                fill: '#d3ae6b',
                    'stroke-width': 0,
                    'fill-opacity': 0.5,
                stroke: 'transparent',
                cursor: 'pointer',
                title: imageNumber
            },
            fancyboxOptions: {
                href: basePath + imageNumber + '.jpg ',
                openEffect: 'elastic',
                openSpeed: 150,
                closeEffect: 'elastic',
                closeSpeed: 150,
                padding: 2
            },
            fancyboxAnimations: {
                beforeShow: function () {
                    $('<a class ="pdf" href="' + basePath + imageNumber + '.pdf' + '"target="_blank" ></a>')
                        .appendTo(".fancybox-inner");
                }
            },
            mouseOver: function () {
                $(this).animate({
                    'fill-opacity': 0.8
                }, 200);
            },
            mouseOut: function () {
                $(this).animate({
                    'fill-opacity': 0.5
                }, 200);
            }

        };

        //Merge settings
        var settings = $.extend(true, defaults, options || {});
        
        //Add the fancybox and stuff
        this.path(path)
            .attr(settings.htmlAttr)
            .css(settings.cssOptions);
        this.click(function () {
            $.fancybox.open([settings.fancyboxOptions],...