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

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

Pop-up для MixItUp

Больше
9 года 7 мес. назад - 5 года 5 мес. назад #1 от Aleksej
Aleksej создал тему: Pop-up для MixItUp
Рабочий код, обещанный в статье блога Pop-up для MixItUp .

html
Code:
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery.mixitup.min.js"></script> <script src="js/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jQuery_modal.js"></script> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" href="flick/jquery-ui.css" type="text/css" /> <script type="text/javascript"> $(function(){ $('#Container').mixItUp({ animation: { duration: 700, effects: 'stagger(34ms) rotateZ(20deg) fade scale(0.41)', easing: 'ease' }, load: { filter: '.category-1, .category-2, .category-3' } }); }); </script> <div class="controls"> <button class="filter" data-filter=".category-1, .category-2, .category-3">All</button> <button class="filter" data-filter=".category-1">Category 1</button> <button class="filter" data-filter=".category-2">Category 2</button> <button class="filter" data-filter=".category-3">Category 3</button> </div> <div id="Container" class="container1"> <li class="mix category-1"><img src="/images/1.jpg" longdesc="#1" onclick="jQuery_modal(this)" alt=""></li> <li class="mix category-1"><img src="/images/2.jpg" longdesc="#2" onclick="jQuery_modal(this)" alt=""></li> <li class="mix category-2"><img src="/images/3.jpg" longdesc="#3" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-1"><img src="/images/4.jpg" longdesc="#4" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-2"><img src="/images/5.jpg" longdesc="#5" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-1"><img src="/images/6.jpg" longdesc="#6" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-1"><img src="/images/7.jpg" longdesc="#7" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-2"><img src="/images/8.jpg" longdesc="#8" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-3"><img src="/images/9.jpg" longdesc="#9" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-3"><img src="/images/10.jpg" longdesc="#10" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-3"><img src="/images/11.jpg" longdesc="#11" onclick="jQuery_modal(this)" alt=""></a></li> <li class="mix category-3"><img src="/images/12.jpg" longdesc="#12" onclick="jQuery_modal(this)" alt=""></a></li> </ul> </div> <div class="gap"></div> <div id="dialog-modal" style="display: none"></div> <div id="1" style="display: none"><img src="/images/1.jpg" /></div> <div id="2" style="display: none"><img src="/images/2.jpg" /></div> <div id="3" style="display: none"><img src="/images/3.jpg" /></div> <div id="4" style="display: none"><img src="/images/4.jpg" /></div> <div id="5" style="display: none"><img src="/images/5.jpg" /></div> <div id="6" style="display: none"><img src="/images/6.jpg" /></div> <div id="7" style="display: none"><img src="/images/7.jpg" /></div> <div id="8" style="display: none"><img src="/images/8.jpg" /></div> <div id="9" style="display: none"><img src="/images/9.jpg" /></div> <div id="10" style="display: none"><img src="/images/10.jpg" /></div> <div id="11" style="display: none"><img src="/images/11.jpg" /></div> <div id="12" style="display: none"><img src="/images/12.jpg" /></div>

