Jquery вызов не работает должным образом для создания центра Div с использованием imageMapster - PullRequest
Новая
       26

Jquery вызов не работает должным образом для создания центра Div с использованием imageMapster

0 голосов
/ 06 февраля 2020

Я использую плагин imageMapster для карты изображений, которую я использую в проекте, но div, в котором находится карта изображений, не будет центрироваться. Выполняя некоторые исследования и просматривая этот пост:

Центрирование с помощью imageMapster

Я обнаружил, что jQuery по умолчанию выравнивает элементы по левому краю с помощью динамического c контейнера , Согласно сообщению, вам нужно вызвать изображение и сбросить css, чтобы центрировать его. Однако, следуя инструкциям поста, это не сработало для меня. Любая помощь приветствуется 

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/js/jquery.imagemapster.min.js"></script>
</head>
<body>
    <section class="white">
    <div class="container-fluid text-center"><br>
<h1>Helena Neighborhoods</h1>
<div class="row">
    <div class="col-md-12">
    <div><p style="text-align: center;"><div class="pm-column-title-divider" style="margin-top:30px; margin-bottom:30px;"><div class="pm-column-title-divider-symbol"></div><div class="pm-column-title-divider-end-point left"></div><div class="pm-column-title-divider-end-point right"></div></div>
        <p>Hover over areas on the map to see neighborhood information!</p>
                <img src="pictures/Google-Earth-Image.JPG" id="image" style="width: 1566px; max-width: 100%; height: auto;" alt="" usemap="#neighborhoods" />
        <map name="neighborhoods">
    <area id="id1" href="#" alt="Upper West Side" title="Upper West Side" href="upperwestside Modal" coords="268,456,275,528,308,543,344,541,365,528,399,542,434,564,442,576,450,621,461,648,479,632,496,550,475,517,338,444,311,441" shape="poly">
    <area id="id2" href="#" alt="South Central" title="South Central" href="southcentral Modal" coords="467,644,482,619,493,583,495,535,612,537,611,678,629,684,629,702,572,698,572,675,532,666,515,664,499,699,466,693" shape="poly">
    <area id="id3" href="#" alt="Lower East Side" title="Lower East Side" href="lowereastside Modal" coords="612,500,712,524,731,575,677,592,614,585" shape="poly">
    <area id="id4" href="#" alt="Upper East Side" title="Upper East Side" href="uppereastside Modal" coords="731,578,907,759,560,760,506,697,518,666,569,675,571,698,636,699,615,677,612,588,677,592" shape="poly">
    <area id="id5" href="#" alt="Southeast Helena" title="Southeast Helena" href="southeastHelena Modal" coords="738,582,789,633,916,763,966,763,1031,763,1059,760,1074,741,1094,733,1100,695,1102,672,1127,662,1145,650,1153,632,1159,608,1080,597,1055,583,1027,597,993,596,954,586,878,585" shape="poly">
    <area id="id6" href="#" alt="Lower West Side" title="Lower West Side" href="upperwestside Modal" coords="501,531,493,471,495,453,467,438,442,429,412,419,398,415,367,404,356,412,356,424,344,426,331,419,302,420,290,424,275,435,265,451,320,438,403,473" shape="poly">
    <area id="id7" href="#" alt="North Central" title="North Central" href="North Central Modal" coords="503,534,611,535,612,286,525,289,521,375,499,372,495,433" shape="poly">
    <area id="id8" href="#" alt="North East" title="North East" href="North East Modal" coords="616,286,669,283,669,377,670,429,679,455,702,495,709,520,614,495" shape="poly">
    <area id="id9" href="#" alt="North West" title="North West" href="North West Modal" coords="524,271,463,268,467,329,359,332,365,397,488,447,495,372,518,369" shape="poly">
</map><br><br><br>
    </div></div></div><br><br></div>
    <script>
    $(function() {
         var UpperWest = 'Upper West Side';
         var SouthCentral = 'South Central';
         var LowerEast = 'Lower East Side';
         var UpperEast = 'Upper East Side';
         var SouthEast = 'South East Helena';
         var LowerWest = 'Lower West Side';
         var NorthCentral = 'North Central';
         var NorthEast = 'North East';
         var NorthWest = 'North West';

        $('#image').mapster({
            mapKey: 'id',
            fillColor: 'c2d99b',
            fillOpacity: 0.5,
            showToolTip: true,
            toolTipClose: ["tooltip-click", "area-click", "image-mouseout", "area-mouseout"],
            toolTipContainer: '<div style="border:0.5px solid black; background: #FFFFFF; font-family:Titillium Web; text-align: left; font-size: 20px; position:absolute; width:250px; padding:4px; box-shadow: rgb(83, 83, 83) 3px 3px 5px; border-radius: 6px; opacity: 0.90; display: block; z-index: 9999;"></div>',
            areas: 
            [{
                key: 'id1',
                staticState: false,
                toolTip: UpperWest,
            },
            {
                key: 'id2',
                staticState: false,
                toolTip: SouthCentral
            },
            {
                key: 'id3',
                staticState: false,
                toolTip: LowerEast
            },
            {
                key: 'id4',
                staticState: false,
                toolTip: UpperEast
            },
            {
                key: 'id5',
                staticState: false,
                toolTip: SouthEast
            },
            {
                key: 'id6',
                staticState: false,
                toolTip: LowerWest
            },
            {
                key: 'id7',
                staticState: false,
                toolTip: NorthCentral
            },
            {
                key: 'id8',
                staticState: false,
                toolTip: NorthEast
            },
            {
                key: 'id9',
                staticState: false,
                toolTip: NorthWest
            }]
        }).parent().css({"margin":"0 auto"});
    });
    </script>
...