ساخت گالری عکس با jQuery و PHP

ساخت گالری عکس با jQuery و PHP

یکی از مزایای اصلی استفاده از یک کتابخانه محبوب جاوا اسکریپت، مثل jQuery این است که، تعداد باور نکردنی از پلاگین های در دسترس وجود دارد که در پروژه خود می توان استفاده کرد.

 

نمایش [fa type=”eye”]

 دانلود [fa type=”download”]


 

امروز می خواهیم یک گالری سفارشی درست کنیم که یک پوشه با محتوای تصویر را اسکن می کند و در خروجی یک گالری شیک و تمیز تحویل می دهد، برای این کار ما از jQuery، CSS، PHP و پلاگین Bootstrap 3 Lightbox استفاده می کنیم.

نیازی به دانلود پلاگین ندارید – من آن را در فایل های دانلودی گنجانده ام، بنابراین می توانید آنها را دانلود و مطالعه کنید.

 

ساختار فایل ها

 

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

 

HTML

 

محتوای HTML فایل index.php به صورت زیر خواهد بود.

 

index.php

 

همانطور که مشاهده می کنید، در این پروژه برای زیبای و ریسپانسیو بودن وب سایت  از فریم ورک بوت استرپ استفاده شده است. ما در اینجا برای صرفه جویی در زمان از لینک های cdn برای وارد کردن css ها و جاوا اسکریپت های پروژه خود استفاده کرده ایم. شما می توانید با دانلود کردن سورس بوت استرپ فایل را در پروژه خود انتقال دهید و سی اس اس و جاوا اسکریپت را به پروژه خود لینک کنید. برای آشنایی بیشتر با این فریم ورک می توانید به مستندات getBootstrap مراجعه کنید و یا آموزش هایی که در این رابطه در بابون قرار داده شده است مراجعه کنید:

 

 

PHP

 

ایده ساده است – پی اچ پی ما پوشه ای که تصایر گالری را درون آن قرار داده ایم را اسکن می کند و آن را به یک گالری عکس jQuery، Bootstrap تبدیل می کند. نکته مهم در مورد این استراتژی این است راه اندازی گالری عکس را بسیار آسان کند، و اضافه کردن عکس ها به یک پوشه موجود یک جذابیت است – تنها کافی است از طریق FTP تصاویر خود را در دایرکتوری images اضافه کنید.

 

gallery.php

 

حال برخی از خط های بالا را توضیح مختصری می دهم، در خط 3، نام دایرکتوری که تصاویر گالری درون آن قرار می گیرد را مشخص می کنیم، توجه کنید که این دایرکتوری را به صورت دستی باید در پروژه خود ایجاد کنید. در خط 5، نوع پسوند تصاویری که فقط می خواهیم در گالری نمایش داده شود را مشخص می کنیم. در خط 13، با استفاده از تابع opendir@ دایرکتوری مشخص شده را باز می کنیم، اگر این دایرکتوری در پروژه ایجاد نشده باشد، به ما پیغام خطا بر می گرداند. در خط 17، با استفاده از حلقه while تا زمانی که تابع readdir دایرکتوری باز شده را می خواند و تا زمانی که عکس در داخل دایرکتوری داریم، به کار خود ادامه می دهد و دستورات بین حلقه را اجرا می کند. خط 20 باعث می شود که لینک های جاری و دایرکتوری مادر را نادیده بگیرد و حلقه به کار خود ادامه ندهد تا اینکه از این مورد خاص با استفاده از دستور continue رد شود.

در خط 22، ما نام فایل و پسوند را با تابع explode هم جدا می کنیم و در یک آرایه قرار می دهیم. در خط 23، همانطور که معلوم است پسوند عکس را در متغیر ext$ قرار می دهد. در خط 25 نیز، نام عکس را با تابع implode در متغیر title$ قرار می دهد.

یکی از چیزهای که این تکه کد را جالب می کند این است که خط 39 و 40 باعث می شود، در بین تگ row فقط 3 عکس داشته باشیم، به این معنی که متغیر i$ با هر بار افزایش مقدار آن تغییر می کند، وقتی این مقدار به عدد 3 گسترش یافت، 3 عکس را در تگ row قرار می دهد، و به همین ترتیب در سه عکس در سطر در بین تگ row قرار می گیرد.

همانطور که می دانیم، این پروژه هر سطر شامل سه عکس است، شما می توانید این تعداد را تغییر دهید، به عنوان مثال اگر می خواهید در هر سطر 4 عکس داشته باشید، باید خط 30 را با col-md-3 و خط 39 را با دستور 4 % (i$ + 1) ویرایش کنید.

بعد از اینکه کد های php بالا را وارد کردید، حال باید فایل gallery.php را با استفاده از تابع include بین تگ row قرار دهیم، ما این کار را برای خوانایی کدها انجام می دهیم، تا کدها به بخش های کوچکتر تقسیم شود:

 

 

CSS

 

حال همه چیز راه اندازی شده است، اما هنوز پروژه نیاز دارد که زیبا به نظر برسد.

 

styles.css

 

 

jQuery

 

در آخر نیاز داریم که، کتابخانه جاوا اسکریپت jquery و افزونه lightbox را به صفحه خود اضافه کنیم، سی اس اس زیر را در تگ head بعد از سی اس اس بوت استرپ قرار دهید:

جاوا اسکریپ زیر را هم در قسمت body بعد از اسکریپت های بوت استرپ قرار دهید:

بعد از خط بالا، اسکریپت زیر را به صفحه اضافه کنید، که باعث می شود عکس ها را بصورت Modal نمایش بدهد:

 

خلاصه

 

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