×
HeadHunter and Superjob rezume updater on Ruby on Rails (21 авг 2017)

Практикуемся в написании кода под rails.

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

Больше
4 года 10 мес. назад - 4 года 10 мес. назад #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!
Последнее редактирование: 4 года 10 мес. назад от Aleksej.

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