Нужно всего лишь немного JS кода и библиотеки jQuery, чтобы создать такую полнофункциональную штуку, как плагин MobilyMap.
MobilyMap плагин jQuery конвертирует обычное изображение в функциональную карту, как, например, у Google, и весит всего 6KB.
JavaScript
$('.map').mobilymap({
position: 'center', // map position after loading - 'X Y', 'center', 'top left', 'top right', 'bottom left', 'bottom right'
popupClass: 'bubble',
markerClass: 'point',
popup: true, // show popup on marker click - true/false
cookies: true, // remember last map position - true/false
caption: true, // show caption - true/false
setCenter: true, // sets the map view to the center on marker click
outsideButtons: null, // selector, only anchors eg. '.map_buttons a'
onMarkerClick: function(){}, // call the function on marker click (popup must be disabled)
onPopupClose: function(){}, // call the function after popup closing
onMapLoad: function(){} // call the function after loading map
});
HTML
<div class="map">
<img src="path_to_image" alt="caption" width="image_width" height="image_height" />
<div class="point" id="p-900-130"> <!-- p-x-y (x is distance from left, y is distance from top) -->
<!-- popup content -->
</div>
<!-- markers -->
</div>
HTML код маркера:
<a href="#" rel="p-900-130"> .. </a>
<!-- 'rel' attribute have to be the same as marker 'id' attribute! -->
Если у вас предложения по улучшению данного плагина, оставляйте ниже ваши комментарии.
Нет комментариев на “Плагин MobilyMap, конвертирующий изображение в функциональную карту”
добавить комментарий