Энэ заавар нь фолдер доторх зургуудыг автоматаар олж, гэрэлт хайрцаг ашиглан харуулах галерейг хэрхэн үүсгэхийг харуулах болно.

Юуны өмнө галерейныхаа гол суурийг бий болгоё:

Сайхан jQuery галерей

Санаа нь маш энгийн - PHP скрипт нь фолдероос зураг хайх болно. Үүний дараа эдгээр зургуудыг хувиргах болно сайхан галерей. Ийм галерейг ашиглах нь маш энгийн - та зүгээр л фолдерт зураг байршуулах хэрэгтэй бөгөөд үр дүн нь хуудсан дээр шууд харагдах болно.

$директор = "галерей"; //зураг бүхий хавтасны нэр
$allowed_types=array("jpg","jpeg","gif","png"); //зөвшөөрөгдсөн зургийн төрлүүд
$file_parts=array();
$ext="";
$title="";
$i=0;
// хавтас нээхийг оролдоно уу
$dir_handle = @opendir($директор) эсвэл үхэх("Таны зургийн лавлахад алдаа гарлаа!");
while ($file = readdir($dir_handle)) //файлуудаар хайх
{
if($file=="." || $файл == "..") үргэлжлүүлэх; //бусад фолдеруудын холбоосыг алгасах
$file_parts = тэсрэх(".",$файл); //файлын нэрийг хувааж, массивт оруулна
$ext = strtolower(array_pop($файлын_хэсэг)); //сүүлийн элемент нь өргөтгөл юм
$title = implode(".", $file_parts);
$ гарчиг = htmlspecialchars ($ гарчиг);
$nomargin="";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //мөр дэх хамгийн сүүлийн зураг нь "nomargin" CSS ангиллыг өгсөн.
цуурай "

".$ гарчиг."
";
$i++;
}
}
closedir($dir_handle); // хавтас хаах

Фолдерт байгаа файлуудыг сканнердаж, дүрсгүй файлуудыг алгасах замаар бид зураг бүрт XHTML кодыг хуримтлуулдаг. Код (мөр 28-39) нь ангийн зурагтай (зарим тохиолдолд nomargin) савнаас бүрдэнэ. Загварын шинж чанарыг бид тохируулсан дэвсгэр зурагбидний дүрс хэлбэрээр. Бид 50% 50% -ийг ашиглан зургийг төвд байрлуулна. Ингэснээр зургийг хэвтээ ба босоо байдлаар зэрэгцүүлнэ. Хэрэв зураг нь блокоос том бол бид зөвхөн түүний төв хэсгийг (саванд багтах хэсгийг) хардаг. Ингэснээр бид үзэсгэлэнтэй өнгөц зургийг авах болно (зургийг өөрөө багасгахгүйгээр).

Энэ нь "хөнгөн" зургуудтай сайн ажилладаг. Фолдерт 10 мегапикселийн зураг оруулахгүй байхыг хичээгээрэй :).

Блок нь бүрэн хэмжээний зураг руу хөтлөх холбоосыг агуулдаг. Файлын нэр нь гарчгийн шинж чанарын утгын үүрэг гүйцэтгэдэг. LightBox залгаас нь эдгээр утгыг ашигладаг бөгөөд зургийг галлерей болгон хувиргадаг. Зургийн тайлбарыг өөрчлөхийн тулд түүний нэрийг өөрчлөх шаардлагатай.

Номаргин ангийн талаар асуух зүйл гарч ирж магадгүй! Бидэнд яагаад хэрэгтэй байна вэ? Галерей дахь зураг бүр баруун болон доод талын зайтай. Энэ нь мөр бүрийн сүүлчийн элемент нь блокийн толгойн баруун талтай зэрэгцэх боломжгүй гэсэн үг юм. Энэ нь мэргэжлийн бус харагдаж байна. Тиймээс бид дараалсан сүүлчийн элементийн баруун захыг арилгадаг тусгай анги оноодог. Үүний үр дүнд бид сайхан үр дүнд хүрдэг.

Одоо бүгдийг бага зэрэг албан ёсоор болгоё:

