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

ساخت گالری عکس با php

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

 

در این آموزش به شما نشان می دهیم که چطور یه گالری عکس با php و دیتابیس mysql ایجاد کنید. همچنین پاب آپ های گالری عکس را توسط پلاگین جی کوئری (jQuery) fancybox در گالری تصاویر اضافه کنید. این پلاگین به کاربران این امکان را میدهد که زمانی که بر روی یک عکس کلیک شد ، اندازه بزرگتر آن در یک پاب آپ جدید باز شود که جلوه زیبایی را به سایت می دهد.

 

قبل از اینکه شروع کنید ، نگاهی به ساختار فایل ها و فولدرها برای ساخت گالری تصاویر با php بیاندازید.

ساخت گالری عکس با php

ساخت جداول دیتابیس

برای ذخیره اطلاعات تصاویر نیاز داریم که یک جدول در دیتابیس بسازیم. دستور SQL زیذ یک جدول به اسم images همراه با چند ستون پایه در دیتابیس mysql ایجاد می کند.

ساخت دایرکتری برای ذخیره سازی تصاویر

یک دایرکتری به اسم images برای ذخیره کردن عکس ها و داخل آن به عنوان ساب-دایرکتری به اسم thumb برای ذخیره اندازه بند انگشتی(thumbnail) ایجاد میکنیم

ساخت گالری عکس با php

فایل اطلاعات دیتابیس (dbConfig.php)

فایل dbConfig.php شامل کدهای php برای اتصال به دیتابیس است .در قسمت های مشخص شده باید اطلاعات ورود و دیتابیس مورد نظر خود را مشخص کنید.

گالری عکس (index.php)

در فایل index.php ، ما تمامی عکس ها را از دیتابیس خوانده و در گالری نمایش می دهیم. همچنین ، همچنین گالری تصاویر می تواند با پلاگین جی کوئری fancybox هماهنگ شود.

کد جاواسکریپت (JavaScript)

پلاگین fancybox برای نمایش عکس ها به صورت popup استفاده می شود . بنابراین ، شامل کد های css و js است:

برای فراخوانی رویداد fancyBox بر روی گالری عکس ، سلکتور مورد نظر را بر روی متد fancybox() فراخوانی میکنیم

کد PHP و HTML

با استفاده از PHP ، اطلاعات تصاویر از دیتابیس خوانده شده و عکس ها از فولدر images نمایش داده می شوند . برای نمایش گالری عکس ها با fancybox شما نیاز دارید که مشخصه (attribute) های زیر را به تگ های لینک (<a>) اضافه کنید

  • مسیر عکس بزرگتر را در مشخصه href مشخص کنید
  • مشخصه data-fancybox=”group” را اضافه کنید
  • تیتر عکس را با اضافه کردن data-caption مشخص کنید

کد های css

کد های css زیر برای استایل دهی به گالری عکس در php استفاده شده است

حالا شما یک گالری عکس داینامیک را همراه با پاب آپ را در صفحات وب خود دارید. امیدوارم از آموزش ساخت گالری عکس با php و jQuery لذت برده باشید و در پروژه هایی که می نویسید استفاده کنید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۸)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. Mohammad Saleh Jafari ۲۴ مرداد ۱۳۹۹

    سلام خسته نباشید می خواستم ببینم آیا امکانش هست با php برای وردپرس فانکشنی نوشت که بگه هر دسته باید از چه قالبی استفاده کنه ؟

    پاسخ
  2. Mohammad Saleh Jafari ۱۸ مرداد ۱۳۹۹

    سلام خسته نباشید واقعا دستتان درد نکنه فقط یه مشکلی هست وقتی که کد ها رو قرار می دم به ارور زیر بر می خورم اگر کمک کنید واقعا متشکر می شوم.
    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’

    پاسخ
    1. حسن شفیعی ۱۹ مرداد ۱۳۹۹

      سلام. شما باید داخل فولدر wp-content\themes\MSJ-1\ فایل dbConfig.php رو ویرایش و اطلاعات دیتابیس از جمله نام دیتابیس رو تغییر بدید که الان خطا مربوط به نام دیتابیس هست که باید تغییر بدید تا اوکی بشه

      پاسخ
      1. Mohammad Saleh Jafari ۱۹ مرداد ۱۳۹۹

        واقعا ممنون و متشکرم مشکل حل شد اما بازم به مشکلات جدیدی خوردم
        ۱- تمامی کار ها رو همان طور که در بخش گالری با php فرمودید انجام دادم اما تصویری نمایش داده نمیشه آیا باید فایل های تصویر درون فولدر thumb با اسم خاصی ذخیره کرد تا نمایش داده شوند؟
        ۲- من دارم برای یه سایت پوسته می سازم و سایتشان هم وردپرسی اونا باید هاست جداگانه بخرن یا اینکه از هاست وردپرسیشان می توانند استفاده کنند؟
        بازم ممنون و متشکرم

        پاسخ
      2. حسن شفیعی ۱۹ مرداد ۱۳۹۹

        ۱- احتمالا آدرس دهی تصاویر اشتباهه. شما روی تصویر کوچک که برای عدم نمایش تصویر هست کلیک کنید و آدرس تصویر رو ببینید چی نمایش میده و بر اون اساس داخل سورس آدرس رو اصلاح کنید.
        ۲-روی همون هاست میتونید استفاده کنید

        پاسخ
      3. Mohammad Saleh Jafari ۱۹ مرداد ۱۳۹۹

        بازم ممنون و متشکرم بزرگواری فرمودید.

        پاسخ
  3. reza ۱۹ اردیبهشت ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۱۹ اردیبهشت ۱۳۹۸

      سلام. بفرمایید طبق این کد کامل برای حذف المان اپلود شده، کد خود را برای اضافه کردن دکمه حذف ادیت کنید.
      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 حذف فایل را اضافه کنید.
      موفق باشید.

      پاسخ
دوره های آموزشی