Как сделать слайдшоу на чистом css в цикле?

Question

[kolibry1]

доброго времени.
в цикле (стандартной WP-шной wp_get_attachment_url( $at_id ), но в данном случае это не важно)) выводятся по очереди фотки.
сориентируйте плз, как можно реализовать слайдшоу с миниатюрами. (когда несколько маоеньких миниатюр, при клике на каждую из которых в отдельном блоке увеличивается та, по которой кликнули). Не модальное окно!
есть решения на css, но они предполагают два раза выводить картинки - один раз миниатюры, второй раз крупные, и сявзывать их ID-шниками.

<ul id="slider">
      <li id="1">
        <img src="image1.jpg" height="438" width="700" />
      </li>
      <li id="2">
        <img src="image2.jpg" height="438" width="700" />

      </li>
    </ul>
        <!-- малые -->
    <ul id="thumb">
      <li>
        <a href="#1">
          <img src="image1.jpg"  height="50" width="50" />
        </a>
      </li>
      <li>
        <a href="#2">
          <img src="image2.jpg" height="50" width="50" />
        </a>
      </li>
    </ul>

Но в моем случае это цикл. В один цикл занести и то и то не получается,а если в разных циклах - картинки между собой не синхронизированны.

foreach ( $attachment_ids as $at_id ) {
                              $at_url = wp_get_attachment_url( $at_id );
                              echo '<img src="'.$at_url.'" width="95px">';
                              
                         }

в общем, надеюсь не очень сумбурно написал.
p.s. jQuery решения не подходят, потому что на сайте и так костылями много версий jQuery всунуто, еще одну не потянет.

Comments

[HamSter]

в цикле - значит автоматически (друг за другом)?

[kolibry1]

HamSter: да, и id генерируется динамически. Его можно записать в переменную, но она будет действительна только для данной итерации

[OVK2015]

Зачем вам два набора то? Большую картинку можно попросту вписать в нужный размер,- готовая миниатюра. По клику вывести ее в какой угодно размер. Зачем такой огород городить?

[kolibry1]

OVK2015: нет, я не про два копии картинок) я про два блока выводов - один вывод для миниатюр, второй для больших.

[OVK2015]

kolibry1:

и сявзывать их ID-шниками.

ID то уникальный по задумке должен быть. При формировании этих блоков добавляйте какой-нибудь одинаковый data- атрибут для одинаковых картинок. При клике берет его и отображаете картинку с таким же из др. блока.
Хотя зачем этих блока два все равно не понял.

Answer 1

[Павел]

Почему не получается в цикле вывести два раза? код покажите.
Если нужно именно два списка, то делаем так

<ul id="slider">
<?php
foreach ( $attachment_ids as $at_id ) { ?>
  <li id="<?php echo $at_id?>">
    <img src="<?php echo wp_get_attachment_link($at_id,'full');?>">
</li>
 <?php  } ?>
</ul>
 <ul id="thumb">
<?php
foreach ( $attachment_ids as $at_id ) { ?>
  <li>
    <a href="#<?php echo $at_id?>">
    <img src="<?php echo wp_get_attachment_link($at_id,'thumbnail');?>">
    </a>
</li>
 <?php  } ?>
</ul>

Comments

[kolibry1]

потому что и первый и второй набор картинок должен быть обрамлен во что-то (div, или ul/li... и крайние теги (див или ul) должны быть снаружи цикла.)
поэтому обе обёртки у двух последовательных наборов вывести наружу не получается, код сейчас приложу, минуту.

[kolibry1]

добавил в код