/* эхлээд хөтчийн нийцтэй байдлын зарим элементүүдийг дахин тохируулна уу */
их бие,h1,h2,h3,p,td,ишлэл,жижиг,хэлбэр,оролт,ul,li,ol,шошго(
захын зай: 0px;
дүүргэх: 0px;
font-family:Arial, Helvetica, sans-serif;
}
их бие(/* их бие */
захын дээд: 20px;
өнгө: цагаан;
үсгийн хэмжээ: 13px;
дэвсгэр өнгө:#222222;
}
.clear( /* clearfix анги */
тодорхой: хоёулаа;
}
a, a: зочилсон (
өнгө:#00BBFF;
текст чимэглэл:байхгүй;
тойм: байхгүй;
}
а: гүйлгэх(
текстийн чимэглэл: доогуур зураас;
}
#контейнер(
өргөн: 890px;
захын зай: 20px автомат;
}
#гарчиг,#хөл(
дэвсгэр өнгө:#2A2A2A;
хил: 1px хатуу #444444;
өндөр: 20px;
дүүргэх: 6px 0 25px 15px;
доод захын зай: 30px;
халих:далд;
}
#footer(
өндөр: 10px;
захын зай:20px 0 20px 0;
дүүргэх: 6px 0 11px 15px;
}
div.nomargin( /* nomargin анги */
баруун захын зай: 0px;
}
.зураг(
хөвөх:зүүн;
захын зай:0 15px 15px 0;
хил: 5px хатуу цагаан;
өргөн: 200px;
өндөр: 250px;
}
.pic a(
өргөн: 200px;
өндөр: 250px;
текстийн догол:-99999px;
дэлгэц:блок;
}
h1(
үсгийн хэмжээ: 28px;
үсгийн жин: тод;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2(
үсгийн жин:хэвийн;
үсгийн хэмжээ: 14px;
өнгө: цагаан;
}

Зөв ажиллахын тулд бид баримт бичгийн толгой хэсэгт хүрээ, загварын хуудас болон туслах скриптүүдийг оруулах шаардлагатай болно.

Бага зэрэг ид шид:

// хуудас ачаалагдсаны дараа
$(баримт).бэлэн(функц())(
$(".pic a").lightBox((

ImageLoading: "lightbox/images/loading.gif",
imageBtnClose: "lightbox/images/close.gif",
imageBtnPrev: "lightbox/images/prev.gif",
imageBtnNext: "lightbox/images/next.gif"
});
});

Энд бид зүгээр л гэрэлтүүлгийн хайрцгийг зөв ажиллуулахын тулд хэд хэдэн зургийг холбоно.

Манай галлерей бэлэн боллоо! Би дуртай! :)

Би өнөөдрийн сэдвийн сэдвийг сонгох гэж удаан хугацаа зарцуулсан. Үүний үр дүнд бид зургийн галерей бүхий цуглуулга хараахан хийгээгүй байгааг би анзаарсан. Миний бодлоор энэ бол маш сайн сэдэв, учир нь олон сайтууд галерейтай байдаг. Үнэнийг хэлэхэд тэд бүгд тийм ч сэтгэл татам биш юм. Jquery, html5 гэх мэтийг хөгжүүлэх өнөөгийн чиг хандлагыг харгалзан үзэхэд өмнө нь тулгарч байсан шийдлүүдээс хамаагүй илүү сонирхолтой шийдлүүд байх ёстой гэж би бодсон. Тэгэхээр. Нэг өдрийг өнгөрөөсний дараа бид асар олон тооны скриптийг олж чадсан. Энэ бүхэл бүтэн уулнаас би зөвхөн сонгохоор шийдсэн, учир нь би хайртай тул та өмнөх нийтлэлүүдээс анзаарсан.
Зургийн цомог нь зөвхөн зургийн цомогт хамаарахгүй. Скриптийг ашиглаж болно, би үүнийг илүү зөв гэж бодож байна, гэрэл зурагчин, дизайнер гэх мэт портфолио. JQuery эффект нь зочдын анхаарлыг татахад туслах бөгөөд зүгээр л таны сайтад гоёмсог байдлыг нэмэх болно.
Тэгэхээр. Бид таны анхааралд сайтад зориулсан jQuery зургийн галлерей залгаасуудын цуглуулгыг хүргэж байна.
Сэтгэгдэл бичихээ бүү мартаарай, энэ цуглуулгыг алдахгүйн тулд та нийтлэлийн доод хэсэгт байрлах од дээр дарж дуртай зүйлсдээ нэмж болно.

