Pop-up для MixItUp - IT-C@FE

  1. Форум
  3. Форум
  5. Web-сайт своими руками
  7. Pop-up для MixItUp
×
Masterpro Nivo Slider (06 фев 2023)

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

Решено Pop-up для MixItUp

Подробнее
9 года 2 нед. назад - 4 года 10 мес. назад #1 от Aleksej
Aleksej создал тему: Pop-up для MixItUp
Рабочий код, обещанный в статье блога Pop-up для MixItUp .

html
<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
*{
  -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%;
}

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

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

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

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

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

#user5 {
  display: none;
}


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

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

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


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

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

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


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

.…….
<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:
Последнее редактирование: 4 года 10 мес. назад пользователем p.rishard.

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

Подробнее
9 года 1 нед. назад #3 от beginner
beginner ответил в теме Слайдер для MixItUp

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


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

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

Подробнее
9 года 1 нед. назад #4 от Aleksej
Aleksej ответил в теме Слайдер для MixItUp

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



for example:

html
<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
*{
  -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;
}

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

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

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

Подробнее
8 года 11 мес. назад #6 от Aleksej
Aleksej ответил в теме Слайдер для MixItUp

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


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

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

  1. Форум
  3. Форум
  5. Web-сайт своими руками
  7. Pop-up для MixItUp

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