Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → MobilyMap плагин - карта на jQuery

MobilyMap плагин - карта на jQuery


Демо: смотреть
Скачать: mobilymap.zip [547,04 Kb] (cкачиваний: 523)


MobilyMap является мощным JQuery плагином с размеров всего лишь (7 КБ), который может создать карту как Google Maps, перетаскивания любого изображения в интерфейсе. Так же существуеют метки и стрелочки перемещения.

Особенности:
можете добавить маркеры
отображения HTML-контента, когда маркер нажат
расположение карты как вы захотите
4 кнопки для перемещения
перетаскивание карты мышкой

Список изменений:

18.1.2011 - исправления анимация
8.1.2011 - добавил кнопки для прокрутки в четырех направлениях (появляется в верхнем левом углу карты)
15.12.2010 - добавил открытый метод, который позволяет показать маркеры при нажатии на кнопки за пределами
14.12.2010 - добавил метод (называемый setCenter), который устанавливает карту в центр
8.12.2010 - исправления для браузера IE7

$('.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
    navigation: true, // display buttons to pan in four directions
    navSpeed: 1000, // speed of panning map (higher value for slow panning)
    navBtnClass: 'navBtn',
    outsideButtons: false, // 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>


Ресурсы:
Карты - http://speckyboy.com/2011/01/01/vector-world-map-collection-redux/

Если у вас есть идея или предложение, как улучшить этот плагин, не стесняйтесь оставить комментарий ниже.
Опубликовал dimas_ua, 15-05-2011, 00:00 Комментариев: 2
 (голосов: 10)
Пишет rozickkal, 18 июля 2011 10:53
  • Сообщений: 0
  • Новостей: 0
Привет мальчишки!Меня зовут Роза и мне срочно нужен партнер для виртуального секса!Я уже предстовляю как ты трахаеш мою узкую попочку а после чего я обсасываю твой член и облизываю твои яички...ммм. Заходи в мою анкету на бесплатном сайте интим знакомств и добавляй в друзья!
Вот ссылка tinyurl.com/roza80/ А дальше мы найдём чем с тобой заняться я тебе это обещаю! С уважением Роза
Пишет rozickkal, 19 июля 2011 01:30
  • Сообщений: 0
  • Новостей: 0
Привет мальчишки!Меня зовут Роза и мне срочно нужен партнер для виртуального секса!Я уже предстовляю как ты трахаеш мою узкую попочку а после чего я обсасываю твой член и облизываю твои яички...ммм. Заходи в мою анкету на бесплатном сайте интим знакомств и добавляй в друзья!
Вот ссылка tinyurl.com/roza80/ А дальше мы найдём чем с тобой заняться я тебе это обещаю! С уважением Роза