ميز صورك بتقنية css-jquery

11‏/08‏/2010





اليوم لدينا موضوع بسيط سوف يعطي ميزة رائعة لصورك

بحيث سوف يسهل بعرض صورك على شكل صور متحركة و أنيقة و مميزة جدا

يمكنك انت شخصيا التحكم في تحركها و كدا اختيار اتجاهها عمودي او افقي

أتمنى أن يكون مفيد لك





مثال 1 (Demo) مثال 2 (Demo)



أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " تحرير HTML "
 
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن  هذا الوسم





]]></b:skin>


و نضع قبله تماما هدا الكود 

 

 


#container{

width:400px;

margin:0px auto;

height:380px;

margin-top:50px}

#image1{

position:absolute;

cursor:pointer;

width:300px;

height:190px;

}

#image2{

display:none;

position:absolute;

cursor:pointer;

}

 

 الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery،


يوجد نوعان من الثاثيران..فكما قلت سابقا افقي أو عمودي

VERTICAL ;HORIZONTAL


ابحث عن  هذا الوسم

 




</head>

 

 و ضع فوقه احد هته الاكواد حسب اختيارك


 HORIZONTAL





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/SCRIPT%20HORIZONTAL.js"></script>




 VERTICAL





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/SCRIPT%20VERTICAL.js"></script>


 

أخيرا :  استعرض مدونتك ثم احفظ قالبك.



تطبيق الإضافة

 

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

 
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,



أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة





<div id="container">

<img id="image1" src="URL IMAGE 1" />

<img id="image2" src="URL IMAGE 2" />

</div>



روابط استفدت منها في كتابة الموضوع: