PC-HELP.CZ

České diskuzní fórum o počítačích
https://pc-help.cnews.cz/

PHP Galerie fotek

https://pc-help.cnews.cz/viewtopic.php?f=61&t=155016

Stránka 1 z 1

PHP Galerie fotek

Napsal: 20 kvě 2015 17:15
od Luky
Ahoj, vytvářím svůj web a jsem už ztracený. To co teď potřebuji vyřešit jous náhled k fotografiím a tím spojená smysluplná galerie. Nyní mám systém takový, že uživatel nahraje soubory, ty se uloží do složky a do databáze se vypíše cesta, vždy pro toho uživatele, který má obrázky vidět. Teď potřebuji vytvořit náhled, aby byly všechny soubory stejně velké. Protože někdo může nahrát soubor 1080x1920 a někdo 14x25 :) Zkrátka potřebuji vytovřit smysluplný náhled. Zde je kód pro galerii.

Kód: Vybrat vše

<?php
session_start();

if(!isset($_SESSION['uzivatel_id'])) {
   header('Location: prihlaseni.php');
   exit();
}
if (isset($_GET['odhlasit']))
{
   session_destroy();
   header('Location: prihlaseni.php');
   exit();
}
require('Db.php');
require('Galerie.php');

Db::connect('wm56.wedos.net', 'xxx', xxx', xxx');

$items = Db::queryAll('select * from soubory where user_id = ' . $_SESSION['uzivatel_id']);

?>

<html>
  <head>
    <link rel="stylesheet" href="menu.css" type="text/css">
    <link rel="stylesheet" href="font-awesome.min.css">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="icon" href="icon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="script.js"></script>
    <script src="bootstrap.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <title>Galerie | FileUP.cz</title>
  </head>
  <style>
    body {
    background-color: white;
    background-image: url(./soubory/background.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    a:link    {color: orange;}
    a:visited    {color: orange};
    a:active    {color: orange};}

    #text{  /* Plovoucí okno*/
    border-radius: 5px;
    margin-top: 10%;
    margin-right: 5%;
    margin-left: 5%;
    padding: 10px 30px 10px 30px;
    background-color: rgb(255,255,255);
    border: medium solid black;
    text-align: justify }
 
    #galerie{
    width: 33%;
    padding: 20px;
    vertical-align: top;
    }
   
   
  </style>
  <body>
    <div id='cssmenu'>
    <ul>
      <li><a href='index.php'><span>Nahrávání</span></a></li>
      <li class='active'><a href='#'><span>O nás</span></a></li>
      <li><a href='faq.php'><span>F.A.Q</span></a></li>
      <li><a href='obrazky.php'><span>Galerie</span></a></li>
      <li class='last'><a href='kontakt.php'><span>Kontakt</span></a></li>
    </ul>
    </div>
    <div id="text">
     <h2 align="right">Galerie snímků </h1>
     <p>Zde najdete pouze Vámi nahrané snímky.</p>

            <?
                $rows = array_chunk($items,3);
                
                echo '<table>';
               
               foreach($rows as $row) {
                   echo "<tr>";
                   foreach($row as $column) {
                       echo "<td><img src=".$column['img_link']."></td>";
                   }
                   echo "</tr>";
               }
               
               echo "</table>";
             ?>
  </body>
</html>


Tag <style> je zde, protože je tato stránka trošku jinačí, než celý web.

Re: PHP Galerie fotek

Napsal: 20 kvě 2015 18:30
od lamin_cz
A chceš to řešit CSS nebo vytvořením miniatury již při nahrávání souboru?

Re: PHP Galerie fotek

Napsal: 20 kvě 2015 19:32
od Luky
Pomocí CSS toho asi moc nesvedu, nechám to na Vás, nějak vůbec nevím jak na to.

Re: PHP Galerie fotek

Napsal: 20 kvě 2015 20:12
od lamin_cz
Spíš bych to řešil tvorbou miniatur ... protože se nebude muset zobrazovat fotka v plném rozlišení ...

Sepisovat něco se mi teď večer už moc nechce, tak jsem našel jeden takový ...

Kód: Vybrat vše

