Geek Answers Handbook

Creating an image slider in elms, updating a model initiated by a loaded item

I am making an elm site that includes a dynamic element for viewing images. You can click on the specified finger to see the full image in the lightbox, go to the next or previous image, or let it automatically change the image every three seconds.

By default, you see only a small selection (4 thumbs), but you can view all the thumbs by clicking "voir toute les photos"

launch example here

Each user clicks or the tick of the clock changes the base model, which, in turn, makes the browser appropriately styled HTML.

I am mostly satisfied with the current level of functionality, except for the fact that I cannot find a way to display the transition screen (or image) when loading the next image.

The lightbox displays the last image displayed when loading the next and jumps abruptly.

Is there a way to initiate a model change only when loading the next image?

Or a more idiomatic way to do such things? I'm brand new to elm and web development in general.

the elm code for the gallery can be seen at: https://github.com/eniac314/mairieMurol/blob/master/src/Gallery.elm

+4
source share
1 answer

, , . img.onload DOM, Json Decoder src .

elm-0.18

onLoadSrc : (String -> msg) -> Html.Attribute msg
onLoadSrc tagger =
    on "load" (JD.map tagger targetSrc)

targetSrc : JD.Decoder String
targetSrc =
    JD.at [ "target", "src" ] JD.string

ImageLoaded String, .

img
    [ src imgsrc
    , onLoadSrc ImageLoaded
    ]
    []

( URL- ).

+5

More articles:


All Articles