seaweed Posted April 15, 2009 Share Posted April 15, 2009 I am using a JQuery slider for a photo gallery. It displays one large photo, with six thumbnails below that, click them, it changes the large photo etc. Here's a screenshot. Right now the file names for the photos are hardcoded into the HTML, but I want to populate them with php/MySQL. So I put 18 photos in a database and can query them. My question is what kind of loop structure to use here? There is a DIV that needs repeated only once per batch of 6, and <li> rows that need repeated 6 times per page, one per thumbnail, and then you'd have to close out the original DIV. I have tried everything I know from pagination but that relies on using multiple pages. Since this is a slider it is technically all one page/DIV, so using $currentPage doesn't work. Any ideas? I can wireframe it out like this: *start first loop and echo main slider DIV * *start second loop and echo individual slide DIV * *start third loop and display six thumbnails* *close third loop* *close second loop* *start another second loop and echo another individual slide DIV* *start another third loop and echo the next six thumbnails* *close third loop* *close second DIV* *start another second loop and echo another individual slide DIV* *start another third loop and echo the next six thumbnails* *close third loop* *close second DIV* *close first DIV* Quote Link to comment Share on other sites More sharing options...
JD* Posted April 16, 2009 Share Posted April 16, 2009 echo '<div id="main_slider_div">'; $result = mysql_query("SELECT * FROM pictures ORDER BY something") or die(mysql_error()); $counter = 0; for($i=0;$i < 3;$i++) { echo '<div id="second_loop_div">'; $i2 = $counter + 6; for($i2 = $i2; $i2 < $i2 + $counter; $i2++) { echo '<div id="individual_pic">'.mysql_result($result, $i2, "picture").'</div>'; if($i2+1 > $i2 + $counter) { $counter = $i2; } } } Not sure if that will work at all, but it should. I know the first two loops will, but for counting your photos you'll have to test it out. I'm sure someone else may have a better solution. Quote Link to comment Share on other sites More sharing options...
seaweed Posted April 16, 2009 Author Share Posted April 16, 2009 that doesn't work, it breaks... the thumbnails are in a list, here's the code that I need to duplicate with a loop: This is how it is hardcoded, need to bring it out of a db instead. I know how to do that but not how to loop this dang thing. <div class="cs_slider"> <div class="cs_article"> <div id="gallery1"> <img src="pics/1.jpg" title="1" alt="1" /> <ul> <li class="pics1"><span><i><em></em><img src="pics/1.jpg" title="1" alt="1" /></i></span></li> <li class="pics2"><span><i><em></em><img src="pics/2.jpg" title="2" alt="2" /></i></span></li> <li class="pics3"><span><i><em></em><img src="pics/3.jpg" title="3" alt="3" /></i></span></li> <li class="pics4"><span><i><em></em><img src="pics/4.jpg" title="4" alt="4" /></i></span></li> <li class="pics5"><span><i><em></em><img src="pics/5.jpg" title="5" alt="5" /></i></span></li> <li class="pics6"><span><i><em></em><img src="pics/6.jpg" title="6" alt="6" /></i></span></li> </ul> </div> </div> <div class="cs_article"> <div id="gallery2"> <img src="pics/7.jpg" title="7" alt="7" /> <ul> <li class="pics7"><span><i><em></em><img src="pics/7.jpg" title="7" alt="7" /></i></span></li> <li class="pics8"><span><i><em></em><img src="pics/8.jpg" title="8" alt="8" /></i></span></li> <li class="pics9"><span><i><em></em><img src="pics/9.jpg" title="9" alt="9" /></i></span></li> <li class="pics10"><span><i><em></em><img src="pics/10.jpg" title="10" alt="10" /></i></span></li> <li class="pics11"><span><i><em></em><img src="pics/11.jpg" title="11" alt="11" /></i></span></li> <li class="pics12"><span><i><em></em><img src="pics/12.jpg" title="12" alt="12" /></i></span></li> </ul> </div> </div> <div class="cs_article"> <div id="gallery3"> <img src="pics/13.jpg" title="13" alt="13" /> <ul> <li class="pics13"><span><i><em></em><img src="pics/13.jpg" title="13" alt="14" /></i></span></li> <li class="pics14"><span><i><em></em><img src="pics/14.jpg" title="14" alt="14" /></i></span></li> <li class="pics15"><span><i><em></em><img src="pics/15.jpg" title="15" alt="15" /></i></span></li> <li class="pics16"><span><i><em></em><img src="pics/16.jpg" title="16" alt="16" /></i></span></li> <li class="pics17"><span><i><em></em><img src="pics/17.jpg" title="17" alt="17" /></i></span></li> <li class="pics18"><span><i><em></em><img src="pics/18.jpg" title="18" alt="18" /></i></span></li> </ul> </div> </div> </div> Quote Link to comment Share on other sites More sharing options...
xtopolis Posted April 16, 2009 Share Posted April 16, 2009 This example seems to work on a variable number of pictures. You could probably modify this to suit your needs. **Edit: should work now ** be sure to run tests~ <?php $imgs = range('A','F');// select imgs from db $amt = count($imgs);//mysql num rows ?> <html> <head> <body> <div class="cs_slider"> <?php $y = 0; $x = 0; $z = ($amt > 6) ? 6 : $amt; //images per section while($y < ceil($amt / $z)){ echo "<div class='cs_article'>\n"; echo "<div id='gallery". ($y + 1) ."'>\n"; echo "<img src='pics/". $imgs[$x] ."' title='". ($x + 1) ."' alt='". ($x + 1) ."' />\n"; echo " <ul>\n"; $limit = (($amt - $x) > $z) ? $z : ($amt - $x); for($i = 0; $i < $limit; $i++) { echo "\t<li class='pics". ($x + 1) ."'><span><i><em></em><img src='pics/". $imgs[$x] ."' title='". ($x + 1) ."' alt='". ($x + 1) ."' /></i></span></li>\n"; $x++; } echo " </ul>\n"; echo "</div><!-- gallery -->\n"; echo "</div><!-- cs_article -->\n\n"; $y++; } ?> </div><!-- cs_slider --> </body> </html> Let me know if that doesn't work, I only tested a few values for number of images. Quote Link to comment Share on other sites More sharing options...
seaweed Posted April 18, 2009 Author Share Posted April 18, 2009 I've pretty much got things working but there's a logical error somewhere in my loop(s). Instead of displaying six thumbnails per slide, it displays thumbnail 1.jpg thru the end of that loop; so the first slide has 6 thumbnails, the second slide has 12 thumbnails, the third has 18 etc. In the second and third screenshots below you can't see the previous rows of thumbnails because their background-image property is only defined in CSS for their own slide ($gallery), but they are there, invisible, and pushing the subsequent rows down. If you click the empty brown space on slide 2 or 3 (I circled them in red and blue on Slide3 Screenshot), it will change the main photo to whatever thumbnail is hiding there. It should only be displaying the current 6 thumbnails, any ideas? I think is has something to do with my for loop: When I change this: for($i=1;$i<=$num_rows;$i++) { to this: for($i=1;$i<=6;$i++) { it only displays 6 thumbnails on the first slide and no thumbnails on the next two slides. Where's my error? I tried a for each loop with no luck. Is it my modulus? Screenshot Slide 1 Screenshot Slide 2 Screenshot Slide 3 The code: <?php $getPhotos = mysql_query("SELECT * FROM photos WHERE catID = '1' AND projID = '1'") or die(mysql_error()); $num_rows = mysql_num_rows($getPhotos); $num_per_gallery = 6; $num_galleries = ceil($num_rows / $num_per_gallery); while(($row = mysql_fetch_array( $getPhotos )) && $gallery <= $num_galleries) { $catID = $row["catID"]; $projID = $row["projID"]; $photoID = $row["photoID"]; $photoDate = $row["photoDate"]; $photoBy = $row["photoBy"]; $photoCaption =$row["photoCaption"]; if ($gallery < 1) { $gallery = 1; } else { $gallery = $gallery; } $galleryNumber = "gallery" . $gallery; $defaultPicA = (($gallery*$num_per_gallery)-5); $defaultPicB = "pics/" .$defaultPicA. ".jpg"; echo "<div class=\"cs_article\">"; echo "<div id=\"$galleryNumber\">"; echo "<img src=\"$defaultPicB\" title=\"$defaultPicA\" alt=\"$defaultPicA\" />"; echo "<ul>"; for($i=1;$i<=$num_rows;$i++) { $liclass = "pics" . $i; $photoLink = "pics/" .$i. ".jpg"; echo "<li class=\"$liclass\"><span><i><em></em><img src=\"$photoLink\" title=\"$liclass\" alt=\"$liclass\" /></i></span></li>"; } if (($i % 6) && ($i!=0)) { echo "</ul></div></div>"; } $gallery++; } ?> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.