PHOTOBOX Үнэгүй, хөнгөн, дасан зохицох боломжтой зургийн цомог бөгөөд бүх эффект, шилжилтийг css3 ашиглан хийдэг. Гэрэл зурагчдын багцын вэб сайт хийхэд тохиромжтой.

S Gallery Сонирхолтой JQuery залгаасзургийн галерей. Хөдөлгөөнт дүрс нь css3 ашиглан ажилладаг.

DIAMONDS.JSO зургийн цомог үүсгэх анхны залгаас. Бяцхан зургууд нь очир алмааз шиг хэлбэртэй байдаг одоогоормаш алдартай. Энэ маягтыг css3 ашиглан хийсэн. Энэхүү галерейн цорын ганц сул тал бол зургийг бүрэн хэмжээгээр нь нээх гэрлийн хайрцаг байхгүй явдал юм. Өөрөөр хэлбэл, та lightbox залгаасыг шургуулах хэрэгтэй болно. Энэхүү скрипт нь очир алмааз хэлбэртэй дасан зохицох дүрсний сүлжээг үүсгэдэг.

Superbox JQuery, css3, html5 ашигладаг орчин үеийн зургийн цомог. Урьдчилан үзэх дүрс дээр дарахад гэрэлт хайрцагт (попап цонх) бүтэн зураг нээгддэгт бид бүгд дассан. Энэхүү залгаасын хөгжүүлэгчид гэрэл хайрцаг нь ашиг тусаа аль хэдийнээ хэтрүүлсэн гэж шийджээ. Энэ галерей дахь зургууд нь урьдчилан үзэхийн доор нээгдэнэ. Демо-г үзээд энэ шийдэл нь илүү орчин үеийн харагдаж байгааг хараарай.
| Smooth Diagonal Fade Gallery Орчин үеийн зургийн галерей бөгөөд дэлгэцийн бүх орон зайд урьдчилан харах боломжтой. Скрипт нь сервер дээрх зураг бүхий хавтсыг сканнердах боломжтой, өөрөөр хэлбэл зураг бүрийг тусад нь оруулах шаардлагагүй. Зүгээр л сервер дээрх хавтас руу зургуудаа байршуулж, тохиргоонд лавлах замыг зааж өгнө үү. Дараа нь скрипт өөрөө бүгдийг хийх болно.

Гамма галерей Пинтерест маягийн тор бүхий загварлаг, хөнгөн, мэдрэмжтэй зургийн цомог нь өнөө үед маш их алдартай болсон. Скрипт нь ширээний компьютер болон хоёуланд нь маш сайн ажилладаг хөдөлгөөнт төхөөрөмжүүдямар ч дэлгэцийн нягтралтай. Вэб дизайнерын багцыг бий болгох маш сайн шийдэл.

УРЬДЧИЛАН ҮЗҮҮЛЭГЧТЭЙ ТӨГСӨН ЗУРГИЙН СҮЛЖЭЭ Энэ залгаас нь хариу үйлдэл үзүүлэх дүрсний сүлжээ юм. Доор дарахад том зураг болон тайлбар гарч ирнэ. Портфолио үүсгэхэд тохиромжтой.

jGalleryjGallery нь бүрэн дэлгэцийн, мэдрэмжтэй зургийн цомог юм. Эффект, шилжилт, тэр ч байтугай хэв маягийг хялбархан өөрчлөх боломжтой.

Glisse.js Энгийн боловч маш үр дүнтэй зургийн галерей залгаас. Энэ бол зургийн цомог үүсгэх шаардлагатай үед яг ийм шийдэл юм. Plugin нь цомгийг дэмждэг бөгөөд маш гайхалтай эргүүлэх нөлөөтэй.

Мозаик урсгал Pinterest загварын тор бүхий энгийн, мэдрэмжтэй зургийн галерей.

Galereya Ангилалаар шүүсэн Pinterest загварын сүлжээ бүхий өөр нэг загварлаг галерей. Хөтөч дээр ажилладаг: Chrome, Safari, Firefox, Opera, IE7+, Android хөтөч, Chrome mobile, Firefox mobile.

Хамгийн багадаа.jsJQUERY, 5 болон CSS3 ашиглан гайхалтай үнэгүй зургийн цомог. Энэ нь маш дур булаам дүр төрхтэй бөгөөд таны зочдын анхаарлыг татах нь дамжиггүй.

