الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

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

بدأه إسماعيل عنجريني في 8 فبراير 2010 · 0 رد · 1,822 مشاهدة · في Microsoft SharePoint
مشاركة: واتساب X فيسبوك تيليجرام
#1

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

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

PhotoGallery_01.jpg

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

PhotoGallery_02.jpg

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

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

PhotoGallery_03.jpg

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

PhotoGallery_04.jpg

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

PhotoGallery_07.jpg

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

PhotoGallery_06.jpg

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

PhotoGallery_08.jpg

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

رابط المقالة الأصل

1

مواضيع مشابهة