گالری عکس یکی از پرکاربردترین امکانات در پروژه های تحت وب است. گالری عکس یا گالری تصاویر یکی از راه های موثر برای نمایش تعدادی عکس در وب است . گالری عکس با php به کاربران اجازه دسترسی و دیدن تمامی عکس های یک وبسایت را در یک مکان و لحظه می دهد . اگر شما هم به نیاز ساخت گالری عکس با php در سایت یا پروژه های تحت وب خود دارید ، اسکریپت گالری تصاوریر ما به شما امکان را میدهد به سادگی در چند دقیقه این قابلیت را در وبسایت خودتان اضافه کنید
در این آموزش به شما نشان می دهیم که چطور یه گالری عکس با php و دیتابیس mysql ایجاد کنید. همچنین پاب آپ های گالری عکس را توسط پلاگین جی کوئری (jQuery) fancybox در گالری تصاویر اضافه کنید. این پلاگین به کاربران این امکان را میدهد که زمانی که بر روی یک عکس کلیک شد ، اندازه بزرگتر آن در یک پاب آپ جدید باز شود که جلوه زیبایی را به سایت می دهد.
قبل از اینکه شروع کنید ، نگاهی به ساختار فایل ها و فولدرها برای ساخت گالری تصاویر با php بیاندازید.
ساخت جداول دیتابیس
برای ذخیره اطلاعات تصاویر نیاز داریم که یک جدول در دیتابیس بسازیم. دستور SQL زیذ یک جدول به اسم images همراه با چند ستون پایه در دیتابیس mysql ایجاد می کند.
|
1 2 3 4 5 6 7 8 |
CREATE TABLE `images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `uploaded_on` datetime NOT NULL, `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; |
ساخت دایرکتری برای ذخیره سازی تصاویر
یک دایرکتری به اسم images برای ذخیره کردن عکس ها و داخل آن به عنوان ساب-دایرکتری به اسم thumb برای ذخیره اندازه بند انگشتی(thumbnail) ایجاد میکنیم
فایل اطلاعات دیتابیس (dbConfig.php)
فایل dbConfig.php شامل کدهای php برای اتصال به دیتابیس است .در قسمت های مشخص شده باید اطلاعات ورود و دیتابیس مورد نظر خود را مشخص کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php //DB details $dbHost = 'localhost'; $dbUsername = 'root'; $dbPassword = ''; $dbName = 'codexworld'; //Create connection and select DB $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); if ($db->connect_error) { die("Unable to connect database: " . $db->connect_error); } |
گالری عکس (index.php)
در فایل index.php ، ما تمامی عکس ها را از دیتابیس خوانده و در گالری نمایش می دهیم. همچنین ، همچنین گالری تصاویر می تواند با پلاگین جی کوئری fancybox هماهنگ شود.
|
1 2 3 4 5 6 |
<!-- fancybox CSS library --> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css"> <!-- JS library --> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <!-- fancybox JS library --> <script src="fancybox/jquery.fancybox.js"></script> |
کد جاواسکریپت (JavaScript)
پلاگین fancybox برای نمایش عکس ها به صورت popup استفاده می شود . بنابراین ، شامل کد های css و js است:
|
1 2 3 4 5 6 |
<!-- fancybox CSS library --> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css"> <!-- JS library --> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <!-- fancybox JS library --> <script src="fancybox/jquery.fancybox.js"></script> |
برای فراخوانی رویداد fancyBox بر روی گالری عکس ، سلکتور مورد نظر را بر روی متد fancybox() فراخوانی میکنیم
|
1 2 3 |
<script type="text/javascript"> $("[data-fancybox]").fancybox({ }); </script> |
کد PHP و HTML
با استفاده از PHP ، اطلاعات تصاویر از دیتابیس خوانده شده و عکس ها از فولدر images نمایش داده می شوند . برای نمایش گالری عکس ها با fancybox شما نیاز دارید که مشخصه (attribute) های زیر را به تگ های لینک (<a>) اضافه کنید
- مسیر عکس بزرگتر را در مشخصه
hrefمشخص کنید - مشخصه
data-fancybox=”group” را اضافه کنید - تیتر عکس را با اضافه کردن data-caption مشخص کنید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="container"> <div class="gallery"> <?php //Include database configuration file include('dbConfig.php'); //get images from database $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC"); if($query->num_rows > 0){ while($row = $query->fetch_assoc()){ $imageThumbURL = 'images/thumb/'.$row["file_name"]; $imageURL = 'images/'.$row["file_name"]; ?> <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" > <img src="<?php echo $imageThumbURL; ?>" alt="" /> </a> <?php } } ?> </div> </div> |
کد های css
کد های css زیر برای استایل دهی به گالری عکس در php استفاده شده است
|
1 2 3 4 5 6 7 8 9 |
<style type="text/css"> .gallery img { width: 20%; height: auto; border-radius: 5px; cursor: pointer; transition: .3s; } </style> |
حالا شما یک گالری عکس داینامیک را همراه با پاب آپ را در صفحات وب خود دارید. امیدوارم از آموزش ساخت گالری عکس با php و jQuery لذت برده باشید و در پروژه هایی که می نویسید استفاده کنید.
برای دانلود سورس کد از قسمت دانلود باکس استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
سلام
میشه در مورد این فیلد جدول یه توضیحی بدهید.
کارایی اش چیه و یک و دو یعنی چی؟
status enum(‘1’, ‘0’)
سلام.
فیلد ها در sql انواع مختلفی دارند مثلا INT برای ذخیره اعداد هست ولی enum نوعی از فیلد هست که میتونید مقادیر از پیش تعیین شده قرار بدید تا هنگام اجرای کویری sql فقط این مقادیر که اینجا ۰ و ۱ هست میتونه قرار بگیره
متوجه نشدم الان این صفر چکار میکنه اگر همه را صفر بگذارم
وضعیت نمایش هست که ۱ بزارید برای نمایش و در کل فیلدی هست که اگر برای پروژه استفاده می کنید و پنل مدیریت دارید برای مخفی/نمایش در سایت یا اسلایدر استفاده میشه
متشکرم
با سلام و خسته ناشید
یک سوالی که دارم اینست که تمام مراحل رو رفتم الان باید در جدول ایمج دیتابیس عکس ها را ذخیره کنم یا خود دیتابیس اتوماتیک انجام میدهد؟
سلام ممنون.
بصورت خودکار ذخیره میشه
من هر کار کردم به صورت خودکار ذخیره نشد میشه راهنمایی کنید مجبورا دونه دونه اطلاعات به دیتابیس بدم. سوال بعدی مشکل علامت ؟؟؟؟ برای خروجی از دیتابیس هست. کلی در بستر اینترنت جستجو کردم اما مشکلم همچنان پابرجاست. لطفا راهنمایی بفرمایید خیلی مهمه
احتمالا اتصال به دیتابیس با موفقیت انجام نشده.
حتما بررسی کنید اطلاعات ورود به دیتابیس رو درست در فایل dbConfig.php وارد کرده باشید.
همچنین برای علامت سوال حتما دیتابیس و جدول و سطر بصورت utf8_persian_ci باشه و همچنین در فایل dbConfig.php بعد از خط ۹ این خط رو اضافه کنید :
$db->set_charset(“utf8”);
اگر اطلاعات فایل کانفیگ مشکل داشته باشه مگه نباید وقتی دستی جدول برای تصاویر میسازم اون هم نمایش نده؟
خیر باید دستی داخل فایل php اطلاعات دیتابیس رو تغییر بدید
بینهایت سپاس گزارم بسیار این آموزش کار راه انداز بود مشکل یک ساله من رو حل کرد.
خوشحالیم که مفید واقع شده.
موفق باشید.
والله برنامه ای رو میشه برنامه خوب دونست که قابل حمل باشه ولی مثلا چنانچه کد شما روی سیستم من اجرا نشه! دیگه این برنامه بیخوده و فایده ای نداره!! من کدتون رو که ایمیل کردین دانلود کردم و ران کردم عملا هیجی نیست . هیج اروری نداشت ولی صفحه ایندکس فقط یک متنه که آلبوم رو معرفی میکنه. همین
دوست عزیز یا کد نذار یا لطفا طوری مار کن که ارزشمند باشه و حداقل چهار نفر سود ببره و یاد بگیره
سلام وقتی در حد مبتدی کدنویسی رو یاد بگیرید نمیتونید یه سورس کد ساده رو اجرا کنید.
خود کد به تنهایی اجرا نمیشه بلکه محیط اجرا کامل روی اجراش تاثیر داره و باید ارور لاگ محیط اجرا رو چک کنید و به اصطلاح دیباگ کنید
مشکل مربوط به یونیکد حل شد خدا رو شکر. فقط اگر راهنمایی کنید که چکار کنم اطلاعات خودش اتوماتیک وارد دیتابیس بشه کمک بزرگی کردید
سلام خسته نباشید می خواستم ببینم آیا امکانش هست با php برای وردپرس فانکشنی نوشت که بگه هر دسته باید از چه قالبی استفاده کنه ؟
سلام خسته نباشید واقعا دستتان درد نکنه فقط یه مشکلی هست وقتی که کد ها رو قرار می دم به ارور زیر بر می خورم اگر کمک کنید واقعا متشکر می شوم.
Warning: mysqli::__construct(): (HY000/1049): Unknown database ‘netparadis’ in C:\xampp\htdocs\wp-content\themes\MSJ-1\dbConfig.php on line 9
Unable to connect database: Unknown database ‘netparadis’
سلام. شما باید داخل فولدر wp-content\themes\MSJ-1\ فایل dbConfig.php رو ویرایش و اطلاعات دیتابیس از جمله نام دیتابیس رو تغییر بدید که الان خطا مربوط به نام دیتابیس هست که باید تغییر بدید تا اوکی بشه
واقعا ممنون و متشکرم مشکل حل شد اما بازم به مشکلات جدیدی خوردم
۱- تمامی کار ها رو همان طور که در بخش گالری با php فرمودید انجام دادم اما تصویری نمایش داده نمیشه آیا باید فایل های تصویر درون فولدر thumb با اسم خاصی ذخیره کرد تا نمایش داده شوند؟
۲- من دارم برای یه سایت پوسته می سازم و سایتشان هم وردپرسی اونا باید هاست جداگانه بخرن یا اینکه از هاست وردپرسیشان می توانند استفاده کنند؟
بازم ممنون و متشکرم
۱- احتمالا آدرس دهی تصاویر اشتباهه. شما روی تصویر کوچک که برای عدم نمایش تصویر هست کلیک کنید و آدرس تصویر رو ببینید چی نمایش میده و بر اون اساس داخل سورس آدرس رو اصلاح کنید.
۲-روی همون هاست میتونید استفاده کنید
بازم ممنون و متشکرم بزرگواری فرمودید.
با سلام
ممکنه لطف کنید بفرمایید اگه بخواییم داخل همین کدها یه کلید جهت حذف تصویر آپلود شده بزاریم چگونه عمل کنیم
سلام. بفرمایید طبق این کد کامل برای حذف المان اپلود شده، کد خود را برای اضافه کردن دکمه حذف ادیت کنید.
jQuery(function ($) {
$(“.previewPhoto”).on(“click”, function () {
var photo = $(this).data(‘photo’),
id = $(this).data(‘id’),
link = ‘http://domain.com/members/photos/’ + id + ‘/’ + photo;
$.fancybox({ ‘padding’ : 0,
‘href’ : link,
‘transitionIn’ : ‘elastic’,
‘transitionOut’ : ‘elastic’,
‘titlePosition’ : ‘over’,
‘title’ : ‘‘,
‘onComplete’: function() {
$(“.deleteP”).click(function() {
$.ajax({
url: ‘ajax/deletePhoto.php’,
type: ‘POST’,
data: {deletephoto:true, photo:photo},
success: function (result) {
$.fancybox.close();
$(‘li#’+photo).remove();
$.msg(‘Photo Deleted!’);
}
});
});
}
});
});
});
توجه کنید که درخواست به فایل deletePhoto.php بصورت ajax برای حذف فایل با تابع unlink ارسال می شود که باید این فایل را ایجاد و کد php حذف فایل را اضافه کنید.
موفق باشید.