سكربت Wave Display لعرض الصور

برستيجً فنآنً

عضو جديد
11 فبراير 2012
8
0
0



الفكرة :
4.gif


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

يقوم سكربت 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 }
روابط مختصرة :

 

ali_gh

عضو جديد
25 ديسمبر 2010
180
0
0
جزاكم الله خيرا وبارك الله فيكم