Displaying unique objects generated by Raphael.js in FancyBox
Well you could author a jQuery plugin. That would have default settings, with the option of passing some parameters and override settings.

General ideas behind this are :


Making reusable code. Another project with similar stuff? You include the lib and re-use it.
Making the code as dry as possible. Writing the same thing again and again is annoying and hard to refactor. In a plugin everything is wrote once.
Even though you want everything to look the same, you have to build it a way you can override default setting, because there's always one object that need to be different.




I haven't debug the whole  plugin as I had no idea what did a paper object looked lik. But it seemed like it was a jQuery built object as you called .attr, .mouseover and .mouseout which are jQuery function. Though I have debugged the rest of the plugin without calling .path and it was working.

To call the plugin just do something like :

var basePath = 'img/rzuty/p1/';
paperObject.animatePath('M36.146...', 101, basePath);
paperObject.animatePath('M337.583...', 102, basePath); 
//...


So the plugin code looks like that :

(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 () {
                    $('&lt;a class ="pdf" href="' + basePath + imageNumber + '.pdf' + '"target="_blank" &gt;&lt;/a&gt;')
                        .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], settings.fancyboxAnimations);
        });
        this.mouseover(settings.mouseOver);
        this.mouseout(settings.mouseOut);

        return this;
    };
})(jQuery);


As you can see every default settings is defined in an object and you can override it by passing it in the options object (which is then merge recursively with the defaults object). The nice thing is that it is now easily reusable. Also, using function($){}(jQuery); enclose the function scope so that it doesn't clash with any other library using $.

Here is a link to a fiddle, be free to update it with the paperObject, because I couldn't do it not knowing what it was.



To learn more about jQuery Authoring.