السلام عليكم ورحمة الله وبركاتة

من خلال بحثي بالنت وجدت طريقة رائعة لعرض الصور

واحببت ان انقلها لكم حتى تستخدمونها لما لها اثر كبير

على زوار مواقعكم

لنبدأ بسم الله

اولا عليك تحميل الملفات التالية

اضغط هنا للتحميل

ستجد داخل الملف المضغوط خمسة ملفات

الاول سيكون thickbox.css قم برفعة الى مجلد موقعك الرئيسي او اذا احببت

قم بنسخ محتواه وضعه داخل صفحة الويب التي تريد ان تضع بها هذه الخاصية

والملف الثاني والثالث سيكونون ملفات بأمتداد JS

وملفان للصور ضعها في مجلد الصور

قم بفتح الملف thickbox-compressed.js

وابحث عن هذا المتغير tb_pathToImage

وتأكد بأن امتدادة يؤدي الى هذه الصورة macFFBgHack.png

ثم قم بتحرير صفحة الـ HTML

وضع في الهيدر هذا الكود

ولكن تاكد من امتداد الملفات بأنها صحيحة java/jquery-latest.pack.js هذا واحد

والاخر java/thickbox-compressed.js هذا

وقم ايضا بوضع هذا الكود اسفل منهما



وتأكد من مكان وجود الملف thickbox.css

نأتي الان للقسم الاخير وهو

فالنفرض بأن لديك صور وتريد عرضها اولا عليك عمل من كل صورة تريد عرضها صورة مصغره

بحيث عند الضغط عليها تظهر لك الصورة الكبيرة وتتحكم بها كما تريد

الان سأقم بشرح طريقة عملها بعد النظر الى الكود بالاسفل


تلاحظ وجود كود لرابط الكتروني وكود لصورة

الرابط الالكتروني سيكون للصورة الكبيرة وكود الصورة سيكون للصورة المصغره

ولكن لابد عند قيامك بوضع رابط ان تضع بالاتريبيوت

واذهب الان للصفحة التي اردت تضع بها هذه الخاصية وانظر للذي سيحدث عند الضغط على الصورة

اتمنى ما اكون اخطأت بأي شيء بالدرس

ولأي استفسار او سؤال تفضلوا واسألو وانا جاهز للرد عليكم

بالتوفيق للجميع ^^

منقول
مترجم

شكرا لك على الموضوع