开发者

jQuery - Counting images and then wrapping a certain amount

Im using wordpress to develop a site ... im doing the template in a very custom way, what im doing is running my own que开发者_如何学JAVAry to get all the images from the wordpress backend.

What i have works perfect to display every one of them, but what i want to do is display 6 images normally, and then wrap all the rest in a div .. is this possible?

the code i have at the moment is as follows:

$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;

What i want to do is display the first 6 normally, and then any that are added after the first 6 to be wrapped in their own container, so for example, if i have added 8 images to the backend, the generated code will look like so

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

Cheers


I answered with jQuery since you tagged it as such. I think this is much better if done via PHP

Here's a demo : http://jsfiddle.net/jomanlk/zrWHA/

It uses paragraphs but it's the same principle

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


Change it from foreach to for and you have a counter ready to go. Use it like so:

$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>';
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