title: Lightbox System w/ SQL
body: <p>I'm currently building a small PHP photo gallery system using lightbox. 
  My code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-7 offset-2 p-2"&gt;
    &lt;a href="uploads/entrance.jpg" data-lightbox="gallery"&gt;&lt;img src="uploads/entrance.jpg" alt=""&gt;&lt;/a&gt;
    &lt;?php foreach ($photos as $photo){?&gt;
                &lt;a  class="gone" href="&lt;?php echo $photo-&gt;file_path('uploads',$photo-&gt;filename)?&gt;" data-  lightbox="gallery"&gt;&lt;img src="&lt;?php echo $photo-&gt;file_path('uploads',$photo-&gt;filename)?&gt;" alt=""&gt;&lt;/a&gt;
    &lt;?php } ?&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wish to show the first indexed/id photo as the thumbnail/cover image. Once the user wishes to view the gallery, they can click the image and lightbox launches allowing a preview of the photos drawn from SQL.</p>
  
  <p>How do I achieve this?</p>
  
  <p>This may be quite an amateur question, but I'm meddling around with what I've learnt from youtube :P</p>