Reputation: 360
I'm running a while loop to display all images under a path;
<?php
$files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
for ($i=0; $i<count($files); $i++)
{
$root = "http://www.rafflebananza.com/";
$imagePath = $files[$i];
$withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
$imageName = str_replace("../Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);
echo '<div class="UploadedImgs">
<div class="ImgName">'.$imageName.'</div>
<div class="IMG">
<img src="'.$root.$imagePath.'" alt="Random image" />
</div>
</div>';
}
?>
What I'd like to now happen is a maximum of 8 images to show and add a button at the bottom going from 1 to X, wrapping each 8 in a div I'll set to be hidden and set the links at the bottom as the tab switchers.
How do I run an additional while loop passing vars back and forth?
Almost there!
<?php
$files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
echo '<div class="Wrapper">'; //First tab
$t = 0;
for ($i=0; $i<count($files); $i++)
{
$root = "http://www.rafflebananza.com/";
$imagePath = $files[$i];
$withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
$imageName = str_replace("../Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);
if( $i % 8 == 0 ) {
$t = $t + 1;
echo '<div id="Tab_'.$t.'" class="Tabs"><h1>Tab_'.$t.'</h1>'; //hidden class
}
echo '<div class="UploadedImgs">
<div class="ImgName">'.$imageName.'</div>
<div class="IMG">
<img src="'.$root.$imagePath.'" alt="'.$imageName.'" />
</div>
</div>';
if( $i > 0 && $i % 7 == 0 ) {
echo '</div>';
}
if( $i % 8 == 0 ) {
echo '<a href="'.$t.'" class="tab-switcher">'.$t.'</a>';
}
}
echo '</div>'; //closes last div
?>
The CSS
.Wrapper .Tabs:nth-child(n+2) {
display:none;
}
Upvotes: 0
Views: 107
Reputation: 4284
You can resolve it with mod operator: %,
if a number is divisible by 8, then you have 8 images. So you can do it like this:
<?php
$files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
echo '<div class="UploadedImgs">'; //First tab
for ($i=0; $i<count($files); $i++)
{
$root = "http://www.rafflebananza.com/";
$imagePath = $files[$i];
$withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
$imageName = str_replace("../Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);
if( $i % 8 == 0 )
echo '</div><div class="UploadedImgs hidden">'; //hidden class
echo '<div class="ImgName">'.$imageName.'</div>
<div class="IMG">
<img src="'.$root.$imagePath.'" alt="Random image" />
</div>
</div>';
if($i % 8 == 0)
echo '<a href="#" class="tab-switcher">Change tab</a>'; //link to change tab
}
echo '</div>'; //closes last div
?>
Upvotes: 2