thinsoldier · October 31, 2017 02:29 · Oct 31, 2017 · Oct 31, 2017 · Oct 31, 2017
diff --git a/gallery.php b/gallery.php
@@ -1,5 +1,5 @@
 <?
-// This list of file names will be turned into an array.
+// This $files string is list of file names will be turned into an array.
 $files = '
 3.jpg
 4.jpg
@@ -54,9 +54,10 @@
 
 // Reusable string template:
 /* removed all the stuff that could be replaced with modern css feautures like nth-child and object-fit */
+/* removed things related to an older gallery overlay script used before the switch to magnific.js */
 $itemFormat = '
 <li>
-	<a class="lightview" href="gallery/medium/%s">
+	<a href="gallery/medium/%s">
 		<img src="gallery/thumb/%s" alt="photo">
 	</a>
 </li>'."\n";

diff --git a/gallery.php b/gallery.php
@@ -1,12 +1,5 @@
 <?
-//5009dd8d7112c.jpg
-//5009dd81f3e9b.jpg
-//5009dd877a5d6.jpg
-//5009de4573746.jpg
-//5009de401f6ae.jpg
-//5009de4aba9c0.jpg
-//5009df6f9176e.jpg
-
+// This list of file names will be turned into an array.
 $files = '
 3.jpg
 4.jpg
@@ -48,42 +41,60 @@
 5009dfadc670b.jpg
 5009ec9967c21.jpg
 ';
+// Similar to javascript's string.split
+// turns the $files string into an array.
 $files = explode("\n", $files);
+// Remove any blank entries from the $files array.
 $files = array_filter($files);
 #var_dump($files);
 
-
+// $items is an array that will contain strings
+// of html list items and anchors and images (<li><a><img>)
 $items = array();
+
+// Reusable string template:
+/* removed all the stuff that could be replaced with modern css feautures like nth-child and object-fit */
 $itemFormat = '
-<li class="md%s">
-	<a class="lightview"	data-lightview-group="gallery" href="gallery/medium/%s">
-		<img src="gallery/thumb/%s" class="%s" id="p-%s" alt="photo">
+<li>
+	<a class="lightview" href="gallery/medium/%s">
+		<img src="gallery/thumb/%s" alt="photo">
 	</a>
 </li>'."\n";
+
+// Loop through all of the entries in the $files array and build the string of
+// <li><a><img> for them and add them to the $items array
+// by using the $itemFormat string template:
 foreach($files as $key => $image)
 {
-	$modulo = ($key+0)%6;
-
-	$orient = getimagesize("gallery/thumb/$image");
-
-	if($orient[0] > $orient[1]) { $orient = 'wide'; } else { $orient = 'tall'; }
-
-	$noExt = explode('.', $image);
-	$noExt = $noExt[0];
-
-	$items[] = sprintf($itemFormat, $modulo, $image, $image, $orient, $noExt);
+	/* removed all the stuff that could be replaced with modern css feautures like nth-child and object-fit */
+	$items[] = sprintf($itemFormat, $image, $image);
 }
 
-// An extra 6 empty items for a flexbox workaround:
+// Add an extra 6 empty items for a flexbox bug workaround:
 $items[] = '<li></li><li></li><li></li><li></li><li></li><li></li>';
 
+// Create a string of a <ul> tag containing a script tag containing all the <li> for the gallery.
+// PHP's implode is the same as javascripts Array.join.
+// The old JS would wait for the whole page load and then pull all the <li> out of the script tag
+// and add them as actual children of the <ul> which would then allow the images to actually load.
 $text = '<ul class="gallery"> <script type="text/waitforit">'. implode('', $items) . '</script></ul>';
-
-
 ?>
 
+<!-- 
+print the html that wraps this whole section and within that 
+print the $text variable which contains all the <ul><li><a><img>...
+-->
 
 <div id="content">
 	<h1>Photos</h1>
 	<? echo $text; ?>
-</div>
+</div>
+
+
+<!-- 
+Most of this can be thrown away and replaced with a 
+JS array or json containing the list of image file names
+and then typical React stuff.
+
+The gallery shows "thumb" versions of the images on the page and links to "medium" or "large" versions.
+-->
diff --git a/gallery.php b/gallery.php
@@ -0,0 +1,89 @@
+<?
+//5009dd8d7112c.jpg
+//5009dd81f3e9b.jpg
+//5009dd877a5d6.jpg
+//5009de4573746.jpg
+//5009de401f6ae.jpg
+//5009de4aba9c0.jpg
+//5009df6f9176e.jpg
+
+$files = '
+3.jpg
+4.jpg
+5.jpg
+6.jpg
+7.jpg
+8.jpg
+9.jpg
+10.jpg
+11.jpg
+12.jpg
+13.jpg
+14.jpg
+15.jpg
+16.jpg
+17.jpg
+18.jpg
+5009dc3dd2261.jpg
+5009dd0a585b7.jpg
+5009dd0e48d9c.jpg
+5009dd6b34e94.jpg
+5009dd06b66ac.jpg
+5009dd7c442bf.jpg
+5009dd121f81c.jpg
+5009dd710df62.jpg
+5009dd764a44d.jpg
+5009dd06403c5.jpg
+5009dd6585672.jpg
+5009ddfc154c2.jpg
+5009de023c0a2.jpg
+5009de5017972.jpg
+5009df9be3cb7.jpg
+5009df69ea440.jpg
+5009df645bda4.jpg
+5009df7513fde.jpg
+5009dfa6ab08e.jpg
+5009dfa16e7f7.jpg
+5009dfaa3d8c5.jpg
+5009dfadc670b.jpg
+5009ec9967c21.jpg
+';
+$files = explode("\n", $files);
+$files = array_filter($files);
+#var_dump($files);
+
+
+$items = array();
+$itemFormat = '
+<li class="md%s">
+	<a class="lightview"	data-lightview-group="gallery" href="gallery/medium/%s">
+		<img src="gallery/thumb/%s" class="%s" id="p-%s" alt="photo">
+	</a>
+</li>'."\n";
+foreach($files as $key => $image)
+{
+	$modulo = ($key+0)%6;
+
+	$orient = getimagesize("gallery/thumb/$image");
+
+	if($orient[0] > $orient[1]) { $orient = 'wide'; } else { $orient = 'tall'; }
+
+	$noExt = explode('.', $image);
+	$noExt = $noExt[0];
+
+	$items[] = sprintf($itemFormat, $modulo, $image, $image, $orient, $noExt);
+}
+
+// An extra 6 empty items for a flexbox workaround:
+$items[] = '<li></li><li></li><li></li><li></li><li></li><li></li>';
+
+$text = '<ul class="gallery"> <script type="text/waitforit">'. implode('', $items) . '</script></ul>';
+
+
+?>
+
+
+<div id="content">
+	<h1>Photos</h1>
+	<? echo $text; ?>
+</div>
No results found