<div style="display: none;">
<div id="location<?php echo $r->id ?>">
<?php echo $r->address; ?>, <?php echo $r->city; ?>, <?php echo $r->province; ?>
<h3 class="sub">Map of Location</h3>
<?php
$CI->conjunction->showMap($r->id, $r->lat, $r->lon, $r->postal, 'map_canvas');
?>
<div id="map_canvas" style="width: 250px; height: 250px;"></div>
</div>
</div>
The above code is what I am using to display a hidden DIV. I then use
$('a#inline').fancybox({
'autoScale': true
, 'autoDimens开发者_StackOverflow社区ions': true
, 'centerOnScroll': true
});
To call Fancybox to display the content. However, the Google map always breaks the lightbox and is displayed by default.
Is there a reasonable workaround to force the map to hide until the DIV wrapping around it shows?
I have had a similar problem with flash applications which fill the browser viewport: the workaround was to pull it via a URL into an iframe with fancybox.
$("a#inline").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'slow',
'transitionOut' : 'none',
'type' : 'iframe'
});
<a id="various5" href="http://mappage">Link</a>
This is not ideal as you can see but it is a workaround.
Not quite sure how to solve this problem, but you might want to look into this plugin:
http://colorpowered.com/colorbox/
I was using fancybox for a while until I realized it made IE hang until all the images on the page were loaded. Maybe see if you get the same results using this plugin?
精彩评论