css
Code:
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .controls{ padding: 2%; background: #333; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #999; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container1{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; /*background: #68b8c4;*/ min-height: 450px; -webkit-backface-visibility: hidden; } .container1:after{ content: ''; display: inline-block; width: 100%; } .container1 .mix, .container1 .gap{ display: inline-block; width: 49%; } .container1 .mix{ text-align: left; /*background: #03899c;*/ margin-bottom: 2%; display: none; } .container1 .mix.category-1{ border: 1px solid #ccc; } .container1 .mix.category-2{ border: 1px solid #ccc; } .container1 .mix.category-3{ border: 1px solid #ccc; } .container1 .mix:after{ content: attr(data-myorder); color: white; font-size: 16px; display: inline-block; vertical-align: top; /*padding: 4% 6%; */ font-weight: 700; } .container1 .mix:before{ content: ''; display: inline-block; /*padding-top: 60%;*/ } @media all and (min-width: 420px){ .container1 .mix, .container1 .gap{ width: 32%; } } @media all and (min-width: 640px){ .container1 .mix, .container1 .gap{ width: 23.5%; } } .mix.category-1 > img { width: 100%; } .mix.category-2 > img { width: 100%; } .mix.category-3 > img { width: 100%; }

Разумеется, следует озаботиться, чтобы все пути к картинкам и скриптам были актуальны.
Последнее редактирование: 5 года 5 мес. назад пользователем p.rishard.

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

Dev banner 1
Больше
9 года 7 мес. назад - 5 года 5 мес. назад #2 от Aleksej
Aleksej ответил в теме Слайдер для MixItUp
Можно вставить и слайдер, почему нет-то. Публикую здесь это ЦУ, которое с полным правом можно назвать пособием для ленивых... да, все не просто, а - очень просто. Сказано ведь было, что MixItUp все равно, чего крутить - текст, картинки, модули, видео... этот плагин работает с контентом, в подробности он не вникает.

Итак. 1. Создаем еще одну категорию и еще одну кнопку для слайдера:

Code:
<div class="controls"> <button class="filter" data-filter="all">All</button> <button class="filter" data-filter=".category-1">Category 1</button> <button class="filter" data-filter=".category-2">Category 2</button> <button class="filter" data-filter=".category-3">Category 3</button> <button class="filter" data-filter=".category-4">Slider</button> </div>


2. Находим любую неиспользуемую на нашем сайте позицию модуля Joomla и в стилях скрываем ее по ID:

Code:
#user5 { display: none; }


3. В этой позиции публикуем на страничке MixItUp наш слайдер (любой). Отображаться он, понятное дело, пока что не должен, коль скоро позиция модуля - display: none.

4. В стилях MixItUp (как один из вариантов - приведены в первом сообщении топика) добавляем для вновь созданной категории:

Code:
@media all and (min-width: 640px){ .container .mix.category-4, .container .gap{ width: 0; } }


Это - если оно вам понадобится. Мне хотелось подровнять положение слайдера в MixItUp, приподняв его чуть повыше. Действуйте эмпирическим путем, выражаясь по-ученому.

5. Ну и все, остался самый последний штрих. В mod_custom, куда мы с вами засунули HTML нашего MixItUp - добавляем в наш основной контейнер еще один div:

Code:
<div class="mix category-4" {modules slider} </div>


Получится примерно так:

Code:
.……. <li class="mix category-2"><img src="image/8.jpg" longdesc="#8" onclick="jQuery_modal(this)" alt=""></a></li> </ul> <!-- Это наш новый слайдер, начало --> <div class="mix category-4" {modules slider} </div> <!-- Это наш новый слайдер, окончание --> </div> <div class="gap"></div> </div>


Это все. Вместо "slider" в фигурных скобках должно быть название вашего слайдера, вместо "modules" - "module", и при условии, что module_anywhere у вас установлен - все мгновенно заработает.

Я ведь обещал, что это будет пособие для лентяев! :laugh:
Последнее редактирование: 5 года 5 мес. назад пользователем p.rishard.

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

Больше
9 года 6 мес. назад #3 от beginner
beginner ответил в теме Слайдер для MixItUp

Aleksej пишет: Можно вставить и слайдер, почему нет-то.


Просто HTML как туда воткнуть?

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

Больше
9 года 6 мес. назад #4 от Aleksej
Aleksej ответил в теме Слайдер для MixItUp

beginner пишет: Просто HTML как туда воткнуть?



for example:

html
Code:
<a class="img pull-left" href="osnovnye-svedeniya"> <img alt="" src="images/company/pic.jpg"> </a> <span class="media-object media-heading muted">Основные сведения</span> <a class="title" href="osnovnye-svedeniya">Институт "такой-то" - основное.</a> </div> </section> </div></div>

это был пример HTML плашки; все остальное ничем не отличается от приведенного выше кода. Использованный css:


css
Code:
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, button{ font-family: 'Helvetica Neue', arial, sans-serif; } .controls{ padding: 2%; background: #00669b; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #80b1cd; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #6db33f; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container{ padding: 2% 2% 0; text-align: justify; font-size: 15px; background: #68b8c4; /*new_style*/ margin-left: auto !important; margin-right: auto !important; width: 100%; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ text-align: left; /*background: #03899c;*/ margin-bottom: 2%; display: none; } .container .mix.category-1{ background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); } .container .mix.category-2{ background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); } .container .mix:after{ color: white; font-size: 16px; display: inline-block; vertical-align: top; padding: 4% 6%; font-weight: 700; } /* .container .mix:before{ content: ''; display: inline-block; padding-top: 60%; } */ @media all and (min-width: 420px){ .container .mix, .container .gap{ width: 32%; } } @media all and (min-width: 640px){ .container .mix, .container .gap{ /*width: 23.5%; tmp_delete*/ height: 150px; vertical-align: top; } } /* media */ .media-object {display:block;} .media-narrow {padding-left:15px; padding-right:15px;} .media-heading {padding-bottom:0; margin:10px 7px 7px;} .media .img {display:block;} .media .img img {-webkit-transition:opacity .2s ease-in-out; -moz-transition:opacity .2s ease-in-out; -o-transition:opacity .2s ease-in-out; transition:opacity .2s ease-in-out; float: left; padding: 15px;} .media a.img:hover img {opacity:.8;} .media .subtitle, .media .title, .media .descr {display:block; margin:0 2px 7px; padding-bottom:0;} .title {color:#333;} .media .link {color:#00669b; cursor:pointer;} .media .muted {font-size:11px;} .media a.muted {color:#787777;} .media a.muted:hover {color:#003366;} .media > .pull-left {margin-right:10px; margin-bottom:0;} .media > .pull-right {margin-left:10px; margin-bottom:0;} .media > .pull-left + .media-padding {padding-left:5px;} .media > .pull-right + .media-padding {padding-right:5px;} .media .title-padding {padding-top:10px; padding-bottom:10px;} .media .small {font-size:10px;} .media .media-sep {border-bottom:2px solid #00669b;} .media .media-sep.sep-primary {border-bottom-color:#6db33f;} .media a {text-decoration:none;} .media a.underline, .media .underline {text-decoration:underline;} .media a:hover {text-decoration:none;} .media a.link-caret {text-decoration:underline;} .media a.link-caret:hover {text-decoration:none;} .media .muted { font-size: 16px; } .muted, a.muted, .muted a { color: #00669b; } .title { font-size: 13px; color: #a4a5a5 } a.title:hover { color: #666; } .container {padding:20px 20px 10px; margin:0; background:#fff; position:relative; height: 700px;} #jsn-page, #jsn-pos-topbar { height: auto; }

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

Больше
9 года 6 мес. назад #5 от Прохожий
Прохожий ответил в теме Слайдер для MixItUp
Так. Я правильно понимаю, что этот скрипт работает с любым HTML ?

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

Больше
9 года 6 мес. назад #6 от Aleksej
Aleksej ответил в теме Слайдер для MixItUp

Прохожий пишет: Так. Я правильно понимаю, что этот скрипт работает с любым HTML ?


ну, полагаю, что да. Взгляните на еще одну демку .

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

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