أضف الصور المتحركة إلى موقعك على طريقة الفيس بوك

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

  قد تجد العديد من المستخدمين يستخدمون صور متحركة GIF على حسابات المواقع الإجتماعية مثل الفيس بوك و تويتر و لكن ما يميز هذه الصور المتحركة على تلك المواقع أنها تعطى للزائر حرية الإختيار إذا أراد تشغيلها أو تظل ثابتة ، و قد حرص كلا من الفيس بوك وتويتر إستخدام خاصية Click to preview لضمان تحميل أسرع للصفحات .

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

تابع:  أسرع الطرق لإنشاء صور متحركة بدون برامج

طريقة نشر الصور المتحركة GIF على موقعك بخاصية Click to preview

أولًا: إستخدمت فى هذه التدوينة إضافة مفتوحة المصدر jqGifPreview للإستفادة من ميزة Click to preview إضغط هنا للمعاينة

ثانيًا: يجب أخذ لقطة أو تصوير الشاشة لإلتقاط صورة ثابتة بصيغة PNG من الصورة المتحركة لتظهر بشكل إفتراضى قبل الضغط عليها، ورفعها على حسابك فى جوجل بلس أو أى موقع.

ثالثًا: إذا كنت تستخدم الصور المتحركة فى معظم موضوعات موقعك إتبع الخطوات:
1. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
2. إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F

</head>

3. ثم أنسخ الكود التالى وقم بإضافته فوق الكود السابق مباشرة

<!--www.condaianllkhir.com-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.css" rel="stylesheet"></link>
<script src="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.js"></script>

4. ثم إحفظ القالب
5. توجه إلى تبويب HTML للتدوينة وقم بإضافة الكود التالى:

<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" />
<script>
 $(function() {
  $(".myImg").jqGifPreview();
 });
</script>

ملاحظات :

• إذا كان لديك مكتبة JQuery بالقالب ، فلا داعى لإضافة السطر الأزرق بالكود .
• قم بإستبدال الجزء الملون باللون الأصفر بالكود برابط الصورة الثابتة بصيغة PNG
• قم بإستبدال الجزء الملون باللون الأخضر بالكود برابط الصورة المتحركة بصيغة Gif
• إذا كنت تريد إستخدام هذه الخاصية فى موضوع معين فقط يمكنك إضافة جميع الأكواد داخل تبويب HTML للتدوينة.

يمكنك أيضًا إستخدام حل آخر وهو عرض الصور المتحركة داخل Colorbox

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة