السبت، 21 مارس، 2009

بناء معرض للصور باستخدام SharePoint Designer و Image Library و jQuery

هذه المقالة ستشرح كيفية بناء معرض للصور على Office SharePoint 2007 باستخدام مكتبة الصور Image Library و SharePoint Designer حيث سأستخدم مكتبة jQuery وذلك لإضافة بعض اللمسات التي تعطي معرض الصور إمكانيات قوية باستخدام بعض التعليمات فقط. ومن أجل بناء معرض الصور يجب اتباع الخطوات التالية:

1 - بعد تسجيل الدخول باستخدام اسم مستخدم وكلمة مرور اضغط على إجراءات الموقع – ومن ثم عرض كامل محتويات الموقع وبعدها اضغط على زر إنشاء واختر مكتبة صور Image Library كما في الشكل التالي:




2 - طبعاً من الأفضل إدخال اسم المكتبة باللغة الانجليزية وذلك لكي يظهر اسمها بشكل مناسب في عنوان المتصفح بشكل أفضل عند تصفح محتوياتها وتستطيع تغيير اسمها بعد ذلك إلى اللغة العربية:




3 - بعد إنشاء مكتبة الصور يجب حمل بعض الصور إليها ويفضل أن تكون من النوع jpg أو gif, ومن ثم افتح برنامج SharePoint Designer وافتح الموقع حيث ستضع الصفحة التي تحتوي على معرض الصور.




4 - أنشئ صفحة aspx التي ستحتوي على معرض الصور وليكن اسمها MyPhotoGallery.aspx واحفظها في المجلد Pages.




5 - حول الصفحة إلى وضعية التصميم بالضغط على Design في أسفل الصفحة كما في الشكل التالي:




6 - يجب تخصيص الجزء PlaceHolderMain من الصفحة وذلك حيث سيتم إدراج Data View التي ستعرض صور مصغرة عن الصور التي تم رفعها إلى مكتبة الصور PhotoGallery:






7 - من قائمة Data View اختر Manage Data Sources ومن ثم اختر اضغط على PhotoGallery من القسم SharePoint Libraries واختر Show Data ومن ثم اضغط على مسار URL واسحب إلى الصفحة كما في الشكل التالي:





8 - ابحث عن تعليمة الـ HTML التي تعرض الصورة وغير ها إلى القيمة التالي:




الآن افتح الصفحة MyPhotoGallery.aspx لتشاهد صور مصغرة عن الصور التي تم رفعها إلى مكتبة الصور كما في الشكل التالي:


9 - 1. في هذه الخطوة سيتم إضافة ميزة إظهار الصورة الأصلية بحجمها الحقيقي عندما يتم وضع مؤشر الفأرة على الصورة المصغرة, وذلك باستخدام مكتبة jQuery والتي يمكن الحصول عليها من الرابط التالي:http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js


الآن عند مرو مؤشر الفأرة فوق الصورة ستظهر الصورة صغيرة وبعدها سوف تكبر بالتدريج (شكراً jQuery).

هناك تعليق واحد:

  1. مشكور اخي على مشاركتك هذا العمل الطيب ولكن لو كتبت الكود كحقل نصي يكون افضل من الصورة, وجزاك الله خير

    ردحذف