flipLightBox Энгийн зургийн галерей. Урьдчилан харах дээр дарахад бүрэн дүрс нь гэрэлт хайрцагт нээгдэнэ.

blueimp GalleryУян хатан галерей. -д гаргах боломжтой модаль цонхзөвхөн зураг төдийгүй видео. Мэдрэгч төхөөрөмж дээр маш сайн ажилладаг. Үүнийг тохируулахад хялбар бөгөөд нэмэлт залгаасуудыг ашиглан функцийг өргөжүүлэх боломжтой (Дараагийн залгаасыг үзнэ үү).

» Зургийн галерейд зориулсан PHP скриптүүд

Coppermine гэрэл зургийн цомог

Coppermine бол GD эсвэл ImageMagick ашиглан PHP хэл дээр бичигдсэн олон талт, олон үйлдэлт вэб зургийн цомог бөгөөд мэдээллийн сан юм. MySQL өгөгдөл.

| v.1.5.24 | Татаж авсан: удаа

Майан галерей

Маш сайн, энгийн зургийн цомгийн скрипт. Энэ Maian Gallery багцад нээгдэх шинэ цонхонд бүрэн хэмжээний зургуудыг үзэх, автоматаар урьдчилан харах (өнгөц зураг) болон бусад олон зүйлийг үзэх боломжтой.

| v.2.0 | Татаж авсан: удаа

KoschtIT зургийн цомог

KoschtIT зургийн цомог нь үнэгүй бөгөөд нээлттэй эх сурвалж(нээлттэй эх сурвалж) PHP зургийн цомгийн скрипт. Програмыг ашиглаж байна хурдан нэмэхОдоо байгаа вэбсайтад зориулсан PHP зургийн галерей.

| v.3.1c | Татаж авсан: удаа

Максын PHP зургийн цомог

Максын РНР зургийн цомог нь энгийн, хэрэглэхэд хялбар PHP ашигланЗургийн цомгийн скрипт. Та сервертээ зураг байршуулах, зургийн файлдаа гарчиг/гарчиг, тайлбар нэмэх, нууц үг болон бусад стандарт функцээр файлуудыг үзэхээс хамгаалах боломжтой.

| v.1.0 | Татаж авсан: удаа

PHPG галлерей

MySQL мэдээллийн сан ашиглан PHP хэл дээр бичигдсэн энгийн зургийн цомог. Зургийн файлуудыг байршуулахад л тэр даруй таны сайтын зочдод хамгийн сайн байдлаар үзүүлэх болно.

| v.2.0 | Татаж авсан: удаа

Энгийн зургийн галерей

Simple Gallery бол jQuery, MySQL болон GD Library ашигладаг PHP хэл дээр бичигдсэн зургийн цомгийн удирдлагын хамгийн хөнгөн систем юм.

| v.1.3 | Татаж авсан: удаа

Plogger

Plogger бол php скриптзасварлах нээлттэй эх код бүхий цоо шинэ үеийн зургийн галерей. PHP програмШаардлагагүй функцууд эсвэл төвөгтэй тохиргоотойгоор дүүрээгүй.

iLoad нь javascript дээр бичигдсэн таны вэбсайтад зориулсан зургийн цомгийн скрипт юм. iLoad нь зохиогчийн эрх болон холбоосыг файлд хадгалсан тохиолдолд арилжааны бус төслүүдэд үнэ төлбөргүй тараагддаг. Энэ хуудсан дээр та энэ зургийн цомгийн скриптийн хамгийн сүүлийн хувилбарыг татаж авах боломжтой бөгөөд iLoad-тай хэрхэн ажиллах талаар мэдээлэл авах боломжтой.

iload галерейн скрипт

iLoad Gallery нь таны зургийг зочдод хялбар, үр дүнтэй харуулах боломжийг олгодог. Гадаад төрхгалерейг өөрчлөхөд хялбар бөгөөд та өөрийн сайтын хэв маягт тохируулан галлерейг хурдан өөрчлөх боломжтой. iLoad нь танд нэг зураг харуулах, зургийг бүлэглэх, слайд шоу үүсгэх боломжийг олгоно. Галерей нь орчин үеийн бүх хөтчүүд, мөн Internet Explorer-ийн 6-аас 9 хүртэлх хувилбаруудыг дэмждэг. iLoad нь jQuery, Prototype гэх мэт гуравдагч талын хүрээг ашигладаггүй!

