jQuery Globus Plugin

Особенности

1. Заменяет аналогичные инструменты на технологии flash
2. Вращение объекта мышкой, кнопками клавиатуры, кнопками на странице сайта
3. Автоматическое вращение
4. Управление скоростью вращения
5. Возможность назначить плагин на несколько объектов на странице
6. Плагин может возвращать объект, с помощью которого можно навешивать дополнительное управление и обработчики событий
7. Проверена работа под Windows XP в FF 3.5, Opera 10, IE 6+, Google Chrome, Safari 4

Пример

Check online frames converter! (Firefox 3.6+)

• Управление с помощью кнопок
• Простой вариант

Быстрый старт

Для работы плагина необходимо подключить его скрипт и библиотеку jQuery (версию 1.3.2 или выше):

		
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> </script>
<script type="text/javascript" src="jquery-beono-globus.js"></script> 
<style>
.beonoGlobus {
	position: relative;
	overflow: hidden;
}

.loading {
	background: url(loader.gif) no-repeat center center;
}
</style>
		
	

Необходимая html-разметка:

	
<div class="beonoGlobus"> 
  <img alt="photo" src="product-photo-sprite.jpg"/> 
</div> 

<script type="text/javascript"> 
  $(document).ready(function () {
    $(".beonoGlobus").beonoGlobus({ framesCount: 16 });
  });
</script> 
	
	

История версий

Download Globus Plugin (ver. 0.8) © License: GPLv2

0.8 / 2010.04.18

• Значительные изменения с потерей обратной совместимости!
• Чтобы реализовать эффект вращения необходимо собрать все фотографии предмета с разных сторон в одно изображение
• Необходимая html-разметка сведена к двум элементам (см. примеры выше)
• Добавлен вызов событий onReady, onBeforeRoateLeft, onAfterRoateLeft, onBeforeRoateRight, onAfterRoateRight, onBeforeStop, onAfterStop
• Добавлены свойства fadeInTime, rotateLeftButton, rotateRightButton, rotateResetButton
• Добавлены методы setMouseControl, getMouseControl, setKeyboardControl, getKeyboardControl

0.7.3 / 2009.10.30

• Исправлена баг с дерганием изображения при вращении мышью

0.7.2 / 2009.09.28

• Исправлена часть ошибок обработки событий

0.7 / 2009.09.26

• Теперь можно использовать одно изображение, содержащее все кадры
• Добавлены новые свойства и методы (mouseTurns, keyboardControl, setRotationMode(), getRotationMode(), setRotationSpeed(), getRotationSpeed(), rotateToFrame())
• Небольшой рефакторинг кода

^α 0.5 / 2009.09.17

• Управление мышью

0.4 / 2009.09.13

• Первый релиз

Описание API

Свойства

Во время подключения плагина можно передать дополнительные параметры.

		
// Set rotation speed 50 ms and disable keybord control
$(".beonoGlobus").beonoGlobus({ rotationSpeed: 50, keyboardControl: false }); 
		
	

Свойства

Свойство	Описание
framesCount	(int) 0
api	(string) all | last
rotationSpeed	(int) 100
mouseTurns	(int) 2
fadeInTime	(int) 0
mouseControl	(boolean) true
keyboardControl	(boolean) true
rotateLeftButton	(string) jQuery selector
rotateRightButton	(string) jQuery selector
rotateResetButton	(string) jQuery selector
onReady	(function) true
onBeforeRoateLeft	(function) true
onAfterRoateLeft	(function) true
onBeforeRoateRight	(function) true
onAfterRoateRight	(function) true
onBeforeStop	(function) true
onAfterStop	(function) true

Методы

		
// Set frames count and get last object
var obGlobus = $(".beonoGlobus").beonoGlobus({ framesCount: 10, api: "last"});

// Set auto rotation mode
obGlobus.setRotationMode("auto"); 
obGlobus.setRotationSpeed(50);
obGlobus.rotateLeft();
		
	

Методы

Метод	Описание
setMouseControl(value)	(boolean)
getMouseControl()	(boolean)
setKeyboardControl(value)	(boolean)
getKeyboardControl()	(boolean)
setRotationMode(mode_name)	mode_name (string) auto | default
getRotationMode()	return (string)
setRotationSpeed(speed)	speed (int)
getRotationSpeed()	return (int)
rotateToFrame(frame_number)	frame_number (int)
rotateLeft()
rotateRight()