تغيير فئة الصور التي تمت مشاركتها مؤخرًا إلى سلايد شو

لتحسين مظهر الصفحة الرئيسية،
يمكنك تحويل فئة الصور المشاركة مؤخرًا إلى سلايد شو.

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