Wordpress Imapper突出显示不会一直显示

时间:2016-01-14 11:42:14

标签: javascript wordpress

我的Imapper wordpress插件确实存在问题。 我希望它总是突出显示但我不知道该怎么做。我在css中尝试过像可见性或显示但它无法正常工作。所以我想用.js文件做一些事情,但我找不到要改变的东西。任何人都可以帮助我吗? 这是我的网站:http://multis.naszastrona.eu/parter/

这是.js文件代码:

/* ImageMapper Wordpress frontend script
*/
var Image;
var Canvas, Ctx;

jQuery(function($) {

    $('img[usemap]').each(function() {
        var areas = [];
        $('map[name="' + $(this).attr('usemap').substr(1) + '"]').find('area').each(function() {
            areas.push({
                'key': $(this).attr('data-mapkey'),
                'toolTip': $(this).attr('data-tooltip'),
                'isSelectable': false,
                'render_highlight': {
                    'fillColor': $(this).attr('data-fill-color'),
                    'fillOpacity': $(this).attr('data-fill-opacity'),
                    'strokeColor': $(this).attr('data-stroke-color'),
                    'strokeOpacity': $(this).attr('data-stroke-opacity'),
                    'stroke': $(this).attr('data-stroke-width') > 0,
                    'strokeWidth': $(this).attr('data-stroke-width'),
                    'fade': true,
                    'fadeDuration': 300
                }
            });
        });

        var map = this;
        $(this).mapster({
            clickNavigate: true,
            showToolTip: true,
            toolTipContainer: $('<div class="imagemapper-tooltip"></div>'),
            toolTipClose: ['area-click'],
            mapKey: 'data-mapkey',
            onClick: AreaClicked,
            onMouseover: function(m) {
                if(!m.options.toolTip.length)
                    $(map).mapster('tooltip', false);

                clearTimeout($(map).data('mapster-highlight-timeout'));
                $(map).mapster('highlight', false);
                $(map).mapster('highlight', m.key);
            },
            singleSelect: true,
            render_select: {
                fillOpacity: 0
            },
            areas: areas
        });

        // If pulse option is set, initialize it.
        if(imgmap.pulseOption && imgmap.pulseOption != 'never') {
            $(this).mouseenter(function(e) {

                //Prevent pulse from happening when mouse moves on the image map from tooltip or area. (Prevent mouseenter from "inner" elements)
                if($(e.fromElement).hasClass('imagemapper-tooltip') || $(e.fromElement).is('area')) 
                    return;

                //If this is set true, the pulse has been done already and Wordpress doesn't want to do it again.
                if(!$(this).attr('data-first-mouseenter')) {

                    //Mark image map as "pulsed" if the first_time pulse option is set.
                    if(imgmap.pulseOption == 'first_time')
                        $(this).attr('data-first-mouseenter', true);

                    //Prevent duplicate highlights
                    $(this).mapster('highlight', false);
                    //Highlight all areas
                    for(var area in areas) {
                        $(this).mapster('highlight', areas[area].key);
                    }

                    var map = this;

                    // Stop highlighting after a short delay
                    // Also fade highlighted areas out rather than hide them instantly
                    clearTimeout($(this).data('mapster-highlight-timeout'));
                    $(this).data('mapster-highlight-timeout', setTimeout(function() { 
                        $(map).closest('.imgmap-frontend-image').find('canvas').each(function() { 
                            $(this).stop().animate({ opacity: 0 }, 300, function() { $(map).mapster('highlight', false); });
                        });                     
                    }, 500));
                }
            });
        }
        //Close tooltips when clicking outside the tooltip.
        $('body').click(function(e) {
            if(!$(e.target).is('.imagemapper-tooltip') && !$(e.target).closest('.imagemapper-tooltip').length && $(e.target).attr('data-type') != 'tooltip')
                $(map).mapster('tooltip', false);

            if(!$(e.target).is('.imgmap-dialog-alt') && !$(e.target).closest('.imgmap-dialog-alt').length)
                $('.imgmap-dialog-alt').hide(200);
        }); 
    });
    if(!imgmap.alt_dialog) {
        if($().dialog) {
            $('.imgmap-dialog-wrapper').dialog({ 
                autoOpen: false, 
                zIndex: 10000,
                maxWidth: 700,
                width: 'auto',
                show: 300,
                dialogClass: 'imgmap-dialog',
                position: {
                    of: $(parent)
                    }
                });
            $('body').click(function(e) {
                if(!$(e.target).is('.ui-dialog, a') && !$(e.target).closest('.ui-dialog').length)
                    $('.imgmap-dialog-wrapper').each(function(e) { $(this).dialog('close'); });
            });
        }
        else {
            if($('area[data-type="popup"]').length) {

                if(imgmap.admin_logged) {
                    var close = $('<a>');
                    close.text('Close').css( { cursor: 'pointer', float: 'right', fontSize: '0.9em' });
                    close.click(function() { $('.imgmap-dialog-wrapper').text(''); });

                    $('.imgmap-dialog-wrapper').
                    html("There was a problem loading jQuery UI Dialog widget. A plugin or a theme you're using might be including its own copy of jQuery library which causes conflict with the copy included in Wordpress. Because of this ImageMapper isn't able to use jQuery UI Dialog widget causing the popup window function incorrectly or not at all.<br />This message is shown only to an admin. This message is shown because some of the image map areas on this page are using the popup functionality and thus not working properly.").
                    css({ color: 'red', padding: '5px', fontSize: '0.8em' }).append(close);
                }
            }
        }
    }



    $('.alternative-links-imagemap').
    click(AlternativeLinkClicked).
    mouseenter(function () {
        var mapster = $($(this).attr('data-parent').replace('imgmap', '#imagemap')).get(0);
        jQuery(mapster).mapster('highlight', false);
        jQuery(mapster).mapster('highlight', $(this).attr('data-key'));
    }).
    mouseleave(function () {
        var mapster = $($(this).attr('data-parent').replace('imgmap', '#imagemap')).get(0);
        jQuery(mapster).mapster('highlight', false);
    });

    $('.altlinks-toggle').click(function() {
        $('#altlinks-container-' + $(this).attr('data-parent')).toggle(200);
    });

});



