شرائح سلايد بالصور بتأثيريين

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

إخواني أخواتي الأعزاء خصصت لكم هذه التدوينة من إضافات css - html - jquery ، وبالطبع طريقة تركيبها على قالب بلوجر هي شرائح سلايد ثابتة كما أسميها سبق وقدمت لكم شرائح كما بالمدونة ، أما بخصوص هاته الشرائح فتوجد تأثيرات مختلفة وسأخصص تأثييرين في هذه التدوينة ما يميز الإضافات أنها تتغير بحسب المكان التي ستضع فيهاإما بشكل مستطيل بأربع شرائح وشكل مربع بشريحتيين لذا فأينما وضعتها ستلائم موقعك أو مدونتك لذا نبدأ أولا بالمعاينة

شرح طريقة التركيب

1 .نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <head> ثم ضع الكود التالي فوقه

 <script src='https://ar1web-com.googlecode.com/svn/trunk/slide-img.js'/>

3. ابحث عن : <b:skin/><[[ ثم ضع كود التأثير المختار فوقه

التأثير الأول

/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: left;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0px;
padding: 10px;
background: #1F4977;
color: #fff;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.cs-style-4 figcaption a:hover {
background: #fff;
color: #ED4E6E;
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

.cs-style-4 li {
    perspective: 1700px;
    perspective-origin: 0 50%;
}
.cs-style-4 figure {
    transform-style: preserve-3d;
}
.cs-style-4 figure > div {
    overflow: hidden;
}
.cs-style-4 figure img {
    transition: transform 0.4s;
}
 
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
    transform: translateX(25%);
}
.cs-style-4 figcaption {
    height: 88.5%;
    width: 50%;
    opacity: 0;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

التأثير الثاني

/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: right;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: #1F4977;
color: #33F55B;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.grid figcaption span:before {
content: '$';
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* www.ar1web.com */
.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-130px);
-moz-transform: translateY(-130px);
-ms-transform: translateY(-130px);
transform: translateY(-130px);
}
.cs-style-3 figcaption {
width: 93.3%;
top: auto;
height: 92%;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-3 figcaption a {
position: absolute;
bottom: 45px;
left: 75px;
border-radius: 3px;
}
figcaption span {
font: normal 16px tahoma;
position: relative;
padding: 0 21px 0;
top: 0;
}
.cs-style-3 figcaption a:hover {
background:#fff;
color:#ED4E6E;
}

4. يتبقى فقط كود HTML ويمكنك وضعه بالمكان المناسب لك في القالب أو حتى في التخطيط عبر إضافة Html/Javascript

التأثير الأول

<ul class='grid cs-style-4'>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>Soon</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
        </ul>

التأثير الثاني

 <ul class='grid cs-style-3'>
          <li>
            <figure>
              <img alt='img04' src='http://3.bp.blogspot.com/-C2ExmqlpB_8/U3OQ9C7LBQI/AAAAAAAADCw/i8l20qZWO_0/s1600/1.png'/>
              <figcaption>
                <h3>
                 تحويل صورتك الشخصية إلى كرتون 
                </h3>
                <span>
                  10
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img01' src='http://2.bp.blogspot.com/-3EidbVMn1u0/U3OjR--ehnI/AAAAAAAADDI/KRddaMxpKRE/s1600/2.png'/>
              <figcaption>
                <h3>
                تصميم احترافي لصورتك الشخصية
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img02' src='http://3.bp.blogspot.com/-4zG1-BRVJcM/U3OjQ2hcjnI/AAAAAAAADDA/ZHtFkIorjoY/s1600/3.png'/>
              <figcaption>
                <h3>
تصميم صور احترفية لعرض خدماتك في خمسات 
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img05' src='http://2.bp.blogspot.com/-LVCBMviU9TQ/U4Bydq9wx6I/AAAAAAAADM8/V5uIlEhj0vg/s1600/1.png'/>
              <figcaption>
                <h3>
واجهة &quot;معرض حسام&quot;
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
        </ul>

* لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 20 تعليقًا:

عدنان مراد8/27/2014
السلام عليكم.

أخي أنا أريد أن ينطبق التأثير الثاني على صور المواضيع الموجودة في الصفحة الرئيسية، لمتابعة قراءة التدوينة (بدلا من طلب الخدمة)، فما الذي أغيره في كود html الأخير وأين أضعه لينطبق على كافة الصور في الصفحة الرئيسية وصفحات الأقسام؟

وشكرًا جزيلًا.
ردحذف
الردود
Abdelrhman9/13/2014
أخ حسام .. أنا قمت بتطبيق كل شئ ولكن القالب الذى أمتلكه فيه شرائح سلايد بالصور التى كانت مركبة على مدونة عرب ويب قبل سرقة الأضافة وعند تطبيق الأضافة بالتأثير الأول لم يتغير شئ !!
ردحذف
الردود
Mohammad Ktifan9/14/2014
السلام عليكم
أخي أنا طبقت جميع الخطوات ولم يعمل السلايدر بشكل صححيح كما في المعاينة أرجو إفادتي
ردحذف
الردود
Abdelrhman9/14/2014
أخى الكريم لم أستطيع حذف الإضافة القديمة !
ردحذف
الردود
Mohammad Ktifan9/17/2014
السلام عليكم
هناك بعض المواضيع المحذوفة كيف يمكنني ان أتصفحها مرة اخرى وشكراً
ردحذف
الردود
tadimsunnah4/18/2015
أغبى مدون رأيته في حياتي
ردحذف
الردود
Unknown8/06/2015
شكرااا لك اخي على اضافاتك الرائعة
ردحذف
الردود
Unknown11/09/2015
كيف يمكني تغيير اللون
ردحذف
الردود
غير معرف4/16/2016
اخي عجبني القالب
ردحذف
الردود