این آموزش به شما نشان می دهد که چگونه یک گالری ایجاد کنید که به طور خودکار تصاویر را در یک پوشه پیدا کرده و با استفاده از یک لایت باکس نمایش دهد.

اول از همه، بیایید ستون فقرات گالری خود را ایجاد کنیم:

یک گالری جالب جی کوئری

ایده بسیار ساده است - یک اسکریپت PHP یک پوشه را برای تصاویر اسکن می کند. پس از این، این تصاویر تبدیل خواهند شد گالری زیبا. استفاده از چنین گالری بسیار ساده است - فقط باید تصاویر را در یک پوشه آپلود کنید و نتیجه بلافاصله در صفحه قابل مشاهده خواهد بود.

$directory = "گالری"; //نام پوشه با تصاویر
$allowed_types=array("jpg"، "jpeg"، "gif"، "png"); //انواع تصویر مجاز
$file_parts=array();
$ext="";
$title="";
$i=0;
// سعی کنید پوشه را باز کنید
$dir_handle = @opendir($directory) or die("در پوشه تصویر شما خطایی وجود دارد!");
در حالی که ($file = readdir($dir_handle)) //جستجو در میان فایل ها
{
if($file=="." || $file == "..") continue; // از پیوندها به پوشه های دیگر پرش کنید
$file_parts = explode(.","$file); // نام فایل را تقسیم کرده و در یک آرایه قرار دهید
$ext = strtolower(array_pop($file_parts)); //آخرین عنصر پسوند است
$title = implode(.","$file_parts);
$title = htmlspecialchars($title);
$nomargin="";
if(in_array ($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //آخرین تصویر در ردیف به کلاس CSS "nomargin" اختصاص داده شده است.
پژواک"

".$title."
";
$i++;
}
}
closeir($dir_handle); //پوشه را ببندید

با اسکن فایل های داخل پوشه و پرش از فایل های غیر تصویری، کد XHTML را برای هر تصویر جمع آوری می کنیم. کد (خطوط 28-39) از یک ظرف با یک کلاس pic (و در برخی موارد nomargin) تشکیل شده است. با ویژگی style که تنظیم کردیم تصویر پس زمینهدر قالب تصویر ما تصویر را با استفاده از 50% 50% در مرکز قرار می دهیم. به این ترتیب تصویر هم به صورت افقی و هم به صورت عمودی تراز می شود. اگر تصویر بزرگتر از بلوک باشد، ما فقط قسمت مرکزی آن را می بینیم (قسمتی که داخل ظرف قرار می گیرد). به این ترتیب تصاویر کوچک زیبایی به دست می آوریم (بدون نیاز به کوچک کردن خود تصویر).

این به خوبی با تصاویر "سبک" کار می کند. سعی کنید عکس های 10 مگاپیکسلی را در پوشه آپلود نکنید :).

بلوک حاوی پیوندی است که به تصویر در اندازه کامل منتهی می شود. نام فایل به عنوان مقدار ویژگی عنوان عمل می کند. افزونه lightBox از این مقادیر استفاده می کند و تصاویر را به یک گالری تبدیل می کند. برای تغییر توضیحات یک تصویر، باید نام آن را تغییر دهید.

ممکن است در مورد کلاس nomargin سوالی داشته باشید! چرا به آن نیاز داریم؟ هر تصویر در گالری دارای یک حاشیه سمت راست و پایین است. این بدان معنی است که آخرین عنصر در هر ردیف نمی تواند با سمت راست سربرگ بلوک تراز شود. غیرحرفه ای به نظر می رسد. بنابراین، یک کلاس ویژه اختصاص می دهیم که حاشیه سمت راست را برای آخرین عنصر در یک ردیف حذف می کند. در نتیجه نتیجه زیبایی می گیریم.

حالا بیایید همه چیز را کمی رسمی کنیم:

