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>';
}
精彩评论