function AlternativeLinkClicked() {
    var key = jQuery(this).attr('data-key');
    var type = jQuery(this).attr('data-type');
    var parent = jQuery(this).attr('data-parent');
    AlternativeLinkAction(key, type, parent);
}

function AlternativeLinkAction(areaKey, areaType, imagemap) {
    switch(areaType) {
        case 'popup': 
            OpenImgmapDialog(areaKey, jQuery('map[name="' + imagemap + '"]').get(0));
        break;

        case 'tooltip':
            imagemap = jQuery('img[usemap="#' + imagemap + '"]').get(0);
            jQuery(imagemap).mapster('tooltip', areaKey);
        break;
    }
}

function AreaClicked(data) {
    var type = jQuery('area[data-mapKey='+data.key+']').attr('data-type'); 
    if(type == 'popup' || type == '' ) {
        OpenImgmapDialog(data.key, jQuery(this).parent()[0]);
    }
}

function OpenImgmapDialog(key, parent) {
    var image = jQuery('#' + parent.name.replace('imgmap', 'imagemap'));
    var dialog = parent.name.replace('imgmap', '#imgmap-dialog');

    jQuery.post(imgmap.ajaxurl, { 
        action: 'imgmap_load_dialog_post',
        id: key.replace('area-', '')
        }, function(response) {
            if(response.length <= 0) return; 
            if(!imgmap.alt_dialog) {
                    jQuery(dialog).dialog('option', 'title', jQuery('area[data-mapkey='+key+']').attr('title'));
                    jQuery(dialog).html(response).dialog('open');
            } else {

                // Some ugly quick bug-fixing code
                // Sometimes it's needed since everything does not always make sense. Or at least seem to do.

                // Resets the element
                // Without this centering the element doesn't work well
                jQuery(dialog).replaceWith('<div class="imgmap-dialog-wrapper" id="' + dialog.replace('#','') + '" style="visibility:hidden"></div>').hide(0);

                jQuery(dialog).addClass('imgmap-dialog-alt').html(response);
                setTimeout(function() {
                    jQuery(dialog).position({ 
                        my: 'center',
                        at: 'center',
                        of: image
                    }).
                    hide().
                    css({visibility:'visible'}).
                    show(200);
                }, 0);


            }
    });
}

0 个答案:

没有答案