function thumbnail_box($img, $box_w, $box_h) {
    //create the image, of the required size
    $new = imagecreatetruecolor($box_w, $box_h);
    if($new === false) {
        //creation failed -- probably not enough memory
        return null;
    }


    //Fill the image with a light grey color
    //(this will be visible in the padding around the image,
    //if the aspect ratios of the image and the thumbnail do not match)
    //Replace this with any color you want, or comment it out for black.
    //I used grey for testing =)
    $fill = imagecolorallocate($new, 200, 200, 205);
    imagefill($new, 0, 0, $fill);

    //compute resize ratio
    $hratio = $box_h / imagesy($img);
    $wratio = $box_w / imagesx($img);
    $ratio = min($hratio, $wratio);

    //if the source is smaller than the thumbnail size, 
    //don't resize -- add a margin instead
    //(that is, dont magnify images)
    if($ratio > 1.0)
        $ratio = 1.0;

    //compute sizes
    $sy = floor(imagesy($img) * $ratio);
    $sx = floor(imagesx($img) * $ratio);

    //compute margins
    //Using these margins centers the image in the thumbnail.
    //If you always want the image to the top left, 
    //set both of these to 0
    $m_y = floor(($box_h - $sy) / 2);
    $m_x = floor(($box_w - $sx) / 2);

    //Copy the image data, and resample
    //
    //If you want a fast and ugly thumbnail,
    //replace imagecopyresampled with imagecopyresized
    if(!imagecopyresampled($new, $img,
        $m_x, $m_y, //dest x, y (margins)
        0, 0, //src x, y (0,0 means top left)
        $sx, $sy,//dest w, h (resample to this size (computed above)
        imagesx($img), imagesy($img)) //src w, h (the full size of the original)
    ) {
        //copy failed
        imagedestroy($new);
        return null;
    }
    //copy successful
    return $new;
}

$i = imagecreatefromjpeg("img.jpg");
$thumb = thumbnail_box($i, 210, 150);
imagedestroy($i);

if(is_null($thumb)) {
    /* image creation or copying failed */
    header('HTTP/1.1 500 Internal Server Error');
    exit();
}

imagejpeg($thumb, 'thumb/img.jpg');
 


Tato funkce Ti udělá miniaturu s rozměry 210x150px ... obrázek bude do něj vměstnán, kde se nevejde, bude šedé pozadí (lze změnit)

Zdroj: http://stackoverflow.com/questions/7471 ... fixed-size

Re: PHP Galerie fotek

Napsal: 20 kvě 2015 20:28
od Luky
Jenže já potřebuju fotku i v originlní velikosti, ideálně, aby se po rozkliknutí zobrazila, mohl bys to prosím vnořit do mého kódu, byl bych ti vděčný, klidně až budeš mít čas, moc na to nespěchám.

Re: PHP Galerie fotek

Napsal: 21 kvě 2015 13:13
od lamin_cz
Do Tvého kódu to vložit nemůžu ... je to potřeba vložit do kodu, který zajišťuje upload těch obrázků ...

Re: PHP Galerie fotek

Napsal: 21 kvě 2015 15:46
od Luky
Upload obrázků mi zajišťuje tento kód.

Kód: Vybrat vše

<?php
session_start();

if (!isset($_SESSION['uzivatel_id']))
{
   header('Location: prihlaseni.php');
   exit();
}

if (isset($_GET['odhlasit']))
{
   session_destroy();
   header('Location: prihlaseni.php');
   exit();
}
// konfigurace
$uploadDir = './obrazky'; // adresar, kam se maji nahrat obrazky (bez lomitka na konci)
$allowedExt = array('jpg', 'jpeg', 'png', 'gif'); // pole s povolenymi priponami
$results = array();


require('Db.php');
Db::connect('wm56.wedos.net', 'xxxg', 'axxxg', 'xxx');
 