/* ابتدا برخی از عناصر را برای سازگاری مرورگر بازنشانی کنید */
بدنه،h1،h2،h3،p،td، نقل قول،کوچک،شکل،ورودی،ul،li،ol،برچسب(
حاشیه: 0 پیکسل;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
}
body(/* body */
margin-top: 20px;
رنگ: سفید؛
اندازه فونت: 13px;
background-color:#222222;
}
.clear(/* class clearfix */
روشن: هر دو
}
a, a: بازدید شده (
color:#00BBFF;
text-decoration:none;
طرح کلی: هیچ
}
a:hover(
text-decoration: underline;
}
#ظرف(
عرض: 890 پیکسل
حاشیه: 20 پیکسل خودکار;
}
#سرفصل، #پانویس(
background-color:#2A2A2A;
حاشیه: 1px جامد #444444;
ارتفاع: 20 پیکسل
padding: 6px 0 25px 15px;
margin-bottom:30px;
سرریز: پنهان;
}
#پانویس(
ارتفاع: 10 پیکسل
حاشیه: 20 پیکسل 0 20 پیکسل 0;
padding: 6px 0 11px 15px;
}
div.nomargin( /* کلاس nomargin */
margin-right:0px;
}
.pic(
float:left;
حاشیه: 0 15 پیکسل 15 پیکسل 0;
حاشیه: 5 پیکسل سفید جامد.
عرض: 200 پیکسل
ارتفاع: 250 پیکسل
}
.pic a(
عرض: 200 پیکسل
ارتفاع: 250 پیکسل
text-indent:-99999px;
display:block;
}
h1(
اندازه فونت: 28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2(
font-weight:normal;
اندازه فونت: 14px;
رنگ: سفید؛
}

برای عملکرد صحیح، باید چارچوب، شیوه نامه و اسکریپت های کمکی را در هدر سند وارد کنیم:

کمی جادوی بیشتر:

// پس از بارگذاری صفحه
$(document).ready(function())(
$(".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 به جلب توجه بازدیدکنندگان کمک می کند و به سادگی به سایت شما ظرافت می بخشد.
بنابراین. مجموعه ای از افزونه های گالری تصاویر جی کوئری را برای سایت مورد توجه شما قرار می دهیم.
نظر فراموش نشه و به خاطر بسپارید، برای اینکه این مجموعه را از دست ندهید، می توانید با کلیک بر روی ستاره در پایین مقاله، آن را به موارد دلخواه خود اضافه کنید.

PHOTOBOX یک گالری عکس رایگان، سبک و تطبیقی ​​که در آن تمام جلوه ها و انتقال ها با استفاده از css3 انجام می شود. ایده آل برای ایجاد وب سایت نمونه کار عکاسان.

گالری اس جذاب پلاگین جی کوئریگالری تصاویر انیمیشن با استفاده از css3 کار می کند.

DIAMONDS.JSO پلاگین اصلی برای ایجاد گالری تصاویر. مینیاتورها به شکل الماس هستند که اینطور است در حال حاضربسیار محبوب این فرم با استفاده از css3 ساخته شده است. تنها عیب این گالری نداشتن لایت باکسی است که عکس در اندازه کامل باز شود. یعنی باید پلاگین لایت باکس را پیچ کنید. این اسکریپت یک شبکه تطبیقی ​​از تصاویر به شکل الماس تولید می کند.

Superbox یک گالری تصاویر مدرن با استفاده از Jquery، css3 و html5. همه ما به این واقعیت عادت کرده ایم که وقتی روی یک پیش نمایش کلیک می کنید، تصویر کامل در یک لایت باکس (پنجره پاپ آپ) باز می شود. توسعه دهندگان این پلاگین به این نتیجه رسیدند که لایت باکس قبلاً از کارایی خود گذشته است. تصاویر این گالری در زیر پیش نمایش باز می شوند. نسخه ی نمایشی را تماشا کنید و ببینید که این راه حل بسیار مدرن تر به نظر می رسد.
| گالری محو مورب صاف یک گالری تصاویر مدرن که در آن پیش نمایش ها در کل فضای صفحه نمایش توزیع می شوند. این اسکریپت می تواند یک پوشه با عکس ها را روی سرور اسکن کند، یعنی نیازی به درج هر تصویر جداگانه نیست. فقط تصاویر را در پوشه ای روی سرور آپلود کنید و مسیر دایرکتوری را در تنظیمات مشخص کنید. سپس اسکریپت همه کارها را خودش انجام خواهد داد.

گالری گاما یک گالری عکس شیک، سبک و پاسخگو با شبکه ای به سبک Pinterest که این روزها بسیار محبوب شده است. این اسکریپت هم روی کامپیوترهای رومیزی و هم بر روی کامپیوترهای رومیزی عالی کار می کند دستگاه های تلفن همراهبا هر وضوح صفحه نمایش یک راه حل عالی برای ایجاد یک نمونه کار طراحان وب.

شبکه تصویر کوچک با پیش نمایش در حال گسترش افزونه یک شبکه تصویر پاسخگو است. وقتی روی زیر کلیک کنید، یک عکس بزرگتر و توضیحات ظاهر می شود. برای ایجاد یک نمونه کار خوب است.

jGalleryjGallery یک گالری عکس تمام صفحه و پاسخگو است. افکت ها، انتقال ها و حتی سبک به راحتی قابل تنظیم هستند.

Glisse.js یک پلاگین ساده اما بسیار موثر برای گالری تصاویر. این دقیقاً راه حلی است که شما نیاز به ایجاد یک آلبوم عکس دارید. این افزونه از آلبوم‌ها پشتیبانی می‌کند و جلوه بسیار جالبی دارد.

Mosaic Flow یک گالری عکس ساده و پاسخگو با شبکه ای به سبک Pinterest.

Galereyaیک گالری شیک دیگر با شبکه ای به سبک Pinterest که بر اساس دسته بندی فیلتر شده است. در مرورگرها: کروم، سافاری، فایرفاکس، اپرا، IE7+، مرورگر اندروید، کروم موبایل، فایرفاکس موبایل کار می کند.

حداقل.js گالری تصاویر رایگان عالی با استفاده از JQUERY، 5 و CSS3. ظاهر بسیار جذابی دارد و بدون شک توجه بازدیدکنندگان شما را به خود جلب خواهد کرد.

flipLightBox یک گالری تصاویر ساده. وقتی روی پیش نمایش کلیک می کنید، تصویر کامل در یک لایت باکس باز می شود.

blueimp Gallery گالری انعطاف پذیر. قابلیت خروجی دادن به پنجره مودالنه تنها تصاویر، بلکه ویدئوها. روی دستگاه های لمسی عالی کار می کند. سفارشی کردن آن آسان است و امکان گسترش عملکرد با استفاده از افزونه های اضافی وجود دارد (به پلاگین بعدی مراجعه کنید).

» اسکریپت های PHP برای گالری تصاویر

گالری عکس Coppermine

Coppermine یک گالری تصاویر وب چند منظوره و چند منظوره است که با زبان PHP با استفاده از GD یا ImageMagick و همچنین پایگاه داده نوشته شده است. داده های MySQL.

| نسخه 1.5.24 | بارگیری شده: بار

گالری مایان

اسکریپت گالری عکس ساده و عالی. تصاویر در اندازه کامل را در پنجره جدیدی که باز می‌شود، مشاهده کنید، پیش‌نمایش‌ها (تصویر کوچک) و بسیاری موارد دیگر را در این بسته گالری Maian ایجاد کنید.

| نسخه 2.0 | بارگیری شده: بار

گالری تصاویر KoschtIT

گالری عکس KoschtIT رایگان است و منبع باز(متن باز) اسکریپت گالری عکس PHP. این برنامه برای اضافه کردن سریعگالری تصاویر PHP برای یک وب سایت موجود.

| نسخه 3.1c | بارگیری شده: بار

آلبوم عکس Max's PHP

آلبوم عکس PHP Max ساده و آسان برای استفاده است با استفاده از PHPاسکریپت آلبوم عکس. می توانید تصاویر را در سرور خود آپلود کنید، عنوان/عنوان و توضیحات را به فایل های عکس خود اضافه کنید، از مشاهده فایل ها با رمز عبور و سایر عملکردهای استاندارد محافظت کنید.

| نسخه 1.0 | بارگیری شده: بار

PHPGallery

یک گالری عکس ساده که با زبان PHP با استفاده از پایگاه داده MySQL نوشته شده است. کافی است فایل های عکس را آپلود کنید و بلافاصله به بهترین شکل ممکن به بازدیدکنندگان سایت شما ارائه می شود.

| نسخه 2.0 | بارگیری شده: بار

گالری تصاویر ساده

Simple Gallery سبک ترین سیستم مدیریت گالری تصاویر نوشته شده به زبان PHP است که از jQuery، MySQL و کتابخانه GD استفاده می کند.

| نسخه 1.3 | بارگیری شده: بار

پلاگر

پلاگر است اسکریپت phpگالری تصاویر یک نسل اساسا جدید با کد منبع باز برای ویرایش. برنامه PHPبا هیچ ویژگی غیر ضروری یا تنظیمات پیچیده متورم نیست.

iLoad یک اسکریپت گالری تصاویر برای وب سایت شما است که با جاوا اسکریپت نوشته شده است. iLoad برای پروژه های غیرتجاری به صورت رایگان توزیع می شود، مشروط بر اینکه حق چاپ و پیوندها در فایل حفظ شود. در این صفحه همیشه می توانید آخرین نسخه این اسکریپت گالری عکس را دانلود کنید و اطلاعاتی در مورد نحوه کار با iLoad پیدا کنید.

اسکریپت گالری iload

گالری iLoad به شما امکان می دهد عکس های خود را به راحتی و به طور موثر به بازدیدکنندگان خود نشان دهید. ظاهرگالری ها به راحتی قابل تغییر هستند و می توانید به سرعت گالری را متناسب با سبک سایت خود سفارشی کنید. iLoad به شما امکان نمایش تصاویر تک، گروه بندی و ایجاد نمایش اسلاید را می دهد. این گالری از تمامی مرورگرهای مدرن و همچنین اینترنت اکسپلورر از 6 تا 9 نسخه پشتیبانی می کند. iLoad از چارچوب های شخص ثالث مانند jQuery، Prototype و غیره استفاده نمی کند!

نصب iload

آرشیو فشرده حاوی سه فایل گالری iLoad را دانلود و استخراج کنید، سپس فایل ها را در وب سایت خود آپلود کنید. فایل iLoad.js را باز کنید و مسیر پوشه images را به مسیر پوشه فایل iLoad در سایت خود تغییر دهید. سپس صفحه ای را که در آن قرار است از گالری استفاده کنید باز کنید و اسکریپت را قبل از تگ بسته شدن مطابق شکل زیر قرار دهید. فراموش نکنید که مسیر فایل اسکریپت را تغییر دهید.

این کار نصب را کامل می کند. برای عملکرد صحیحگالری DOCTYPE اختیاری است. اگر می‌خواهید iLoad را در هدر سایت قرار دهید، تماس با تابع enable را از انتهای فایل اسکریپت حذف کنید:

پس از این، می توانید اسکریپت را در هر نقطه از صفحه وصل کنید و اسکریپت را در زمان مناسب پس از بارگیری صفحه، مقداردهی اولیه کنید:

استفاده

برای استفاده از iLoad در حالت عادی، کافیست ویژگی rel="iLoad" را به لینک تصویر اضافه کنید، و تصویر باز نمی شود. صفحه جدیدو در گالری:

عنوان و توضیحات

iLoad عنوان و توضیحات عکس را از ویژگی title می خواند. برای افزودن عنوان به یک عکس، آن را در ویژگی title در لینک تصویر بزرگ بنویسید:

برای افزودن توضیحات، آن را نیز در همان ویژگی بنویسید، اما این بار از جداکننده | استفاده کنید . خود جداکننده را می توان در پارامتر L.splitSign در فایل iLoad.js تغییر داد. به نحوه قالب بندی عنوان و توضیحات نگاه کنید:

شما می توانید فقط یک توضیحات بدون عنوان را با حذف آن مشخص کنید:

مجموعه عکس

گالری تصاویر iLoad به شما امکان می دهد مجموعه های عکس، یعنی مجموعه ها (آلبوم ها) ایجاد کنید. با باز کردن عکسی که بخشی از یک مجموعه است، می توانید عکس های کل مجموعه را بدون بستن iLoad یا بارگذاری مجدد صفحه مشاهده کنید. گروه بندی عکس ها همچنین به شما امکان استفاده از نمایش اسلاید را می دهد. برای ایجاد یک مجموعه با استفاده از پیوندها، در ویژگی rel بعد از "iLoad" جداکننده | را قرار دهید

و نام مجموعه را بنویسید. در اینجا مثالی از ایجاد یک مجموعه ساده آورده شده است:

پیش نمایش تصویر یا متن

ناوبری

بسته به پیکربندی پانل انتخاب شده، دکمه های کنترلی یا بلافاصله در زیر عکس یا کمی پایین تر در پانل گرافیک ظاهر می شوند. آنها یکسان هستند. پانل ها را می توان در تنظیمات غیرفعال کرد.

در مجموعه، جابجایی بین عکس های مجاور با کلیک بر روی قسمت های چپ و راست تصویر امکان پذیر است، در حالی که فلش های کوچک در سمت راست و چپ نمایش داده می شوند (در صورت فعال بودن این گزینه در اسکریپت).

می‌توانید iLoad را با کلیک کردن بر روی ناحیه تاریک اطراف پنجره دید یا با کلیک کردن روی دکمه دارای ضربدر در یکی از پانل‌ها ببندید.

از صفحه کلید قابل کنترل است. برای جابه‌جایی در یک مجموعه، می‌توانید از فلش‌های چپ و راست یا کلیدهای «P» و «C» استفاده کنید. همچنین می توانید از یکی از اعداد برای باز کردن یک عکس خاص استفاده کنید. نمایش اسلاید با کلید "Shift" یا "Ш" شروع می شود و با کلید "Ctrl" یا "Z" خاموش می شود. iLoad با کلید "Esc" خاموش می شود.

تنظیمات

اتصال