Most Recent...

Grid Work - Fill the browser with images

Well, I wanted to fill a browser window with all the images I have listed in a mySQL table in a grid layout with no padding. So, I searched high and low for anything close to what I was hoping for but couldn't find anything that resembled it. Out of frustration (because I've seen it before), I decided to write my own.

This combines the use of the Plogger mySQL database, javascript, php, and css to achieve the final result.

Have a look


// A mod for plogger

// BEGIN EDITS


// Page title
$titled = "GridWork";

//How many images do you want shown?
$amount="100"; 

// The URL of your Plogger directory
// ***IMPORTANT*** DO NOT INCLUDE A TRAILING SLASH
$siteurl="http://www.MYDOMAIN.com/plogger";

// CSS
$css = "<style type=\"text/css\">
	img.recimgborder {
		padding: 0px 0px 0px 0px;
		width: 100%;
		height: 100%;
		-moz-opacity:.15;
		filter:alpha(opacity=15);
		opacity:.15;
	}
	div.ph {
		width: 100px;
		height: 100px;
		float: left;
	}
	body {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		overflow-x: hidden;
		overflow-y: hidden;
		background-color: Black;
	}
	div.wrap {
	/* creates a bleed */
		width: 110%;
	}
	a:hover img.recimgborder {
		-moz-opacity:100;
		filter:alpha(opacity=100);
		opacity:100;
	}
</style>";

// END EDITS
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////


include_once("plog-globals.php");
include_once("plog-load_config.php");
include_once("plog-functions.php");
echo "<html><head><title>$titled</title>";
if (!$_GET["n"])
{

// sets a cookie the contains screen height and reloads page
echo "
<script language=\"javascript\">
<!--
function writeCookie() 
{
 var today = new Date();
 var the_date = new Date(\"December 31, 2023\");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = \"users_resolution=\"+ screen.height;
 var the_cookie = the_cookie + \";expires=\" + the_cookie_date;
 document.cookie=the_cookie
 location = 'all.php?n=a';
}
//-->
</script></head>
<body onload=\"writeCookie();\"></body>
</html>";
}
else
{
echo $css."
	</head>
<body><div id=\"thumbs\">
<div class=\"wrap\">";
global $config;

// get cookie
$screen_res = $_COOKIE["users_resolution"];
// divides screen height by 200 to create a plausible number to repeat and display the mySQL query results
$res = $screen_res/200;
for($i=1;$i<=$res;$i++)
  {
$q = "SELECT * from plogger_pictures order by `id` DESC LIMIT $amount";
$result= mysql_query($q) or die
("Could not execute query : $q." . mysql_error());
while ($row=mysql_fetch_array($result))
{
$id=$row["id"];
$path=$row["path"];
$number=strrpos($path, '/');
$number=$number+1;
$url=substr($path, $number);
echo "<div class=\"ph\"><a href=\"".$siteurl."/index.php?level=picture&id=".$id."\"><img class=\"recimgborder\" src=\"".$siteurl."/thumbs/".$id."-".$url."\" border=\"0\" /></a></div>";
  }
}
 }
echo "</div></div></body></html>";

Neato.
Aaron Yendall

Scripts...

My Other Sites...

News

follow Aaron Yendall on Twitter