8. lecke (HTML5, CSS3, PHP5)


Többszintű lenyíló menü készítése

Koppintsuk le az "index7.php" fájlt "index8.php", valamint a "main7.css" fájlt "main8.css" néven és természetesen javítsuk át a rá való hivatkozást!


Módosítások tömege (pontosabban csak a hivatkozások)

Szúrjunk be egy új stílusfájl az előző stílusbejegyzés alá! Ebben a fájlban vannak az új menü stílusjegyei:

 <link rel='stylesheet' href='css/dropdown-menu.css' />

Helyezzünk el két javascript segédprogramot (pontosabban még csak a rájuk való hivatkozásokat) és a lenyíló menü (dropdown-menu.js) beállításait a </style> alá:

 <script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
 <script type='text/javascript' src='js/dropdown-menu.js'></script>

 <script type='text/javascript'>
 $(function() {
     $('#menu .dropdown-menu').dropdown_menu({
         sub_indicators : true,
         drop_shadows : true,
         vertical : true
     });
 });
 </script>

Ezek vezérlik a lenyíló menü pontos működését, pl. az egérkurzor ráhelyezésére kinyílik az almenü, az aktuális menüsor más színű lesz (a színt nyilván a "dropdown-menu.css" stílusfájl), stb.

Töröljük ki az <aside> és a </aside> közti részt (minden sort) és helyettesítsük az alábbi sorokkal:

<?php
include('incl/menu8.inc');
?>

    <h3>Naptár</h3>
    <h3>Névnapok</h3>
    <h3>Látogatottság</h3>

A "menu8.inc" tartalmazni fogja a korábbi menürendszert (idevesszük a képlinkeken levő menüelemeket is), alatta pedig előkészítjük a további bővítéseket (csak a címeiket),


A módosításhoz szükséges fájlok tömörítve

Itt az összes fenti (pirossal kiemelt) fájl egybe csomagolva. Bontsuk ki és helyezzük el ezeket a megfelelő könyvtárakba (ha nincs ilyen könyvtár, hozzuk létre a "suli"-n belül)! Katt ide (lecke8.zip)!

Ezután a menüben szereplő menüelemek nagy része működik (kivételek: Kezdőoldal, Tudáspróba, Fényképgaléria).


A "Fényképgaléria" elkészítése


Képkönyvtárak felépítése

Nézzük meg a "http://burcsi.hu/" weboldalon egy képkönyvtár felépítését: http://burcsi.hu/album/4novenyek/gombak/

   

A baloldali kép a "gombak" könyvtár tartalmát mutatja:

  • 01.jpg, 02.jpg, 03.jpg, ..., 63.jpg – képek a gombákról (nagyméretű képek - 1024, 1200 pixel szélesek)
  • 00thu – az előbbi képekből készített bélyegképek könyvtára (256 pixel szélesek)
  • 00.txt – az album címét, és az egyes képekhez rendelt képaláírásokat tartalmazó szövegfájl (lásd a jobboldali képet)

Utóbbi kicsit részletesebben:

  • az első sorban: képkönyvtár címe | alcíme | fotós neve (az adatokat "|" karakter választja el egymástól)
  • utána minden sorban: kép neve (.jpg nélkül) | a képhez rendelt képaláírás, vagy a sorszám újra, vagy semmi

Fényképgaléria a saját gépen is

Hozzuk létre az album könyvtárat a "suli"-n belül, ezen belül a "vegyes" könyvtárat, s ezen belül a "00thu" könyvtárat!

Itt egy galéria fájljai egybe csomagolva. Bontsuk ki és helyezzük el ezeket a megfelelő könyvtárakba! Katt ide!


Szúrjuk be a következő PHP programrészletet az "if ($kod=='or') { // Órarendek ... }" modul alá!

 if (($kod=='gn') or ($kod=='gl')) {
     if ($kod=='gn') $pth = 'http://burcsi.hu/album/4novenyek'; // Fényképgaléria a netről
     if ($kod=='gl') $pth = 'album'; // Fényképgaléria a saját gépről
     $big = "$pth/$txt"; // nagy képek
     $thu = "$pth/$txt/00thu"; // bélyegképek
     $sr = file("$big/00.txt"); $db = count($sr); $cim = chop($sr[0]); list($focim,$alcim,$fotos) = explode("|",$cim);
     echo"<h2>$focim<br><span style='font-size:80%;'>($alcim)</span></h2>";
     for ( $i=1; $i<$db; $i++ ) {
        $sor = chop($sr[$i]); list($kn,$ka) = explode("|",$sor); // képnév, képaláírás
        echo"<a href='$big/$kn.jpg'><img src='$thu/$kn.jpg' title='$ka' height='125'></a>\n";
     }
     echo"<p style='padding-right:40px;text-align:right;'>$fotos</p>";
 }

Látszik (első három sor), hogy ez a modul kétféleképpen hívható hiszen a fényképalbum képei vagy a neten vagy a saját gépen vannak. Itt dől el a "$kod" alapján a "$pth" alapkönyvtár értéke, majd "$txt" megadja a képek ezen belüli könyvtárát.

A "menu8.inc" fájl egy részlete:

 <li>
    <a href='#'>Fényképgaléria</a>
    <ul>
    <li><a href='index8.php?kod=gn&txt=gombak'>Gombák</a></li>
    <li><a href='#'>Erdei, mezei virágok</a>
         <ul>
         <li><a href='index8.php?kod=gn&txt=erdei'>Erdei, mezei virágok</a></li>
         <li><a href='index8.php?kod=gn&txt=tozike'>Tőzike a Bakonyban</a></li>
         </ul>
    </li>
    ...
    <li><a href='index8.php?kod=gl&txt=vegyes'>Vegyes képek</a></li>
    </ul>
 </li>

A felső kiemelt sorban (index8.php?kod=gn&txt=gombak) a "http://burcsi.hu/album/4novenyek/gombak" képkönyvtár, az alsóban (index8.php?kod=gl&txt=vegyes) a lokális/saját gépen pedig az "album/vegyes" képkönyvtár lesz a kiválasztott fényképalbum.

A nagyképek itt vannak, lásd a "$big = ..." kezdetű sor.

A bélyegképek helye ezen belül a "00thu" képkönyvtár ($thu = ...).

A következő sor ($sr = ...) beolvassa az "$sr" tömbbe a "00.txt" sorait ($db sort), és az elsőt (0.) szétdarabolja a "$focim,$alcim,$fotos" változókba.

Az 'echo"<h2> ...' sor ezekből kiírja a fő- és az alcímet (utóbbit kisebb betűkkel - a "span" egy általános tag, most csak a méretcsökkentés miatt használtuk).

A megszámlálható/for ciklus szétszedi a sorban lévő két adatot képnévre és képaláírásra, s az alatta lévő sor generálja a látható kisképet (<img ...), amelyre kattintva (<a href= ...) megjelenik a nagykép. A kisképre téve az egérkurzort, láthatjuk a képaláírást (title=...).


Ezzel készen van, és működőképes a "Fényképgaléria". Természetesen lehet ennél okosabbat is csinálni, de ahhoz bonyolultabb PHP kód kellene.

Az eredeti album (lapozhatósággal, vetítéssel, stb.): http://burcsi.hu/album/index.php?alb=gombak&dir=4novenyek/gombak



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

63052 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Erzsébet napja van ma

Boldog névnapot kívánok!