cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div style="width:900px; text-align:left; margin: 0px auto 0px auto; padding:20px;">

<span class="navpart">PHP Gallery</span>

<br />

<div class="left">

The folder goes in the $dirs variable, it should only have the pictures, no other files. 

The title is used to show a caption on mouse over, it takes the file name, removes the extension and displays _ as spaces. 

Change the $perpage number for the amount of pics on each page.

class="cssclass" is the css that applies to each pictures, such as max-height, etc.

You can change the page title (the number is automatically added), and switch the | between the links with a small picture or symbol.

<br /><br />

&lt;?php $page = $_GET["page"]; if ($page == null) { $page=1; } ?&gt;

<br />

Page &lt;?php echo $page; ?&gt; &lt;br /&gt;&lt;br /&gt;

<br />

&lt;?php $perpage = 35;
&nbsp;
$dirs = "gallery/"; 

<br /><br />

$startat = 2 + ($perpage * ($page - 1));

$pics = scandir($dirs); 

$thepics = array_slice($pics, $startat, $perpage); foreach ($thepics as $item) { 

$char = $item;

$char = str_replace(".png","",$char);

$char = str_replace(".gif","",$char);

$char = str_replace(".jpg","",$char);

$char = str_replace("_"," ",$char);

if (($item != ".") && ($item != "..")) { 

echo '&lt;a target="_blank" href="' . $dirs . $item . '"&gt;&lt;img src="' . $dirs . $item . '" alt="' . $item . '" title="' . $char . '" class="cssclass" /&gt;&lt;/a&gt;'; } } ?&gt; 

<br /><br />

&lt;br /&gt;&lt;br /&gt; &nbsp; 

&lt;?php $totalpic = 0;

foreach ($pics as $item) { 

if (($item != ".") && ($item != "..")) { $totalpic = $totalpic + 1; } }

$lastp = $totalpic / $perpage;

$lastp = ceil($lastp); 

$linkp = 1;

echo "| ";

while ($lastp&gt;0) { echo '&lt;a href="?page=' . $linkp . '"&gt;' . $linkp . '&lt;/a&gt; | ';

$linkp=$linkp+1; $lastp=$lastp-1; } ?&gt;

<br /><br />

<span class="bolet">Explanations:</span>
<br />
<span class="itlet">&lt;?php $page = $_GET["page"]; if ($page == null) { $page=1; } ?&gt;</span>
&nbsp;
Get the variable from the url (gallery.php?page=2), and if it's not there, start on page 1. 
<br /><br />

<span class="itlet">Page &lt;?php echo $page; ?&gt; &lt;br /&gt;&lt;br /&gt;</span>
&nbsp;
Page title and number.
<br /><br />

<span class="itlet">&lt;?php $perpage = 35; $dirs = "gallery/";</span>
&nbsp;
$perpage is the number of pictures on each page. $dirs is the directory where they are. 
<br /><br />

<span class="itlet">$startat = 2 + ($perpage * ($page - 1));</span> 
&nbsp;
The first 2 items in the directory will be . and .. hence a directory with 10 pictures will have an array of 12. We don't need those, so we start at 2, where the actual files start. To that we add the number of pictures per page from previous pages, minus the current one. If $perpage is 25, Page 1, will start at 2 and show 25 pictures, Page 2 willll start at 27 and show 25 more pictures. Since the first 2 don't count, you'll see pictures 1 to 25 on page 1, 26 to 50 on page 2, etc. in alphanumeric order.
<br /><br />

<span class="itlet">$pics = scandir($dirs); $thepics = array_slice($pics, $startat, $perpage); foreach ($thepics as $item) { </span>
&nbsp;
Get the pictures and divide them into pages. The slice code means from this directory, starting here, display this many items.
<br /><br />

<span class="itlet">$char = $item;
$char = str_replace(".png","",$char);
$char = str_replace(".gif","",$char);
$char = str_replace(".jpg","",$char);
$char = str_replace("_"," ",$char); </span>
&nbsp;
Save the file name in a separate variable, remove the picture file format and switch _ with spaces to display that on the title tag. It can also be used for text links.
<br /><br />

<span class="itlet">if (($item != ".") && ($item != "..")) {</span> 
&nbsp;
Make sure you have the proper file names (we already skipped . and .. so it's not really needed, but I like to keep it in case it's needed after modifying the code.)
<br /><br />

<span class="itlet">echo '&lt;a target="_blank" href="' . $dirs . $item . '"&gt;&lt;img src="' . $dirs . $item . '" alt="' . $item . '" title="' . $char . '" class="cssclass" /&gt;&lt;/a&gt;'; } } ?&gt;</span>
&nbsp;
This code will repeat for each picture or file, up to the last in that page. It can be an img code, a link with a thumbnail, a text link, etc. 
<br /><br />

<span class="itlet">&lt;br /&gt;&lt;br /&gt; &lt;?php $totalpic = 0;
foreach ($pics as $item) { if (($item != ".") && ($item != "..")) { $totalpic = $totalpic + 1; } }</span>
&nbsp;
To automatically create links to the other pages, we'll need the total number of files. So for each file on the folder, $totalpic will get +1. 
<br /><br />

<span class="itlet">$lastp = $totalpic / $perpage;</span>
&nbsp;
$lastp is the total number of pages, so if there are 80 files ($totalpic) and we're showing 25 per page ($perpage) that's 80/25=3.2
<br /><br />

<span class="itlet">$lastp = ceil($lastp);</span> 
&nbsp;
Round that number up, regardless of if it's 5 or less. So $lastp will be 4. Since there are 80 pictures, page 4 will only have 5, and pages 1 to 3 will have 25 each.
<br /><br />

<span class="itlet">$linkp = 1; echo "| ";</span>
&nbsp;
Let's generate the page links, starting at 1.
<br /><br />

<span class="itlet">while ($lastp&gt;0) { echo '&lt;a href="?page=' . $linkp . '"&gt;' . $linkp . '&lt;/a&gt; | ';
$linkp=$linkp+1; $lastp=$lastp-1; } ?&gt;</span>
&nbsp;
Every time a link is created, add 1 to $linkp, which is the page number in the url, and subtract 1 from $lastp, which is the number of pages left to link. The codes does this as long as $lastp is more than 0, so that links will stop being made when the last page is reached. 

</div>
<br />
<a href="http://azurelight.net">AzureLight.net</a> | 
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> | 
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> | 
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
            
          
!
            
              body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px; 
color:#393939; background-color:#c2f0ff; text-align:center; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }

.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; } 

a { color:#ff71ce; text-decoration:none; }
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console