// zpracovani uploadu
if(isset($_FILES['obrazky']) && is_array($_FILES['obrazky']['name'])) {
 
    $counter = 0;
    $allowedExt = array_flip($allowedExt);
    foreach($_FILES['obrazky']['name'] as $klic => $nazev) {
 
        $fileName = basename($nazev);
        $tmpName = $_FILES['obrazky']['tmp_name'][$klic];
 
        // kontrola souboru
        if(
            !is_uploaded_file($tmpName)
            || !isset($allowedExt[strtolower(pathinfo($fileName, PATHINFO_EXTENSION))])
        ) {
            // neplatny soubor nebo pripona
            continue;
        }

       $pap = $uploadDir.DIRECTORY_SEPARATOR.$_SESSION['uzivatel_jmeno'].time()."-".$fileName;

        // presun souboru
        if(move_uploaded_file($tmpName, $pap)) {
            ++$counter;
        }

     $results[] = "<p>Bylo nahráno ".$counter." z ".sizeof($_FILES['obrazky']['name'])." obrázků.<br /> Obrázek najdete:<a href='http://teenbook.cz/upload/obrazky/".$_SESSION['uzivatel_jmeno'].time()."-".$fileName."'> zde.</a></p><br> ";

       Db::insert('soubory',array('user_id' => $_SESSION['uzivatel_id'], 'img_link' => $pap));

    }
}
?>
<?php

$items = Db::queryAll('select * from soubory where user_id = ' . $_SESSION['uzivatel_id']);

?>
<html>
  <head>
    <link rel="stylesheet" href="main.css" type="text/css">
    <link rel="stylesheet" href="menu.css" type="text/css">
    <link rel="stylesheet" href="font-awesome.min.css">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="icon" href="icon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="script.js"></script>
    <script src="bootstrap.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <title>FileUP.cz</title>
  </head>
  <body>
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#'><span>Nahrávání</span></a></li>
         <li><a href='o_nas.php'><span>O nás</span></a></li>
         <li><a href='faq.php'><span>F.A.Q</span></a></li>
         <li><a href='obrazky.php'><span>Galerie</span></a></li>
         <li class='last'><a href='kontakt.php'><span>Kontakt</span></a></li>
      </ul>
    </div>
  <div id="text">                       
  <div class="row">
  <h2 align="right" class="section-title">Nahrávání</h2>
  <p>Vítejte zpět, jste přihlášeni jako <?= htmlspecialchars($_SESSION['uzivatel_jmeno']) ?></p>
           
               <div class="col-md-12 text-center">
                  <? foreach($results as $result) {
                  echo $result;
                } ?>

  <p><center><form method="post" id="form" enctype="multipart/form-data">
    <input type="file" class="btn btn-info btn-lg btn-block" name="obrazky[]" multiple="multiple" /> <br />
    <span id="submitContent"><input type="submit" class="btn btn-danger btn-lg btn-block" id="submitButton" value="Nahrát" /></span> </center></p>
      </div>
    </div>
  </div> <!--| TEXT | --->
  </form>
  </body>
</html>

<script>
   $('#submitButton').on('click',function() {
      $('#form').submit();
      $('#submitContent').html('<i class="fa fa-spinner fa-spin"></i> Nahrávání');
   });
</script>

Re: PHP Galerie fotek

Napsal: 21 kvě 2015 17:59
od lamin_cz
Asi se Ti u toho moc nechce přemýšlet, co ...
Jinak ta funkce se uloží do souboru makeThumb.php ... a ve složce obrazky udělej další složku thumbs a dej ji práva na zápis ...
NEODZKOUŠENO, ale mělo by to takto fungovat ...

Kód: Vybrat vše

<?php
session_start();

if (!isset($_SESSION['uzivatel_id']))
{
   header('Location: prihlaseni.php');
   exit();
}

if (isset($_GET['odhlasit']))
{
   session_destroy();
   header('Location: prihlaseni.php');
   exit();
}
// konfigurace
$uploadDir = './obrazky'; // adresar, kam se maji nahrat obrazky (bez lomitka na konci)
$uploadDirThumb = './obrazky/thumbs';
$allowedExt = array('jpg', 'jpeg', 'png', 'gif'); // pole s povolenymi priponami
$results = array();


require('Db.php');
require_once 'makeThumb.php';
Db::connect('wm56.wedos.net', 'xxxg', 'axxxg', 'xxx');
 
