Scaneaza directoarele cu PHP
Sa ne imaginam ca dorim sa avem o pagina in care sa vizualizam toate imaginile noastre.
O posibilitate este sa inseram imagine cu imagine in codul sursa. Ar fi o idee buna.. daca nu ar trebui ca de fiecare data cand vrem sa adaugam un element nou trebuie sa mai adaugam manual cateva linii de cod.
O alta metoda ar fi sa folosim o baza de date MySQL. Aceasta metoda este perfecta pentru majoritatea site-urilor.
Dar, de nenumarate ori cea mai buna solutie este sa utilizam PHP-ul pentru scanarea “portofoliului” tau si apoi sa creeze dinamic codul sursa pentru voi. Apoi daca vreti ca in pagina sa apara un nou preview, trebuie doar sa copiati imaginea si preview-ul ei in directorul prestabilit si sa lasati PHP-ul sa faca restul.
Sa punem pe foaie ce anume ne trebuie:
- folosirea PHP pentru a scana directorul cu imagini. Va scana fiecare imagine si o va afisa in pagina noastra.
- o sa folosim css pentru formatarea paginii.
- cand un utilizator da click pe un preview, vom folosi JQuery pentru a vizualiza imaginea intreaga.
- daca utilizatorul are Javascript dezactivat, el va fi automat directionat catre o pagina ce contine imaginea la dimensiunea normala.
Cum utilizam?
Adaugarea imaginilor la portofoliu este simpla. Imaginile trebuie sa aiba dimensiunea de 500x350px. Adaugati imaginile in directorul “images/featured”.
Preview-rile trebuie sa aiba dimensiunea 50x50px si adaugate in directoru “images/tn”.
Fisierul HTML
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <html xmlns=“http://www.w3.org/1999/xhtml”>
- <head>
- <title>Scanning Directories with PHP</title>
- <script src=“js/jquery-1.2.6.pack.js” type=“text/javascript”></script>
- <script src=“js/scripts.js” type=“text/javascript”></script>
- <link href=“default.css” rel=“stylesheet” type=“text/css” />
- </head>
- <body>
- <div id=“container”>
- <h1>Some Portfolio</h1>
- <div id=“featured”>
- <?php
- $featured_dir = ‘images/featured/’;
- $scan = scandir($featured_dir);
- echo ‘<img src=”‘. $featured_dir . $scan[2] . ‘” alt=”image” />’;
- ?>
- </div>
- <ul id=“options”>
- <?php
- $dir = ‘images/tn/’;
- $scan = scandir($dir);
- for ($i=0; $i<count($scan); $i++) {
- if ($scan[$i] != ‘.’ && $scan[$i] != ‘..’) {
- echo ‘
- <li>
- <a href=”‘ . $featured_dir . $scan[$i] . ‘”>
- <img src=”‘. $dir . $scan[$i] . ‘” alt=”‘. $scan[$i] . ‘” />
- </a>
- </li>’;
- }
- }
- ?>
- </ul>
- </div>
- </body>
- </html>
Fisierul CSS
Puteti vizualiza fisierul css aici.
Pentru Internet Explorer 6 trebuie sa mai adaugam la fisierul css urmatorul cod
- ul#options {
- …misc styles…
- height: 1%;
- }
Codul Javascript complet (JQuery)
- $(function() {
- $.preloadImage = function(path) {
- $(“#featured img”).attr(“src”, path);
- }
- $(‘ul#options li img’).click(function() {
- $(‘ul li img’).removeClass(‘selected’);
- $(this).addClass(‘selected’);
- var imageName = $(this).attr(‘alt’);
- $.preloadImage(‘images/featured/’ + imageName);
- var chopped = imageName.split(‘.’);
- $(‘#featured h2′).remove();
- $(‘#featured’)
- .prepend(‘<h2 class=”description”>’ + chopped[0] + ‘</h2>’).children(‘h2′).fadeIn(500).fadeTo(200, .6);
- });
- $(‘ul#options li a’).click(function() {
- return false;
- });
- });
Puteti descarca codul sursa complet de aici.
URL scurt catre acest articol: http://tinyurl.com/344b9bq
Tweet