用户单击地图上的标记时，将弹出信息框（带有更多控件的信息窗口）。在此弹出窗口中，我当前正在尝试插入jQuery图像滑块，尤其是NivoSlider。
问题：
但是，此图像滑块仅在普通HTML页面上有效，而在“信息框”内完全不可用。我需要图像在信息框中运行。
jQuery / JS代码
加载jQuery图像滑块的部分由<div id="slider class="nivoSlider"><img...../><img....../></div>"包围
$(window).load(function() {
$（'＃slider'）。nivoSlider（）; //将nivoslider加载到div #slider中
$（“＃search_button”）。click（function（e）{
e.preventDefault（）;
var search_location = $（“＃search_location”）。val（）;
$ .getJSON（.........................，function（）{
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()的原因附加信息：我正在将Google Maps API V3与PHP和Codeigniter框架一起使用。
最佳答案
滑块通过绑定事件侦听器来工作，当从DOM树中删除infoWindow时，该事件侦听器将丢失（Google映射在不可见的情况下从DOM树中删除该信息窗口）。即使出现infoWindow，侦听器仍将消失。
您将不得不重写NivoSlider插件的滑块侦听器部分。这是一些指导。
编写一个单击处理程序，mousemove处理程序和一个mouseup处理程序函数，并将其放在某个位置（可能在NivoSlider插件内部，这样就不会污染整个空间）。像这样：
$.fn.nivoSlider.handlers = {
sliderClickHandler: function (event) {
// register mousemove and mouseup handlers
$(document).bind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
$(document).bind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
},
sliderMMoveHandler: function (event) {
// process mousemove event (move the slider, change images, etc. put your logic here)
},
sliderMouseupHandler: function (event) {
// unregister the listeners since the click event has completed
$(document).unbind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
$(document).unbind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
}
};
现在，将HTML中的liderClickHandler直接注册为
onclick事件：<div id="slider" class="nivoSlider" onclick="$.fn.nivoSlider.handlers.sliderClickHandler()">
请注意，您无法执行以下操作：
onclick="sliderClickHandler()"
因为您将侦听器直接放入将从全局空间执行的DOM元素中（并且没有任何其他命名空间绑定到它），所以与典型的javascript不同，我们习惯于将这些函数用作闭包和封装/记住它们的位置被定义）。
这种解决方法存在一个主要问题（但我想不出一种更好的方法）。如果您的页面上有多个NivoSlider（您可能会这样做），那么您自然会希望处理程序函数的行为取决于您与之交互的NivoSlider。由于您不能在每个实例上动态创建处理程序作为闭包，因此每个NivoSlider都必须具有唯一的ID，并且处理程序必须根据当前是哪个活动对象来执行操作。 （因此，您必须将当前活动的NivoSlider的ID存储在某处）。
祝好运。绝对可行，尽管不是很有趣。