// zpracovani uploadu
if(isset($_FILES['obrazky']) && is_array($_FILES['obrazky']['name'])) {
 
    $counter = 0;
    $allowedExt = array_flip($allowedExt);
    foreach($_FILES['obrazky']['name'] as $klic => $nazev) {
 
        $fileName = basename($nazev);
        $tmpName = $_FILES['obrazky']['tmp_name'][$klic];
 
        // kontrola souboru
        if(
            !is_uploaded_file($tmpName)
            || !isset($allowedExt[strtolower(pathinfo($fileName, PATHINFO_EXTENSION))])
        ) {
            // neplatny soubor nebo pripona
            continue;
        }

       $pap = $uploadDir.DIRECTORY_SEPARATOR.$_SESSION['uzivatel_jmeno'].time()."-".$fileName;

        // presun souboru
        if(move_uploaded_file($tmpName, $pap)) {
            ++$counter;
            // vytvoreni miniatury
            $i = imagecreatefromjpeg( $pap );
            $thumb = thumbnail_box($i, 210, 150); // zde zadas rozmer vysledne miniatury
            imagedestroy($i);
            
            if(is_null($thumb)) {
                /* image creation or copying failed */
                $results[] = 'Chyba při vytváření miniatury '.$fileName;
            }
            
            imagejpeg($thumb, $uploadDirThumb.DIRECTORY_SEPARATOR.$_SESSION['uzivatel_jmeno'].time()."-".$fileName);

        }

     $results[] = "<p>Bylo nahráno ".$counter." z ".sizeof($_FILES['obrazky']['name'])." obrázků.<br /> Obrázek najdete:<a href='http://teenbook.cz/upload/obrazky/".$_SESSION['uzivatel_jmeno'].time()."-".$fileName."'> zde.</a></p><br> ";

       Db::insert('soubory',array('user_id' => $_SESSION['uzivatel_id'], 'img_link' => $pap));

    }
}
?>
<?php

$items = Db::queryAll('select * from soubory where user_id = ' . $_SESSION['uzivatel_id']);

?>
<html>
  <head>
    <link rel="stylesheet" href="main.css" type="text/css">
    <link rel="stylesheet" href="menu.css" type="text/css">
    <link rel="stylesheet" href="font-awesome.min.css">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="icon" href="icon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="script.js"></script>
    <script src="bootstrap.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <title>FileUP.cz</title>
  </head>
  <body>
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#'><span>Nahrávání</span></a></li>
         <li><a href='o_nas.php'><span>O nás</span></a></li>
         <li><a href='faq.php'><span>F.A.Q</span></a></li>
         <li><a href='obrazky.php'><span>Galerie</span></a></li>
         <li class='last'><a href='kontakt.php'><span>Kontakt</span></a></li>
      </ul>
    </div>
  <div id="text">                       
  <div class="row">
  <h2 align="right" class="section-title">Nahrávání</h2>
  <p>Vítejte zpět, jste přihlášeni jako <?= htmlspecialchars($_SESSION['uzivatel_jmeno']) ?></p>
            
               <div class="col-md-12 text-center">
                  <? foreach($results as $result) {
                  echo $result;
                } ?>

  <p><center><form method="post" id="form" enctype="multipart/form-data">
    <input type="file" class="btn btn-info btn-lg btn-block" name="obrazky[]" multiple="multiple" /> <br />
    <span id="submitContent"><input type="submit" class="btn btn-danger btn-lg btn-block" id="submitButton" value="Nahrát" /></span> </center></p>
      </div>
    </div>
  </div> <!--| TEXT | --->
  </form> 
  </body>
</html>

<script>
   $('#submitButton').on('click',function() {
      $('#form').submit();
      $('#submitContent').html('<i class="fa fa-spinner fa-spin"></i> Nahrávání');
   });
</script>

Re: PHP Galerie fotek  Vyřešeno

Napsal: 21 kvě 2015 20:15
od Luky
Omluovám se, já myslel že použiješ jiný script, tohle jsem si mohl opravu udělat sám, omlouvám se ještě jednou, vyzkouším. Nevím proč jsem se nad tvojí předešlou odpovědí více nezamyslel, asi už mám plné zuby předešlého snažení. Děkuji ti, a jaký máš názor na kód, který jsem sem dal jako originální?

--- Doplnění předchozího příspěvku (21 Kvě 2015 20:23) ---

Tak tahle funkce (imagecreatefromjpeg() ) funguje pouze na jpeg, ale já nahrávám i png, gif.. Chyba na řádku 52
a Fatal error: Call to undefined function thumbnail_box()xxx/index.php .. na řádku 53

--- Doplnění předchozího příspěvku (21 Kvě 2015 22:39) ---

Už jsem si to opravil, děkuji za tvůj čas.
Časové pásmo: UTC+02:00
Stránka 1 z 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/