Iload суулгаж байна

Гурван iLoad галерей файлыг агуулсан зип архивыг татаж аваад задалж, файлуудыг вэбсайтдаа байршуулна уу. iLoad.js файлыг нээж, зургийн хавтас руу очих замыг өөрийн сайт дээрх iLoad файлуудын хавтас руу өөрчлөх боломжтой. Дараа нь галерейг ашиглах гэж байгаа хуудсаа нээж, доор үзүүлсэн шиг хаалтын шошгоны өмнө скриптийг оруулна уу. Скрипт файлын замыг өөрчлөхөө бүү мартаарай.

Энэ нь суулгацыг дуусгана. Учир нь зөв ажиллагаа DOCTYPE галерей нь сонголттой. Хэрэв та сайтын толгой хэсэгт iLoad-г оруулахыг хүсвэл скрипт файлын төгсгөлөөс идэвхжүүлэх функц руу залгах дуудлагыг устгана уу:

Үүний дараа та хуудасны аль ч хэсэгт скриптийг холбож, хуудсыг ачаалсны дараа скриптийг зөв цагт эхлүүлэх боломжтой.

Хэрэглээ

iLoad-г ердийн горимд ашиглахын тулд зургийн холбоос дээр rel="iLoad" атрибутыг нэмэхэд л зураг нээгдэхгүй. шинэ хуудасболон галерейд:

Гарчиг ба тайлбар

iLoad нь зургийн гарчиг болон тайлбарыг гарчгийн шинж чанараас уншдаг. Зурганд гарчиг нэмэхийн тулд том зургийн холбоос дээрх гарчгийн шинж чанарт бичнэ үү.

Тайлбар нэмэхийн тулд мөн ижил шинж чанараар бичнэ үү, гэхдээ энэ удаад | тусгаарлагчийг ашиглана уу . Тусгаарлагчийг өөрөө iLoad.js файлын L.splitSign параметрт өөрчилж болно. Гарчиг болон тайлбар хэрхэн форматлагдсаныг харна уу:

Та зүгээр л орхиж гарчиггүй зөвхөн тайлбарыг зааж өгч болно:

Фото зургийн багц

iLoad зургийн цомог нь зургийн багц, өөрөөр хэлбэл багц (цомог) үүсгэх боломжийг олгодог. Багцын нэг хэсэг болох зургийг нээснээр та iLoad-г хаах эсвэл хуудсыг дахин ачаалахгүйгээр багцын зургийг бүхэлд нь үзэх боломжтой. Зургийг бүлэглэх нь слайд шоу ашиглах боломжийг танд олгоно. Холбоосыг ашиглан багц үүсгэхийн тулд "iLoad"-ын дараа rel шинж чанарт | тусгаарлагчийг тавина

мөн багцын нэрийг бичнэ үү. Энгийн багц үүсгэх жишээ энд байна:

Зураг эсвэл текстийг урьдчилан үзэх

Навигац

Сонгосон самбарын тохиргооноос хамааран хяналтын товчлуурууд нь зургийн доор эсвэл график самбар дээр арай доогуур гарч ирнэ. Тэд адилхан. Тохиргоо дотроос самбаруудыг идэвхгүй болгож болно.

Багцад зэргэлдээх зургуудын хооронд шилжих нь зургийн зүүн ба баруун хэсэгт дарж, баруун болон зүүн талд жижиг сумнууд харагдах болно (хэрэв энэ сонголтыг скрипт дээр идэвхжүүлсэн бол).

Та iLoad-ийг харах цонхны эргэн тойрон дахь харанхуй хэсэг дээр дарж эсвэл аль нэг самбар дээрх загалмай бүхий товчлуур дээр дарж хааж болно.

Гараас удирдах боломжтой. Багц руу шилжихийн тулд та зүүн, баруун сум эсвэл "P", "C" товчлууруудыг ашиглаж болно. Та мөн тоонуудын аль нэгийг ашиглан тодорхой зургийг нээж болно. Слайд шоуг "Shift" эсвэл "Ш" товчлуураар эхлүүлж, "Ctrl" эсвэл "З" товчлуураар унтраадаг. iLoad нь "Esc" товчлуураар унтардаг.

Тохиргоо

Холболт