Pentru a organiza galeria foto de pe site-ul folosit de multe ori script-uri gata făcute în PHP. Am încercat de câteva ori pentru a face acest lucru util și a ajuns la concluzia că, dacă doriți o galerie dinamic, în cazul în care puteți evalua munca de către alte persoane, iar în cazul în care aveți posibilitatea să inserați rapid și ușor imagini și descriere text pentru a le direct de pe desktop, este mai bine să utilizați servicii on-line gata, din care un întreg buchet de rețea. Asta e cel puțin un bun vechi Flickr.
Agăța de site-ul script-ul, și apoi configurați-l - el are hemoroizi. Aceste script-uri gratuite, care sunt în rețea, sau simple, dar urâte în proiectarea și buggy în muncă sau atât de grele și supraîncărcat cu tot felul de excese, că regulile și le ascuți la site-ul tau aburit.
Dar, dacă doriți doar să plasați pe site-ul cateva imagini cu legende, este foarte ușor și pot fi aranjate frumos cu CSS pur și o pereche de imagini auxiliare pe care le vom face acum.
În primul rând trebuie să ne pregătim câteva fotografii aici:
După ce vom explica de ce au atât de mult timp. Ambele imagini vom folosi fundal la previzualizări noastre (Previews - o copie mic de imagini).
Deoarece previzualizări pot fi de diferite dimensiuni și orientare (orizontală sau verticală), și legende pot fi de lungimi diferite, atunci vom face următorul truc: cravată prima imagine de fundal la tag-ul div. iar al doilea - la tag-ul p. care angajează semnătura.
Ca urmare, marginea de jos a miniaturi va fi întotdeauna pe aceeași distanță de semnătura, indiferent de lungimea semnăturii.
Cu toate acestea, avem nevoie de noi înșine miniaturi imagini. Marile fotografii vom posta fiecare pe pagina sa separată, care va reveni la domiciliu, folosind butonul BACK.
Deci, putem scrie codul pentru începutul paginii noastre principale:
Codul foarte simplu. Am pus conținutul paginilor din „cutie» - container. care este situat în centru, și fiecare cu semnătura miniatură emise de clasă separată div-lea cu tumb.
Să luăm acum în considerare mai multe fișiere de stil CSS:
un text-decoration: none;
>
fundal corp: #fff;
>
latime #container: 860px;
margin: 0 auto;
>
fundal #header: url (header.gif) fără repetare;
lățime: 860px;
height: 160px;
margin: 0 auto;
clar: ambele;
>
fundal div.tumb: url (tumb01.gif) fără repetare;
lățime: 210px;
float: left;
Marja: 0 30px 20px;
>
div.tumb marja img: 5px 4px;
>
div.tumb p background: url (tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, sans-serif;
Culoare: # 333;
margin: 0;
padding: 0 25px 20px 10px;
>
Să începem de la început. Pentru întreaga pagină dintr-o dată ne-am stabilit margini, padding și chenare 0. Context subliniat alb, link-uri trebuie să opriți subliniind, și containere de dimensiuni sunt setate la 860 de pixeli în lățime și de auto-aliniere.
Pentru a plafona zogolovok drăguț trase și pune-l acolo în fundal, setați lățimea și înălțimea. Este simplu. Dar mai mult va fi truc.
Pentru previzualizări, după cum sa menționat deja, am folosit un div cu clasa de tumb. În același timp, cele mai multe reguli de selectare a tumb vom opta pentru a arăta fundal ca prima imagine, prezentat mai sus, specificând lățimea de 210 pixeli și interzicerea repeta. Înălțimea nu specifică!
În plus, am adăugat aici, ca un flux de regulă spre stânga (float: left), pentru că vrem să fie poziționat orizontal câteva previzualizări. Dacă nu, atunci toate miniaturile vor fi plasate într-o coloană pe pagină unul sub altul.
În următorul set de reguli noi s-au stabilit deja miniaturile cu tag-ul img padding imaginile nu sunt agățau unul de altul.
Nota record - div.tumb img. Ea arată că nu sunt doar câteva tag-ul img arbitrar stabilit aceste reguli, și anume cea care este inclusă în div cu tumb de clasă.
În continuare, vom eticheta pentru p. care intră din nou blocul cu clasa de div tumb. dimensiunea și culoarea fontului cerut, marja si padding, si - cel mai important - a indicat ca fundal pentru imaginea noastră despre al doilea minunat. În acest caz, în plus față de interdicția de repetiție, am arătat coordonatele sale în raport cu axele x și y. 0 și 100%, respectiv.
Aceasta este, în ciuda dimensiunii miniaturilor noastre și textul descriptiv (în termen de motiv, desigur), această imagine de fundal va arăta întotdeauna marginea inferioară și dreapta, ajustând automat la lungimea și lățimea de miniaturi.
Asta-i tot!
Un alt sfat: nu face pentru miniaturile link către o imagine într-un anumit dosar. Aranjați fiecare fotografie pe o pagină separată, cu o descriere detaliată și un link de întoarcere la pagina principală. Acesta va fi mult mai frumos și mai corect decât singur Sticky la colțul din stânga sus al fotografiei în fereastra browser-ului.
exemplu Ready pot fi găsite aici Galeria: Galeria, exemplul în CSS.
Sper că va plăcut. Bucurați-vă!