Pacher Márkus fotós oldalának készítése

Szerző: admin | Nulláról a kész rendszerig ,PHP | 2010 augusztus 21. 12:55

Pacher Márkus fotós barátomnak dolgoztam át az oldalát, ehhez fűzök hozzá néhány gondolatot, valamint letölthetitek a forráskódot.

Előismeret

Pacher Márkus fotós, életművész. Az új honlapját megtekinthetitek a pacher.hu címen. Az oldal design az ő érdeme, amit én csináltam az a kód optimnalizálása volt.

A probléma

Az eredeti oldal egy olyan javascript plugint használt, ami minden képet kétszer tárolt: egy fehérítettet, és egy simát. Ezeket előre betöltötte, és mivel ezt javascript tette, ezért firebug meg se tudta mondani mennyi adatot tölt az oldal.

Ha a középső sor képeire viszitek az egeret, akkor felúszik a kép, kiadva Mákus nevét, majd ismét fölé húzva visszajön az eredeti. Ez eddig simán átváltott egy betűre, most a kép és a betü ugyanazon a képen van, így kevesebb kérést kell a szerver felé indítani.

Képre való kattintáskor csak maga a nagykép jelent meg új oldalon, erre ráhívtam egy lightbox szerű galériát, ezt is átnézzük

Amit használtam

Nem használtam keretrendszert, ez az a nagyságrendű munka, ahol teljesen felesleges lenne.

A galériához fancybox-ot használtam, nekem nagyon tetszik. Egyszerű, kicsi, könnyen csoportosíthatóak a képek vele.

A felépítés

Most röviden végig megyek az oldal működésén:

init.php

Ezt hívja meg az index.php az első sorában, beállít néhány path változót, mivel a szerveren kicsit trükkösen van megoldva a fájlok elhelyezése az index.php-hez viszonyítva.

1.
2.
3.

include 'kod/markus/fotok.php';
ini_set("include_path", "kod/markus");
include 'fotok.php';

Így nem kell mindig megadnom includolásnál a teljes relatív útvonalat: kod/markus/fotok.php, hanem elég csak az fotok.php. Persze vigyázni kell, ha több helyen is van ugyanolyan fájl, akkor lehet összeomlik az univerzum, ezt még nem próbáltam.

Ami még érdekes, az az első sorban lévő tömörítő. Segítségével a generált html oldalt gzip betömöríti, a böngésző letölti, majd kitömöríti. Így az oldal forráskódjának mérete 10.6KB helyett 1.6KB. Használata roppant egyszerű, innen kimásoljátok, az oldalatok elejére beteszitek és már működik is:

1.

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();

index.php

Ahogy látjátok a második sorban ott figyel a HTML5 doctype, valamint a 20. sorban a már bemutatott IE HTML5 fix.

1.
2.
3.

<!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Van itt egy content.php ami érdekes lesz, és egy footer, amit kihagyunk mert nem az.

content.php

Ént ezt használom a tartalmak dinamikus betöltésére, vajon hogyan működik:

• A .htaccess fájl kap egy linket, pl http://pacher.hu/contact
• Ezt átalakítja http://pacher.hu/index.php?id=contact formába
• Mikor a feldolgozás a content.php-hez érkezik, az megvizsgálja, hogy van e értéke a $_GET['id']-nek
• Ha igen, egy előre definiált asszociatív tömbből kihámozza melyik oldalt kell betöltenie
• Ha hibás az id, vagy nincs megadva, akkor külön lehet definiálni mit töltsön be

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

if ( isset($_GET["id"]) ){
	$links = array();
	$links["contact"] = "contact.php";
	if ($_SESSION['login']){
		$links["profil_delete"] = "profil_delete.php";
		$links["profil_edit"] = "profil_edit.php";
	}
	if ($_SESSION['admin']){
		$links["admin"] = "admin.php";
	}
 
	$ok = 0;
	$id = $_GET["id"];
 
	if ( isset($links[$id]) && is_file('private/'.$links[$id]) )$ok = 1;

	if ($ok == 1){
		include_once $links[$id];
	}
	else{
		include_once "photos.php";
	}
}
else
	include_once "photos.php";

Ez nem az oldal kódja, kibővítettem hogy lássátok ha admin vagy bejelentkezett felhasználó is van, akkor hogyan működne.

photos.php

