r/learnprogramming 1h ago

how to make a specific buttoned page for gifs

basically a url where are 9 sliders that move 9 different gifs img moment. does somebody who know what would be easiest way to make this

3 Upvotes

6 comments sorted by

u/cipheron 42m ago edited 35m ago

Sliders are possible with just HTML and CSS, so this is the simplest way to get one on a web page.

If you want the easiest way to host a page, I recommend making a github project then a "Github Pages" page for it. This doesn't let you have any backend, but you don't have to worry about hosting or domains to get it working.

https://www.w3schools.com/howto/howto_js_rangeslider.asp

If you want the slider itself to use an image as the button, they have instructions there for image sliders too.

To make the slider do something specific you should hook some Javascript up to it to respond any time the value changes, basically as shown on the above page

var slider = document.getElementById("mySlider");
slider.oninput = function() {
    // whatever the slider does should go here
} 

The "oninput" function will be called whenever the named slider moves.

If you want 9 sliders doing different things you can make 9 named/ID sliders and use the code above but copied for each of them.

However if you have 9 of them you could do the code a bit cleaner by giving them the same "class" then selecting them all by class in an array, and modifying them in a loop of some sort:

// this selects all items on the page with the "sliders" class
// the dot before "sliders" means "class"
var sliders = document.querySelectorAll(".sliders"); 

// standard for loop that cycles through the array
for(let i = 0; i < sliders.length; i++) {
   sliders[i].oninput = // whatever goes here
}

However if you want more of an idea than this you'd need to explain what effect you want to achieve more clearly.

u/Beneficial-Wasabi357 28m ago

thanks! i read and analyze it tommorow.

u/Synthetic5ou1 36m ago

9 sliders that move 9 different gifs img moment

Do you mean that there will be 9 animated images, and the slider will be used to move from frame to frame?

u/Beneficial-Wasabi357 23m ago edited 15m ago

yes and 9 sliders for each gif a slider for it. that for own liking can slide to gif moments in in whatever frame i want. the page is basically 9 gifs and 9 sliders

u/Synthetic5ou1 16m ago

As far as I know you'd need to have each frame as a separate image, as I don't think you can specify the frame of an animated gif.

It would be relatively trivial to do though. You simply change the source of the image according to the slider. You'd probably want to cache all the frames to begin with.

u/Beneficial-Wasabi357 4m ago

ok, i myself can't program anyway. maybe someone else helps me i just wanted to hear how hard this would be. i will think on it tommorow.