Темизирую сайт на друпал не могу подобрать алгоритм для слайд-шоу на jquery.
Так чтобы картинки(их по 4 в каждом артикле) по очереди показывались через 5 секунд так:
С начала первая занимает 75% <div>-а а остальные размером в высоту 25% и 25% в ширину справа потом вторая в 75%X75% остальные по 25% справа и т.д.
Вот код для каждого артикля
<div class="field__item">
<div class="field__item">
<img class="myphoto" src="/dfgh/ertyhjk1.jpg">
</div>
<div class="field__item">
<img class="myphoto" src="/dfgh/ertyhjk2.jpg">
</div>
<div class="field__item">
<img class="myphoto" src="/dfgh/ertyhjk3.jpg">
</div>
<div class="field__item">
<img class="myphoto" src="/dfgh/ertyhjk4.jpg">
</div>
</div>
С начала создал 5 стилей(создал 5 для разных экспериментов) один из них увеличивает картинку остальные одинаковые и делают картинку 25 на 25(). Потом добавил классы для каждой <img> и <div>-ов с первого по четвертый на каждого.
Далее для первого шага слайд-шоу(увеличить первую картинку) сделать все просто. А для второго шага столкнулся с проблемой перемещения каждых первых элементов после каждых вторых.
(function ($, Drupal) {
'use strict';
//Стилизация изображения
$("img.image-style-my-style-350x250-").parents("div.field__item").addClass('photo-parent');
$(".photo-parent:nth-child(4n-3)").addClass('one');
$("div.one img.image-style-my-style-350x250-").addClass("firsti");
$(".photo-parent:nth-child(4n-2)").addClass('two');
$("div.two img.image-style-my-style-350x250-").addClass("secondi");
$(".photo-parent:nth-child(4n-1)").addClass('three');
$("div.three img.image-style-my-style-350x250-").addClass("thirdi");
$(".photo-parent:nth-child(4n)").addClass('four');
$("div.four img.image-style-my-style-350x250-").addClass("fourthi");
//слайд-шоу
var i=1;
setInterval(function(){
if(i==1){
$("div.one img").toggleClass("firsti bigg");
}else if(i==2){
$(".photo-parent:nth-child(4n-3)").insertAfter($(".photo-parent:nth-child(4n-3)").next());
$("div.one img").toggleClass("firsti bigg");
$("div.two img").toggleClass("secondi bigg");
}
i++;
if(i>4){
i=1;
}
},5000);
})(jQuery, Drupal);
как переместить каждые firsti изображения после каждых secondi?
