كيفية إنشاء معرض صور (Gallery) باستخدام PHP و HTML

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 19 ديسمبر 2024

محتوى المقال

المتطلبات الأساسية
هيكلة المشروع
الكود الأساسي لعرض الصور
تصميم معرض الصور باستخدام CSS
إضافة تحسينات على المعرض
الخلاصة

إنشاء معرض صور هو وسيلة رائعة لعرض الصور بطريقة منظمة وسهلة التصفح. يمكن استخدام PHP و HTML لإنشاء معرض ديناميكي يقوم بتحميل الصور تلقائيًا من مجلد محدد على الخادم. في هذا المقال، سنستعرض كيفية إنشاء معرض صور بسيط وديناميكي باستخدام PHP و HTML.

المتطلبات الأساسية

لإنشاء معرض صور باستخدام PHP و HTML، ستحتاج إلى:

بيئة تطوير PHP (مثل XAMPP أو WAMP).
مجموعة من الصور التي سيتم عرضها في المعرض.
فهم أساسي لـ HTML و CSS وPHP.

هيكلة المشروع

للبدء، سنقوم بإنشاء مجلد يحتوي على الملفات التالية:

index.php: هذا الملف سيكون واجهة معرض الصور، وسيحتوي على الكود الذي يعرض الصور.
images/: مجلد يحتوي على الصور التي سيتم عرضها في المعرض.
style.css: ملف CSS لتنسيق المعرض.

الكود الأساسي لعرض الصور

أولاً، دعنا نكتب كود PHP في ملف index.php الذي سيقوم بتحميل الصور من مجلد images/ ويعرضها في صفحة HTML:


            <?php

            // تعريف مسار مجلد الصور

            $imageDir = 'images/';



            // الحصول على جميع ملفات الصور من المجلد

            $images = glob($imageDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);



            // عرض الصور في صفحة HTML

            ?>



            <!DOCTYPE html>

            <html>

            <head>

                <link rel="stylesheet" href="style.css">

                <title>معرض الصور</title>

            </head>

            <body>

                <h1>معرض الصور</h1>

                <div class="gallery">


                    <?php

                    foreach ($images as $image) {

                        echo '<img src="' . $image . '" alt="صورة">';

                    }

                    ?>


                </div>

            </body>

            </html>

في هذا الكود، نقوم بتحديد مسار مجلد الصور $imageDir، ثم نستخدم الدالة glob() لجلب جميع ملفات الصور التي تحمل الامتدادات .jpg، .png، و.gif. يتم عرض كل صورة باستخدام حلقة foreach.

تصميم معرض الصور باستخدام CSS

لجعل المعرض يبدو جذابًا على الصفحة، يمكنك استخدام CSS لتنسيق الصور وجعلها تظهر بتنسيق شبكي. أضف الكود التالي في ملف style.css الخاص بك:


            body {

                font-family: Arial, sans-serif;

                background-color: #f0f0f0;

                text-align: center;

            }



            .gallery {

                display: grid;

                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

                gap: 10px;

                padding: 20px;

            }



            .gallery img {

                width: 100%;

                height: auto;

                border-radius: 10px;

                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            }

في هذا الكود، نستخدم شبكة CSS (CSS Grid) لتنظيم الصور في أعمدة وصفوف، ونتيح للصور التكيف مع عرض الحاوية. كما أضفنا بعض التنسيق لجعل الصور تبدو مرتبة باستخدام الظلال والحواف المستديرة.

إضافة تحسينات على المعرض

لتحسين تجربة المستخدم، يمكنك إضافة بعض التحسينات على المعرض مثل:

إضافة ميزة النقر لعرض الصورة بالحجم الكامل

يمكنك إضافة نافذة منبثقة لعرض الصورة بالحجم الكامل عند النقر عليها باستخدام JavaScript. الكود التالي يوضح كيفية تحقيق ذلك:


            <div id="popup" class="popup">

                <img id="popupImage">

                <span onclick="closePopup()">×

            </div>



            <script>

                function showPopup(src) {

                    document.getElementById('popup').style.display = 'block';

                    document.getElementById('popupImage').src = src;

                }


                function closePopup() {

                    document.getElementById('popup').style.display = 'none';

                }

            </script>

هذا الكود يضيف نافذة منبثقة تعرض الصورة بالحجم الكامل عند النقر عليها، ويستخدم JavaScript للتحكم في عرض النافذة وإغلاقها.

الخلاصة

باستخدام PHP وHTML، يمكنك إنشاء معرض صور ديناميكي سهل الاستخدام يتيح لك عرض الصور من مجلد على الخادم. يمكنك تحسين التصميم باستخدام CSS، كما يمكنك إضافة وظائف مثل عرض الصورة بالحجم الكامل باستخدام JavaScript. هذه الطريقة تساعد في إنشاء موقع مرن يعرض الصور بشكل فعال وجذاب.