Joomla 4. Компонент K2 и форк K2ForJ4 (18 янв 2024)

Если вас, как и меня, достало выслушивать (вычитывать) бесконечные обещания разработчика K2 опубликовать версию компонента K2 под Joomla 4 (без чего невозможно реализовать апгрейд from Joomla 3 to Joomla 4) - воспользуйтесь форком K2ForJ4. Который в данный момент установлен и без каких-либо проблем работает на этом веб-сайте.

Подключаем JZoopraxiscope

Больше
11 года 4 мес. назад - 11 года 4 мес. назад #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.

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


2. Reference jQuery and jQuery UI libraries from your page

Code:
<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'

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

4. Define the options

Code:
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)

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

6. Control JZoo

Code:
//Play the animation $('#animation').jzoopraxiscope('play'); //Stop the animation $('#animation').jzoopraxiscope('stop');



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

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

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