0

单击我的 googlemaps img 后，我希望将我的 google api 添加到 fancybox。

这是网址

我希望一旦单击 google img，它会从 fancybox 中打开一个灯箱，然后在灯箱中运行 google api。

我知道我可以添加一个 iframe 并使用 fancybox 输入它，但由于我现在正在学习 javascript，我想看看它是如何工作的。

我在这里找到了从 fancybox 运行的 js 代码

来自灯箱的 html 是

<div class="fancybox-outer">
<div style="overflow: visible; width: 350px; height: 280px;" class="fancybox-inner">

<img class="fancybox-image" src="images/directv_g_map.jpg" alt="">

</div>
</div>

如果我自己可以做到这一点，我就不会发布这个，但是在尝试这样做 10 多个小时后，我感到沮丧，因为我无法清楚地思考。

-我一直试图让谷歌 api 做一个窗口 onclick = init; 然后运行----没有工作
-onclick和onload的不同版本----没有工作
-我认为效果最好的一个是createElement，但我一直无法获得灯箱img的ID，因为它只有类标签。我计划编辑 js 文件只是为了包含一个 if 语句，该语句将创建一个 div id，然后我可以在其中加载我的 google api，但没有运气。
-if(src == "directv_g_map.jpg") 然后将 src 更改为 google api

再次，我仍在学习，但希望能得到一些帮助，谢谢

4

1 回答 1

0

您需要使用在fancybox 内容显示后触发的“afterShow”事件。

然后你可以用一个div替换你在fancybox中的图像并初始化谷歌地图。

$(".fancybox").fancybox({
    width   :   '70%',
    height  :   '70%',
    afterShow: function InitMap(){
            //replace image with div 
            $('.fancybox-image').replaceWith("<div id='map' style='width: 100%;height: 100%;'></div>");
            //set up and initialize map
            var mapOptions = {
                    center: new google.maps.LatLng(31.784887,-106.356604),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);    

        }
});

这是工作示例

您可以在此处找到有关 fancybox 事件/方法的更多信息（此链接位于您的 fancybox js 文件之上）

于 2013-05-27T07:57:54.193 回答