Ok, it was a little more complicated than that...
you also need to change the <div class="tab-details-tab-content" data-id="map"> and <div class="tab-details-tab-content" data-id="photo"> . The div with the photo needs to come first.
We also need to change the javascript a little bit otherwise google maps won't be able to properly function:
$domready = "window.addEvent('domready', function(){ \n";
$domready .= hotspotsUtils::getJsLocalization() . "\n";
$domready .= hotspotsUtils::getJSVariables() . "\n";
$domready .= 'var hotspot = ' . json_encode($hotspot) . ';' . "\n";
//$domready .= "Hotspots.Single = new Hotspots.Hotspot(Hotspots.DefaultOptions, 'map_canvas', hotspot); " . "\n";
//$domready .= "var layout = new Hotspots.Layout.Hotspot(Hotspots.DefaultOptions, Hotspots.Single); layout.menu();layout.directions();" . "\n";
$domready .= "var tabs = new Hotspots.Tab('tab-details',{
tabSelector: '.tab-details-tab',
contentSelector: '.tab-details-tab-content'
});
var initialized = false;
var photo = false;
document.id('tab-details').getElements('.tab-details-tab-content').each(function(el){
if(el.get('data-id') == 'photo') {
photo = true;
}
});
tabs.addEvent('change', function(el) {
if(el == 'map') {
if(initialized == false) {
Hotspots.Single = new Hotspots.Hotspot(Hotspots.DefaultOptions, 'map_canvas', hotspot);
var layout = new Hotspots.Layout.Hotspot(Hotspots.DefaultOptions, Hotspots.Single); layout.menu();layout.directions();
initialized = true;
}
}
});
if(photo == false) {
tabs.fireEvent('change', 'map');
}
";
$domready .= "});";
@romuald - I've modified your template override so everything should be fine at your end.
Cheers,
Daniel
