الطيب لخدمات الاستضافة - قاعدة المعرفة

الفكرة :

هل شعرت من قبل ان أظهار محتوى موقعك صعب للغاية؟

اليوم ولأول مرة على الوب العربى طريقة جديدة وفريدة لأظهار صورك ومحتويات موقعك بشكل جذاب ورائع

الفكرة كالتالى :

يقوم سكربت wave Display بإظهار مصغرات لصور موقعك على شكل موجة مائية.

عند الضغط على الصورة المصغرة مرة واحدة تقوم بعمل تكبير للصورة وتقريبا وعند الضغط مرة أخرى تقوم بأظهار مساحة كتابة تحتوى على وصف الصورة + مقال يجانب الصورة نفسها

طريقة تعديل الصور :

<div class="wd-element">
 <img src="images/1.jpg" alt="Some Image" />
 <div class="wd-info">
 <div class="wd-info-title">
 <h2>Some title</h2>
 </div>
 <div class="wd-info-desc">
 <p>Some Description</p>
 </div>
 </div>
</div>

العنصر ذو الفئة wd-info-desc هو المسئول عن اظهار الصورة للنقرة الصانية مثال :

الخيارات :

هناك العديد من الخيارات التى توجد بهذا السكربت الرائع لتعديل التأثيرات الجميلية الخاصة بالموجة.

فلننظر إلى هذة الخيارات معا :

// speed for the animations
 
easing : 'easeInOutExpo',
// easing for the animations
 
minImgW : 50,
// minimum width the thumbnail
// will have (randomly set)
 
maxImgW : 90,
// maximum width the thumb
// image will have (randomly set)
 
minImgAngle : -15,
// minimum rotation angle the
// thumbnail will have (randomly set)
 
maxImgAngle : 15,
// maximum rotation angle
// the thumbnail will have (randomly set)
 
leftFactor : 40,
// space between images on the x-axis
 
startFactor : 1,
// the higher this value, the more
// space between the first thumbnail and
// the left of the container
 
sinusoidFunction : {
 A : 100, // amplitude
 T : 700, // period
 P : 0 // phase
}

روابط مختصرة :

لرؤية مثال من هنا

لتحميل السكربت من هنا