phpjqueryemoticons
How to display many images in several specific size windows, separate by tabs in php
In my database query, it returns set of image names. I want to display them in a small size window (say 3x3), if there are more images (>9) it will populate to the next window by a tab or a specific symbol. People can click to that symbol to open the next window. I also want to recognize which image is chosen by user.
The idea of display is something like emoticon window in this image.
Do you have any idea I can make it in php ?
Here is what I am trying, please feel free to correct my code:
<?php include "dbConnector.php" ; ?>
<table>
<tr>
<?php
require_once ("paginator.php");
$pages = new Paginator; //ew paginator object to play with and initializes the default values behind the scenes
$connector= new DbConnector();
$queryObj = mysql_query("SELECT COUNT(*) FROM `mydb`.`images`");
$num_rows = mysql_num_rows($queryObj);
$pages->items_total = $num_rows; //assigns total number of records to our paginator's items_total property
$pages->mid_range = 7;//number of page links to display.
$pages->paginate();//ell the paginator to get to work and paginate
$x = mysql_query( "SELECT * FROM `mydb`.`images` ORDER BY `name` DESC $pages->limit");
$i = 0;
while($row = mysql_fetch_assoc($x))
{
$i++;
echo "<td><img src='imagefolder/".$row['name'].".png'/></td>";
if ($i % 3 == 0) {
echo '</tr><tr>';}
}
echo "Page $pages->current_page of $pages->num_pages";
echo $pages->display_pages();//displays our page numbers
?>
</tr>
<table>
The dbConnector.php as requested:
<?php
define("EW_CONN_PORT", 3306, TRUE);
define("EW_CONN_HOST", "localhost", TRUE);
define("EW_CONN_DB", "server", TRUE);
define("EW_CONN_USER", "root", TRUE);
define("EW_CONN_PASS", "admin", TRUE);
class DbConnector {
// Database connection
var $theQuery;
var $link;
function DbConnector(){
// Get the main settings from the array we just loaded
$host = 'localhost';
$db = 'mydb';
$user = 'root';
$pass = '';
// Connect to the database
$this->link = mysql_connect($host, $user, $pass);
mysql_select_db($db);
register_shutdown_function(array(&$this, 'close'));
}
//*** Function: query, Purpose: Execute a database query ***
function query($query) {
$this->theQuery = $query;
return mysql_query($query, $this->link);
}
//*** Function: fetchArray, Purpose: Get array of query results ***
function fetchArray($result) {
return mysql_fetch_array($result);
}
//*** Function: close, Purpose: Close the connection ***
function close() {
mysql_close($this->link);
}
}
?>
and paginator.php:
<?php
class Paginator{
var $items_per_page;
var $items_total;
var $current_page;
var $num_pages;
var $mid_range;
var $low;
var $high;
var $limit;
var $return;
var $default_ipp = 25;
function Paginator()
{
$this->current_page = 1;
$this->mid_range = 7;
$this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
}
function paginate()
{
if($_GET['ipp'] == 'All')
{
$this->num_pages = ceil($this->items_total/$this->default_ipp);
$this->items_per_page = $this->default_ipp;
}
else
{
if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
$this->num_pages = ceil($this->items_total/$this->items_per_page);
}
$this->current_page = (int) $_GET['page']; // must be numeric > 0
if($this->current_page < 1 Or !is_numeric($this->current_page)) $this->current_page = 1;
if($this->current_page > $this->num_pages) $this->current_page = $this->num_pages;
$prev_page = $this->current_page-1;
$next_page = $this->current_page+1;
if($this->num_pages > 10)
{
$this->return = ($this->current_page != 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page\">« Previous</a> ":"<span class=\"inactive\" href=\"#\">« Previous</span> ";
$this->start_range = $this->current_page - floor($this->mid_range/2);
$this->end_range = $this->current_page + floor($this->mid_range/2);
if($this->start_range <= 0)
{
$this->end_range += abs($this->start_range)+1;
$this->start_range = 1;
}
if($this->end_range > $this->num_pages)
{
$this->start_range -= $this->end_range-$this->num_pages;
$this->end_range = $this->num_pages;
}
$this->range = range($this->start_range,$this->end_range);
for($i=1;$i<=$this->num_pages;$i++)
{
if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
// loop through all pages. if first, last, or in range, display
if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
{
$this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page\">$i</a> ";
}
if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
}
$this->return .= (($this->current_page != $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All')) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page\">Next »</a>\n":"<span class=\"inactive\" href=\"#\">» Next</span>\n";
$this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All\">All</a> \n";
}
else
{
for($i=1;$i<=$this->num_pages;$i++)
{
$this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page\">$i</a> ";
}
$this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All\">All</a> \n";
}
$this->low = ($this->current_page-1) * $this->items_per_page;
$this->high = ($_GET['ipp'] == 'All') ? $this->items_total:($this->current_page * $this->items_per_page)-1;
$this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
}
function display_items_per_page()
{
$items = '';
$ipp_array = array(10,25,50,100,'All');
foreach($ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value;return false\">$items</select>\n";
}
function display_jump_menu()
{
for($i=1;$i<=$this->num_pages;$i++)
{
$option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
}
return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page';return false\">$option</select>\n";
}
function display_pages()
{
return $this->return;
}
}
?>
Solution
Here is a modification in regards to the pagination class to remove those errors and replaced your DBConnector with my DBEngine class.
The one element you are missing is the limiting per page and next > previous links.
<?php
error_reporting(E_ALL);
class Paginator
{
var $items_per_page;
var $items_total;
var $current_page;
var $num_pages;
var $mid_range;
var $low;
var $high;
var $limit;
var $return;
var $default_ipp = 25;
function Paginator($_staticipp = '')
{
$this->current_page = (!isset($_GET['page']) || (isset($_GET['page']) && !is_numeric($_GET['page'])))? 1:$_GET['page'];
$this->mid_range = 7;
$_GET['ipp'] = (!empty($_staticipp) && is_numeric($_staticipp))? $_staticipp: $_GET['ipp'];
$this->items_per_page = (!empty($_GET['ipp']) && is_numeric($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
}
function paginate()
{
if(isset($_GET['ipp']) && $_GET['ipp'] == 'All') {
$this->num_pages = ceil($this->items_total/$this->default_ipp);
$this->items_per_page = $this->default_ipp;
}
else {
if(!is_numeric($this->items_per_page) || $this->items_per_page <= 0)
$this->items_per_page = $this->default_ipp;
$this->num_pages = ceil($this->items_total / $this->items_per_page);
}
$this->current_page = (isset($_GET['page']) && is_numeric($_GET['page']))? (int) $_GET['page']:0; // must be numeric > 0
if($this->current_page < 1 Or !is_numeric($this->current_page)) $this->current_page = 1;
if($this->current_page > $this->num_pages) $this->current_page = $this->num_pages;
$prev_page = $this->current_page-1;
$next_page = $this->current_page+1;
if($this->num_pages > 10) {
$this->return = ($this->current_page != 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page\">« Previous</a> ":"<span class=\"inactive\" href=\"#\">« Previous</span> ";
$this->start_range = $this->current_page - floor($this->mid_range/2);
$this->end_range = $this->current_page + floor($this->mid_range/2);
if($this->start_range <= 0) {
$this->end_range += abs($this->start_range)+1;
$this->start_range = 1;
}
if($this->end_range > $this->num_pages) {
$this->start_range -= $this->end_range-$this->num_pages;
$this->end_range = $this->num_pages;
}
$this->range = range($this->start_range,$this->end_range);
for($i=1;$i<=$this->num_pages;$i++) {
if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
// loop through all pages. if first, last, or in range, display
if($i == 1 Or $i == $this->num_pages Or in_array($i,$this->range)) {
$this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page\">$i</a> ";
}
if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
}
$this->return .= (($this->current_page != $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All')) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page\">Next »</a>\n":"<span class=\"inactive\" href=\"#\">» Next</span>\n";
$this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All\">All</a> \n";
}
else {
for($i=1;$i<=$this->num_pages;$i++) {
$this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page\">$i</a> ";
}
$this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All\">All</a> \n";
}
$this->low = ($this->current_page-1) * $this->items_per_page;
$this->high = (isset($_GET['ipp']) && $_GET['ipp'] == 'All') ? $this->items_total:($this->current_page * $this->items_per_page)-1;
$this->limit = (isset($_GET['ipp']) && $_GET['ipp'] == 'All') ? "":" LIMIT ".$this->low.",".$this->items_per_page;
}
function display_items_per_page()
{
$items = '';
$ipp_array = array("",9,'All');
foreach($ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value;return false\">$items</select>\n";
}
function display_jump_menu()
{
for($i=1;$i<=$this->num_pages;$i++) {
$option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
}
return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page';return false\">$option</select>\n";
}
function display_pages()
{
return $this->return;
}
}
class DBEngine
{
protected $con;
// Create a default database element
public function __construct($host = '',$db = '',$user = '',$pass = '')
{
try {
$this->con = new PDO("mysql:host=$host;dbname=$db",$user,$pass, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING));
}
catch (Exception $e) {
return 0;
}
}
// Simple fetch and return method
public function Fetch($_sql)
{
$query = $this->con->prepare($_sql);
$query->execute();
if($query->rowCount() > 0) {
while($array = $query->fetch(PDO::FETCH_ASSOC)) {
$rows[] = $array;
}
}
return (isset($rows) && $rows !== 0 && !empty($rows))? $rows: 0;
}
// Simple write to db method
public function Write($_sql)
{
$query = $this->con->prepare($_sql);
$query->execute();
}
} ?>
<table>
<tr>
<?php
$con = new DBEngine("host","database","user","pass");
$pages = new Paginator(9);
$queryObj = $con->Fetch("SELECT COUNT(*) FROM mydb.images");
$num_rows = $queryObj[0]['COUNT(*)'];
$pages->items_total = $num_rows; //assigns total number of records to our paginator's items_total property
$pages->mid_range = 7;//number of page links to display.
$pages->paginate();//tell the paginator to get to work and paginate ?>
<tr>
<td colspan="3"><?php echo $pages->display_items_per_page(); ?></td>
</tr>
<tr>
<?php
$_sql = "SELECT * FROM mydb.images ORDER BY `name` DESC ".$pages->limit;
$x = $con->Fetch($_sql);
$i = 1;
foreach($x as $val => $row) { ?>
<td style="border:1px solid;"><img src="<?php echo $row['name']; ?>" style="max-width: 40px;" /></td>
<?php
if ($i % 3 == 0) { ?>
</tr>
<tr><?php
}
$i++;
} ?>
Page <?php echo $pages->current_page; ?> of <?php echo $pages->num_pages; ?>
<?php echo $pages->display_pages();//displays our page numbers ?>
</tr>
<table>