• Скидка на платные статусы  -50%!

    получи безграничный доступ к нашим файлам, скриптам, курсам и другим инфопродуктам со скидкой -50%

     

    Подробнее

Компактная карта на страницах InstantMaps 2

Васёк

Проверенные
11.10.17
106
16
#1
Изначально карта будет отображаться уменьшенной по высоте и раскрываться при клике по ссылке внизу карты.

Инструкция
#1 Открыть файл \templates\default\content\places_list.tpl.php

Найти контейнер:
[ERROR]HTML:
<div id="maps-map-block">...</div>
Привести к следующему виду:
HTML:
<div id="maps_map_block">

<div id="maps-map-block">
<?php if ($options['is_city_filter']) { ?>
<div id="maps-city-selector">
<a class="ajaxlink ajax-modal" href="<?php echo href_to('places', 'city_select'); ?>" title="<?php echo LANG_PLACES_CITY_SELECT; ?>"><?php echo $city_name; ?></a>
</div>
<?php } ?>
<div id="map-canvas" style="height: <?php echo $options['height']; ?>px"></div>
</div>

</div>
<a href="javascript:void(0)" id="map_toggler" onclick="map_toggler($(this));"><span>развернуть</span></a>[/ERROR]
В этом же файле, перед строкой:
Код:
[ERROR]</script>
Добавить:
PHP:
map_toggler = function(ths){

if($('#maps_map_block').hasClass('is_fulsize')){
$('span',ths).text('развернуть');
$('#maps_map_block').removeClass('is_fulsize');
}else{
$('span',ths).text('свернуть');
$('#maps_map_block').addClass('is_fulsize');
}
}[/ERROR]
#2 Открыть файл: templates\default\controllers\places\styles.css
Добавить строки:
[ERROR]PHP:
#maps-map-block{
border:0 !important;
}
#maps_map_block{
max-height:100px;
overflow:hidden;
margin-top:15px;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
}
#maps-map-block{
margin-top:-170px;
margin-bottom:0;
transition: margin 700ms;
}
#maps_map_block.is_fulsize{
max-height:600px;
}
#maps_map_block.is_fulsize #maps-map-block{
margin-top:0;
}

#map_toggler{
display:block;
width:100%;
height:28px;
text-align:center;
background:#fff;
text-decoration:none !important;
padding-top:14px;
margin-bottom:10px;
position:relative;
}
#map_toggler:before{
background:#0078D7;
height:2px;
line-height:2px;
content:" ";
display:block;
margin-bottom:-14px
}
#map_toggler span{
background:#fff;
height:28px;
line-height:28px;
display:block;
width:120px;
text-align:center;
margin:0 auto;
color:#0078D7;
font-size:13px;
font-weight:bold;
padding:0 15px;
text-transform:uppercase;
}[/ERROR]