×
Masterpro Nivo Slider (06 фев 2023)

Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.

Решено Подключаем JZoopraxiscope

Подробнее
10 года 3 мес. назад - 10 года 3 мес. назад #1 от Aleksej
Aleksej создал тему: Подключаем JZoopraxiscope
JZoopraxiscope – это jQuery-плагин, разработанный под впечатлением вдохновения, вызванного первым пленочным проектором Zoopraxiscope. Назначение JZoopraxiscope - создание анимированного изображения из списка изображений статичных, для чего здесь используется jQuery и jQuery UI. Вся работа JZoopraxiscope заключена в вызове простой функции, в которой мы указываем расширение изображений и кадра. Что из всего этого может получиться - вы имеете возможность увидеть на страничке блога ; а достигается полученный результат вот таким вот несложным способом (собственно, содержание файла README):

1. Download JZoopraxiscope and reference the jquery.jzoopraxiscope.js file in your page.

<script src="jquery.jzoopraxiscope.js"></script>


2. Reference jQuery and jQuery UI libraries from your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>


3. Prepare the static sequence. Every frame must have the same width and be attached to his previous frame in a horizontal image. Refer to the included file 'jzoo.jpg'

<pre>
+------------+------------+------------+------------+
|  Frame 1   |  Frame 2   |  Frame 3   |  Frame 4   |
+------------+------------+------------+------------+
</pre>

4. Define the options

var optionsAnimation = {
				'widthItem' : 380,
				'widthImage' : 4560,
				'height' : 306,
				'image' : 'images/jzoo.jpg'}

**widthItem**: Width of every frame.   
**widthImage**: Width of the entire image.   
**height**: Height of the image.   
**image**: Location of the image. Use relative or absolute path, relative paths are related to the html document where the plugin is installed.


5. Initialize a div with JZoo (#animation)

//Html
<div id="animation" style="border: 1px solid #999; margin: auto;"></div>
//Javascript
$('#animation').jzoopraxiscope(optionsAnimation);

6. Control JZoo

//Play the animation
$('#animation').jzoopraxiscope('play');

//Stop the animation
$('#animation').jzoopraxiscope('stop');



Enjoy!
Последнее редактирование: 10 года 3 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум