gpt4 book ai didi

php - 通过 getJSON 检索的图像的
在append()之后消失

转载 作者:行者123 更新时间:2023-12-02 20:40:00 25 4
gpt4 key购买 nike

我正在开发一个 GMaps 应用程序来通过 getJSON() 检索图像并填充弹出标记。

以下是我动态添加到标记的标记:

<div id="images"></div>                 
<div id="CampWindow" style="display:none;width:550px;height:500px;">
<h4 id="camp-title"></h4>
<p>View... (all links open in new windows)</p>
<ul>
<li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li>
<li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li>
</ul>
<p id="message"></p>

在过去的几天里,我一直在努力让图像显示在 CampWindow 内。然后,我决定横向思考,看看图像是否被检索到。然后,我将图像移到外面,并且像鲍勃(希望)一样,每次点击都会检索和刷新图像。

因此,我决定将图像保留在外部,然后加载后将其附加到 CampWindow 中。它仍然无法工作;当我将 div 附加到主 CampWindow div 时,图像将不会显示。我用指针检查 Firebug,它显示图像为空。我用外面的图像再次尝试,它显示了图像。我之前尝试过append和appendTo但没有成功。我在这里错过了什么吗?

我已经没有更多的东西可以挖了。拜托,请帮忙。

  marker.clicked = function(marker){
$("#images").html('');
$('#camp-title').text(this.name);
$('#camp-hp-link').attr('href', this.url);
$('#camp-av-link').attr('href', this.url + '/tourism/availability.php');
$('#camp-vi-link').attr('href', this.url + '/tourism/general.php');

// get resort images via jQuery AJAX call - includes/GetResortImages.inc.php
$.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages);

function RetrieveImages (data)
{
if ('failed' == data.status)
{
$('#messages').append("<em>We don't have any images for this rest camp right now!</em>");
}
else
{
if ('' != data.camp)
{
$.each(data, function(key,value){
$("<img/>").attr("src", value).appendTo('#images');
});
}
}
}
//.append($("#images"));
$("#CampWindow").show();
var windowContent = $("<html />");
$("#CampWindow").appendTo(windowContent);

var infoWindowAnchor = marker.getIcon().infoWindowAnchor;
var iconAnchor = marker.getIcon().iconAnchor;
var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y);
map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset});
}
markers.push(marker);
});

最佳答案

当您添加<html>时标记到您的页面会使浏览器感到困惑,并且很可能是问题所在。我建议要么像 Pointy 所说的那样使用 window.open()制作一个弹出窗口(查看 this tutorial) ,或者更好地尝试众多 jQuery light box plugins 之一。

<小时/>

我不确定您正在使用谷歌地图做什么,所以我决定只为您提供一个基本示例。使用此脚本,如果您单击 #image 内的图像div,它将打开一个与图像大小相同的弹出窗口。

$(document).ready(function(){
$('#images img').click(function(){
var padding = 20;
var w = $(this).width() + padding;
var h = $(this).height() + padding;
var popup = '\
<html>\
<head>\
<link type="text/css" href="popup-style.css" rel="stylesheet" />\
<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr'+'ipt>\
</head>\
<body>\
<img src="' + $(this).attr('src') + '">\
</body>\
</html>';
var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
pop.document.write(popup);
pop.document.close();
})
});

注意:在字符串中添加脚本标记时,请确保分解“script”一词,否则会出现错误。

<小时/>

更新#2:好的,既然您想使用现有的东西,请尝试这样做:

删除<html>从您的campwindow 中标记,然后使用CSS 和/或javascript 定位您的campwindow。添加如下内容:

 var w = $(window).width();
var h = $(window).height();
// Add overlay and make clickable to hide popup
// you can remove the background color and opacity if you want to make it invisible
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Position your popup window in the viewport
$('#CampWindow').css({
position: 'absolute',
top : $(window).scrollTop() + 50 + 'px',
left : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
zIndex : 100
})
.fadeIn('slow');
// Click overlay to hide popup
$('#overlay').click(function(){
$('#CampWindow').hide();
$(this).remove(); // remove the overlay
})

关于php - 通过 getJSON 检索的图像的 <div> 在append()之后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2652832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com