jquery — Как отобразить много изображений в нескольких окнах определенного размера, разделенных вкладками в Переполнение стека

В моем запросе к базе данных он возвращает набор имен изображений. Я хочу отобразить их в окне небольшого размера (скажем, 3х3), если будет больше изображений (> 9), оно будет заполнено до следующего окна вкладкой или определенным символом. Люди могут нажать на этот символ, чтобы открыть следующее окно. Я также хочу узнать, какое изображение выбрано пользователем.

Идея отображения — это нечто вроде окна смайлика на этом изображении.

http://www.askdesigns.com/wp-content/uploads/2012/09/iPhone-5-Emoticons-Tutorial-8.jpg

У вас есть идея, я могу сделать это в php?

Вот то, что я пытаюсь, пожалуйста исправьте мой код:

<?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>

DbConnector.php как запрошено:

<?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);
}
}
?>

и 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;
}
}
?>

0

Решение

Вот модификация в отношении класса нумерации страниц, чтобы удалить эти ошибки и заменить ваши DBConnector со мной DBEngine учебный класс.

Единственный элемент, который вам не хватает — это ограничение на страницу и следующие> предыдущие ссылки.

<?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>
2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]