The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add a button Move a Scrollbar  to Recently shared images

2 posters

Go down

Add a button Move a Scrollbar  to Recently shared images Empty Add a button Move a Scrollbar  to Recently shared images

Post by كونان2000 Mon Feb 19, 2024 7:36 pm

Hello All
Add a button Move a Scrollbar  to the Recently shared images
Add a button Move a Scrollbar  to Recently shared images Animation
----------------------------------------------


When you press the button
The photo Scrollbar  move on its own Pizza
When you press the button again it stops

Add a button Move a Scrollbar  to Recently shared images Ocia_a10


Find the next part in index_box template
Code:
<!-- BEGIN switch_forum_images -->

replace it with
Code:
<p id="page-desc" class="imagelist_desc"></p>
<!-- BEGIN switch_forum_images -->


Installing the JavaScript
Title * : as you like
Placement : In all the pages
Code:
$(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("Animate images");
        } else {
            startScrolling();
            $(this).text("Stop moving");
        }
        $(this).data("isScrolling", !$(this).data("isScrolling"));
    });
});
</script>                        
<button id="Latest-images-Button">Click here to scroll</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>');

Little trick
I hope that appeal to you Very Happy

_______________________________________________
This tutorial was written by كونان2000,
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki, YoshiGM, Sir Chivas™, SarkZKalie, TonnyKamper, poesia-verses, كونان2000 and hoanglongnhatbao like this post

Back to top Go down

Add a button Move a Scrollbar  to Recently shared images Empty Re: Add a button Move a Scrollbar  to Recently shared images

Post by SarkZKalie Sat Apr 06, 2024 11:00 pm

Halo

Imagine making this feature play as a mini-slideshow in real time Very Happy


Add a button Move a Scrollbar  to Recently shared images Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1423
Reputation : 220
Language : English

https://rotavn.forumotion.com/

كونان2000 likes this post

Back to top Go down

Add a button Move a Scrollbar  to Recently shared images Empty Re: Add a button Move a Scrollbar  to Recently shared images

Post by كونان2000 Wed Apr 10, 2024 4:05 pm

SarkZKalie wrote:Halo

Imagine making this feature play as a mini-slideshow in real time Very Happy
This is an entertaining slideshow Laughing

Thanks  @SarkZKalie
:rose: :rose: :rose:
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

SarkZKalie likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum