تغيير فئة الصور التي تمت مشاركتها مؤخرًا إلى سلايد شو
صفحة 1 من اصل 1
تغيير فئة الصور التي تمت مشاركتها مؤخرًا إلى سلايد شو
السلام عليكم ورحمة الله وبركاته
مرحبًا بأعضاء منتدى الدعم
https://i.postimg.cc/Yk7j9KLs/Animation.gif
-------------------------------------
لتحسين مظهر الصفحة الرئيسية،
يمكنك تحويل فئة الصور المشاركة مؤخرًا إلى سلايد شو.
1: يتيح السلايد شو للمستخدمين التنقل بين الصور باستخدام شريط التمرير السفلي أو بالنقر على الأسهم يمين ويسار.
2: يتكيف السلايد شو مع مختلف أحجام الشاشة، مما يجعله مثاليًا للاستخدام على الهواتف المحمولة والأجهزة اللوحية
يارب يكون هذا التغيير مفيدًا لكم جميعًا
_____________________
طريقة التركيب
--------------
--------------
أولا عليك تفعيل الصور التي تمت مشاركتها مؤخرًا عن طريق لوحة الادارة > عناصر إضافية > الصور التي تمت مشاركتها مؤخرا
تشكيل
"إعدادات "الصور التي تمت مشاركتها مؤخرًا
"قم بتنشيط "الصور التي تمت مشاركتها مؤخرًا : نعم
إظهار رابط الصفحة في عارضة التصفح : نعم
اعرض الصور التي تمت مشاركتها مؤخرًا على الصفحة الرئيسية : نعم
ثم اذهب الى التومبلايتات و القوالب
ابحث في قالب index_box
عن الكود الذي يبدا بــ
- الكود:
<!-- BEGIN switch_forum_images -->
- الكود:
<!-- END switch_forum_images -->
واستبدله بالتالي
- الكود:
<!-- BEGIN switch_forum_images -->
<div id="konan-solid" class="forum-images">
<div class="konan-images">أحدث الصور المضافة</div>
<div class="konan-solid">
<a href="/images" class="konan-konan">قائمة الصور</a>
<button id="moveRight">❮</button>
<button id="moveLeft">❯</button>
<div class="conan-conan">
<div class="fo-header">
<div class="category-title">
<script type="text/javascript">
$(document).ready(function(){
var scrollableContent = $('.conan-conan');
var scrollAmount = 350;
$('#moveLeft').click(function(){
scrollableContent.animate({scrollLeft: '-=' + scrollAmount}, 400);
});
$('#moveRight').click(function(){
scrollableContent.animate({scrollLeft: '+=' + scrollAmount}, 400);
});
});
</script>
<style>
div#imageList {width: 300px;}
.konan-images {font-weight: bold;padding: 5px;text-align: center;color: white;background: #3594e1;}
.konan-solid {padding: 10px;border: dotted 1px #035393;background: white;}
.conan-conan {margin-top: 11px;height: 257px;overflow: scroll;}
a.konan-konan {font-weight: 900;font-size: 17px;border-radius: 10px;color: #fff !important;border: solid 1px #d5dcdf9c;padding: 5px;background: #249eff;float: left;text-decoration: none !important;}
.forum-hidden .container-imgs-list {max-height: 250px !important;padding: 0 !important;text-decoration: auto;}
.container-imgs-list img {height: 222px;width: 222px;}
.container-imgs-list {overflow: initial !important;display: flex;flex-wrap: nowrap;justify-content: right;padding: 0;flex-direction: row-reverse;}
.container-imgs-list .image_item {width: 222px;height: 222px;transform: rotate(270deg);}
.container-imgs-list .image_column {display: flex;margin: 10px;flex-direction: row-reverse;}
button#moveLeft {border-radius:10px;width:50px;height:40px;font-size:22px;margin-right:10px;color:#f0ffff;background:#2196F3;cursor: pointer;}
button#moveRight {border-radius: 10px;width: 50px;height: 40px;font-size: 22px;margin-left: 10px;color: #f0ffff;background: #2196F3;cursor: pointer;}
.container-imgs-list .image_column {display: inline;transform: rotate(90deg);flex-direction: row-reverse;}
#imageList > div:nth-child(5) {left: 380px;top: -130px;position: relative;}
.container-imgs-list .image_item.overflown {opacity: 0;transform: scale(.4);}
.container-imgs-list {border: 0;}
</style>
</div></div>
<div class="container-imgs-list" style="max-height: 200px; margin-top: 0px" id="imageList">
{switch_forum_images.SCRIPTS}
</div></div></div></div>
<!-- END switch_forum_images -->
لا تنسى أن تضغط سجل ثم انشر
--------------وهكذا تكون انتهيت من جميع الخطوات
وشاهد السلايد شو في الصفحة الرئيسية في منتداك
ختاما, نأمل أن يكون هذا التحسين مفيدًا لكم جميعًا، وأن يسهم في تحسين منتدياتكم
ويجعل تجربتكم في مشاركة الصور واستعراضها أكثر سلاسة وإتقانً
وفقكم الله جميعا
--------------------------------------------------------
تم كتابة الكود بواسطة كونان2000
عدل سابقا من قبل كونان2000 في الخميس 25 يوليو 2024 - 17:34 عدل 5 مرات
ابوعلي البلقاوي, Mahmoud Gilany, abigan و S@MeH-Des يعجبهم هذا الموضوع
مواضيع مماثلة
» اجعل خلفيات وإطارات الصور التي تمت مشاركتها مؤخرًا ملونة
» الصور التي تمت مشاركتها أخيراً
» من اين اعدل على صفحة : الصور التي تمت مشاركتها مؤخرا images
» إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا
» لصق النص مع الصور التي فيه
» الصور التي تمت مشاركتها أخيراً
» من اين اعدل على صفحة : الصور التي تمت مشاركتها مؤخرا images
» إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا
» لصق النص مع الصور التي فيه
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى