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

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

jQuery.bPopup.js. Мастерим всплывающие окна

Больше
9 года 7 мес. назад - 9 года 7 мес. назад #1 от Aleksej
Как и обещал, краткая инструкция для желающих освоить работу с jQuery.bPopup.js.
Демка - в блоге , там же чуть более подробное описание и ссылки.

Все очень несложно; качаем с гитхаба и распаковываем архив, из которого нам понадобится, пожалуй, всего только один jquery.bpopup.min.js .

Скачали? - отлично; HTML, который вам необходимо разместить на своей web-страничке, может выглядеть примерно вот так:

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.bpopup.min.js"></script> <script src="js.js"></script> <link rel="stylesheet" href="css.css" type="text/css" /> <!-- Button that triggers the popup --> <button id="my-button">Жми сюда!</button> <!-- Element to pop up --> <div id="element_to_pop_up"> <a class="b-close">x<a/> Content of popup </div>

Версию jquery можно выбрать и поновее (это я так, по старой памяти 1.9.1 вписал), файлы js.js и css.css (натурально, обзовите как хотите) вам предстоит сделать самостоятельно. Не, ну как "сделать"... копипастните для начала с этой страничке, не смертельно, а потом, глядишь, и само пойдет. :)

Итак:

css
Code:
#element_to_pop_up { background-color:#fff; border-radius:15px; color:#000; display:none; padding:20px; min-width:400px; min-height: 180px; } .b-close{ cursor:pointer; position:absolute; right:10px; top:5px; }


js
Code:
// Semicolon (;) to ensure closing of earlier scripting // Encapsulation // $ is assigned to jQuery ;(function($) { // DOM Ready $(function() { // Binding a click event // From jQuery v.1.7.0 use .on() instead of .bind() $('#my-button').bind('click', function(e) { // Prevents the default action to be triggered. e.preventDefault(); // Triggering bPopup when click event is fired $('#element_to_pop_up').bPopup({ speed: 650, transition: 'slideIn', transitionClose: 'slideBack' }); }); }); })(jQuery);


Ну вот, собственно, и все. Уже должно работать.
Последнее редактирование: 9 года 7 мес. назад пользователем Aleksej.

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

Dev banner 2
Больше
9 года 6 мес. назад #2 от beginner
Привет, интересный плагин. Но что касается всплывающих окон для сайта на джумла, рулит по-моему rokbox. Позволяет вставить не только ссылку, по которой открывается pop-up-окно, но и thumbnail. Да и вообще, удобен.

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

Больше
6 года 5 мес. назад #3 от cool guy
Мне нужно несколько popup на одной странице, размещаю код как сказано выше, но открывается только первое popup. Как решить эту проблему?

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

Больше
6 года 5 мес. назад #4 от serge

cool guy пишет: Мне нужно несколько popup на одной странице, размещаю код как сказано выше, но открывается только первое popup. Как решить эту проблему?


меняем
Code:
$('#my-button').bind('click', function(e) {

на
Code:
$('.my-button').bind('click', function(e) {

и вместо
Code:
<button id="my-button">Жми сюда!</button>

пишем
Code:
<button class="my-button">Жми сюда!</button>


Пример: jsfiddle.net/yg5so25s/2/

А я смогу! - А поглядим! - А я упрямый!

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

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