jQuery — подсчет изображений и затем перенос определенного количества

#jquery

#jquery

Вопрос:

Я использую WordPress для разработки сайта… я создаю шаблон очень нестандартным способом, я выполняю свой собственный запрос, чтобы получить все изображения из серверной части WordPress.

То, что у меня есть, идеально подходит для отображения каждого из них, но то, что я хочу сделать, это нормально отобразить 6 изображений, а затем обернуть все остальные в div.. возможно ли это?

код, который у меня есть на данный момент, выглядит следующим образом:

 $query = "SELECT * FROM wp_ngg_pictures WHERE galleryid = '1'";
$fp_banners = $wpdb->get_results($query, OBJECT);

foreach ($fp_banners as $banners):
    <img src="/wp-content/gallery/frontpage/<?php echo $banners->filename; ?>" alt="image description" width="773" height="432" />
endforeach;
  

Что я хочу сделать, так это отобразить первые 6 в обычном режиме, а затем все, что добавляется после первых 6, будет помещено в их собственный контейнер, так что, например, если я добавил 8 изображений в серверную часть, сгенерированный код будет выглядеть следующим образом

 <img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<div>
    <img src="image.jpg" alt="image description" width="773" height="432" />
    <img src="image.jpg" alt="image description" width="773" height="432" />
</div>
  

Приветствия

Ответ №1:

Я ответил с помощью jQuery, поскольку вы отметили его как таковой. Я думаю, что это намного лучше, если сделать через PHP

Вот демонстрация: http://jsfiddle.net/jomanlk/zrWHA /

В нем используются абзацы, но принцип тот же

 $('img:gt(5)').wrapAll('<div>');
  

Ответ №2:

Измените его с foreach на for, и счетчик готов к работе. Используйте это следующим образом:

 $query = "SELECT * FROM wp_ngg_pictures WHERE galleryid = '1'";
$fp_banners = $wpdb->get_results($query, OBJECT);

foreach ($i = 0; $i < $wpdb->num_rows; $i  ):
  if ($i == 6) {
    echo '<div>';
  }
  ?>
  <img src="/wp-content/gallery/frontpage/<?php echo $banners->filename; ?>" alt="image description" width="773" height="432" />
  <?php 
endforeach;

if ($i > 5) {
  echo '</div>';
}
  

Комментарии:

1. Если я использовал этот способ, <?php echo $banners-> filename; ?> затем становится недействительным, не так ли?

2. Нет. Целью моего примера было сделать это в вашем серверном коде, а не в клиентском, что я бы счел предпочтительным.