Paginated Gallery Question

[seaweed]

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*

[JD*]

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.

[seaweed]

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>

[xtopolis]

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.

[seaweed]

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++;  			        				} 					 			  
?>