如何将灯箱放置在传单的弹出窗口中

问题描述 投票:1回答:1

当我单击传单中的Google地图上的特定弹出窗口时,以及如何使地图尺寸可调整大小时,我希望在灯箱中放大图像;>

这里是我的代码

 <body>
      <div id="map" style="width: 600px; height: 400px"></div>
      <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
       <script>
      var map = L.map('map').setView([42.307755, -83.067849], 13);

       L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
               id: 'mapbox.streets'
        }).addTo(map);

         var ly=L.marker([45.307755, -89.067849]).addTo(map)
            .bindPopup("<b>U</b><br /> k").openPopup();
          var ln=L.marker([45.305422, -83.065374]).bindPopup('Tower').addTo(map);


      </script>
     </body>

[我希望在传单中单击Google地图上的特定弹出窗口时在一个灯箱中放大图像,以及如何在此处使地图大小可调整大小是我的代码

html google-maps popup leaflet lightbox
1个回答
0
投票

Lightbox2(免费的JavaScript库)对我来说效果很好。我在传单弹出窗口中有缩略图,用户只需单击即可放大这些缩略图。 lightbox2解决了我的问题,例如prettyphoto不能正常工作。 lightbox2菜单,文档在这里下载:https://lokeshdhakar.com/projects/lightbox2/

© www.soinside.com 2019 - 2024. All rights reserved.