إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا

اذهب الى الأسفل

إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا Empty إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا

مُساهمة من طرف كونان2000 الثلاثاء 20 فبراير 2024 - 21:52

السلام عليكم ورحمة الله وبركاتة
إضافة زر لتحريك شريط التمرير إلى احدث الصور 

إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا Ocia_a10
---------------------------

يعني عندما تضغط على الزر
يتحرك شريط تمرير الصورة من تلقاء نفسه  عجيـــب
عند الضغط على الزر مرة أخرى فإنه يتوقف
كما في الصورة
إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا Animation



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

اول شيء: عليك بتفعيل الصور التي تمت مشاركتها مؤخرا في منتداك
عن طريق لوحة الادارة > عناصر اضافية > الصور التي تمت مشاركتها مؤخرا >
تشكيل
ثم ضع الاعدادات كما في الصورة
إضافة زر لتحريك شريط التمرير إلى الصور التي تمت مشاركتها مؤخرا Ocia_a11

ثاني شيء: ابحث عن الجزء التالي في قالب Index_box
الكود:
<!-- BEGIN switch_forum_images -->

وضع فوقه مباشرة الكود التالي
الكود:
<p id="page-desc" class="imagelist_desc"></p>

تثبيت جافا سكريبت
العنوان * : كما تريد
المكان: في جميع الصفحات
الكود:
$(function(){
  $('#page-desc,p.imagelist_desc').after('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var intervalId;
    var targetWindow = $(".container-imgs-list");
  

    function startScrolling() {
        intervalId = setInterval(function() {
            targetWindow.scrollTop(targetWindow.scrollTop() + 1);
        }, 10); // Change the interval as needed
    }
  

    function stopScrolling() {
        clearInterval(intervalId);
    }
  

    $("#Latest-images-Button").click(function() {
        if ($(this).data("isScrolling")) {
            stopScrolling();
            $(this).text("تحريك الصور");
        } else {
            startScrolling();
            $(this).text("إيقاف التحريك");
        }
        $(this).data("isScrolling", !$(this).data("isScrolling"));
    });
});
</script>                        
<button id="Latest-images-Button">اضغط-لتحريك-الصور</button>

<div id="container-imgs-list" style="width: 300px; height: 0px; overflow: auto;">
</div>');
});
document.write('<style type="text/css">.container-imgs-list {height: 500px;}
button#Latest-images-Button {
    right: 50%;          
    left: 50%;
    position: relative;
    display: flex;
    margin: 5px;
    color: white;
    padding: 10px;
    background: #1e88e5;
} </style>');

اضافة لطيفه
آمل أن تنال إعجابكم  :باضحك بلطف:


مع التحية
--------------------------------------
تمت كتابة هذا البرنامج التعليمي بواسطة كونان2000،
باستخدام الذكاء الاصطناعي


عدل سابقا من قبل كونان2000 في الثلاثاء 30 أبريل 2024 - 10:28 عدل 1 مرات (السبب : تجديد الشرح)
كونان2000
كونان2000
اشراف عام المساعدة
اشراف عام المساعدة

ذكر
عدد المساهمات : 1411
معدل النشاط : 3002
السُمعة : 205

https://anime.forumperso.com/

ابوعلي البلقاوي, Witcherface و Mr Google يعجبهم هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى