2019-03-22 12:10:59
, 2019-03-22 12:10:59

Animated picture?

Good afternoon everyone. Friends, the crux of the matter is this. Below is a picture consisting of several frames.
It is necessary to implement the following:
When you click on the thumbnail, not the whole picture opens to the half of the screen, but only a certain part of it (let's call it a frame) with an image of a closed toilet. Under the picture there are 2 buttons "Back", "Forward"
Each click on the button opens the next, previous frame (selected area).
Perhaps someone has already encountered? Or maybe it's easier to realize this moment by dividing the picture into several?
Better without js if possible. Thanks to everyone who read.

Answer the question

In order to leave comments, you need to log in

5 answer(s)
hzzzzl, 2019-03-22

just slightly adjust the pixel dimensions
but in general xs, I would probably better break it into separate pictures and screw in a ready-made proven slider that will definitely look good everywhere

Valentin, 2019-03-22

if without the "Back", "Forward" button, then you can use pure CSS, your picture is a sprite + animation (background-position)

Dmitry, 2019-03-22
Chainikov @Dan_Stanly

Almost your example of slide animation . I hope you "screw" the buttons yourself?

lagudal, 2019-03-22

Here is also an option with a png sprite - a simple animation, but for understanding your example it will do, I think)

westdp, 2016-12-12

Check if an element exists:

if ($('.class').length > 0) {
    // существует
} else {
    // не существует

Or check for undefined

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question