当用户单击地图上的标记时,我会弹出信息框(带有更多控件的信息窗口)。在这个弹出窗口中,我目前正在尝试插入一个 jQuery 图像滑块,特别是 NivoSlider。
问题: 但是,此图像滑块仅在普通 HTML 页面上有效,而在信息框内则根本无效。我需要图像在信息框内工作。
jQuery/JS 代码
加载 jQuery 图像滑块的部分由<div id="slider class="nivoSlider"><img...../><img....../></div>"
$(window).load(function() {
$('#slider').nivoSlider(); //加载div中的nivoslider #slider
$("#search_button").click(function(e){ e.preventDefault(); var search_location = $("#search_location").val(); $.getJSON(....... ..............., 功能() {
for( i = 0; i < json.length; i++) {
// Place markers on map
var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
markers.push(marker);
// Create infowindows
var boxText = '<div id="infobox"> \
<div id="infobox_header_title"> \
<span id="infobox_header_price">$' + json[i].price + '</span> \
<span id="infobox_header_room">' + json[i].bedroom + 'br </span> \
<span id="infobox_header_address">' + json[i].address_1 + '</span> \
</div> \
<div id="slider" class="nivoSlider"> \
<img src="/images/cl/' + json[i].photos[0] + '.jpg" /> \
<img src="/images/cl/' + json[i].photos[1] + '.jpg" /> \
</div> \
</div>';
var infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: true,
pane: "floatPane",
enableEventPropagation: false
};
var infobox = new InfoBox(infoboxOptions);
infobox.open(map, markers[i]);
infoboxes.push(infobox);
// Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
//infoboxes[this._index].open(map, markers[i]);
infoboxes[this._index].show();
});
};
// Fill screen with markers
mapAutoCenter(markers);
});
我认为导致这种情况的原因:可能与在开始时调用<div>
时未创建信息框中的有关$('#slider').nivoSlider()
附加信息:我正在使用带有 PHP 和 Codeigniter 框架的 Google Maps API V3。