Az oldal lelke, ez jeleníti meg a képeket. A fájlok nevei 1.jpg 2.jpg… 10.jpg, és a glob() alapból úgy iratja ki, hogy 1.jpg, 10.jpg, … 2.jpg. Ez nekünk nem jó, rendezni kell őket natsort() segítségével.

1.
2.

$photos = glob('pic/reworked_small/*');
natsort($photos);

Itt egy ciklus végigmegy a képeken, megjeleníti őket, és egy linkkel mutat a nagy képre. A rel=”group” azért kell, hogy a fancybox tudja, ezek egy csoportba tartoznak, így ha egy képre rákattintunk akkor a jobbra balra nyilakkal végig tudunk száguldani az összesen.

1.
2.
3.
4.
5.
6.
7.
8.
9.

<ul>
<? foreach($photos as $photo): ?>
    <li>
        <a rel="group" <?php echo betus($photo); ?> href="<?php echo BASE_URL; ?>pic/reworked_big/<?php echo basename($photo); ?>">
            <img alt="Pacher Márkus" src="<?php echo $photo; ?>" />
        </a>
    </li>
<? endforeach; ?>
</ul>

Ott csücsül még egy betus($photo), ami eldönti hogy az adott kép a középső sorban van e, mert ha igen, akkor annak az osztályához hozzáírja hogy betus. Ezt később a javascript és css fogja használni.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

/**
 *Megmondja, hogy az adott képnek betus ez az osztálya
 * @param string $photo pl. pic/13.jpg
 * @return string class="betus"
 */
function betus($photo){
	$number = (int)basename($photo);
 
	//22-es a középső, az nem betüs
	if( $number >= 16 &#038;&#038; $number <= 28 &#038;&#038; $number != 22)
		return 'class="photos betus"';
	return 'class="photos"';
}

Javascript

Használunk jquery-t a cdn szerverről, hipp-hopp betölti, egy fancyboxot ami elvégzi a galéria munka oroszlánrészét, valamint egy saját pacher.js-t.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

//IE
//if( ! $.support.opacity){
    $('.betus img').bind('mouseover', function(){
        if($(this).hasClass('fent')){
            $(this).animate({
                top: '+=100px'
            });
            $(this).removeClass('fent');
        }else{
            $(this).animate({
                top: '-=100px'
            });
            $(this).addClass('fent');
        }
    })
//}

Ha egy olyan link fölé húzzuk az egeret ami betus, akkor először a benne lévő képet feltoljuk 100px-el, hozzáadjunk a fent osztályt. Következő alkalommal mivel látja hogy fent van, lehúzza 100px-el, és leveszi a fent osztályt.

A ki kommentelt sor megnézi, hogy a böngésző támogatja e az opacity tulajdonságot. Ez azért kell, mert alapból CSS3-at akartam használni ehhez, de IE nem ismerte, úgyhogy rasszista módon megkülönböztettem volna a többitől. De ez a fent maradós effekt jobban tetszett, mint mikor egyből visszacsúszik a kép ha elvisszük az egeret, úgyhogy hagytam minden böngészőn így.

CSS

Ezt nagyon nem részletezném, főleg a nemrég írt css trükkökből szemezgettem.

Felhasználás

Nyilván nem sokan törődnek a licenszekkel, én is csak most kezdem komolyan venni, hogy miért?

• Aki csinálja, annak jól esik ha értesítik róla, hogy használják a munkáját.
• Aki megszegi a szerződést azt keményen lehet perelni, már amennyiben az embernek van rá fölös pénze és ismer jó ügyvédet.

Itt Magyarországon nemhiszem hogy annyira komolyan venné bárki is, de valahol el kell kezdeni. Majd írok egy részletes cikket a legtöbbet használt Creative Common licenszekről.

Licensz

A kód szabadon letölthető, terjeszthető, módosítható amennyiben nem kereskedelmi célokra használod, feltünteted honnan van, és ugyanez alatt a licensz alatt használod tovább. Itt olvashatod részletesen

Az oldalhoz tartozó képek Márkus tulajdonát képezik, ezeket szabadon terjesztheted, amennyiben megnevezed a forrást, viszont nem használhatod fel kereskedelmi célokra, és nem módosíthatod őket. Itt a licensz hozzá

Összegzés

Amint látható nem kell mindig keretrendszer, és lehet használni a HTML5 illetve CSS3 dolgokat is.

• Pacher.hu
• Letöltés