Need help making transparent transition in slideshow

[wristcutter69]

Hi everyone, I recently made a very simple javascript slideshow in my website, however I’d really like to add a fancy transition with some kind of opacity between my pictures.

I already tried, to make use of the “-webkit” property using “fade in” and “fade out”on CSS but it didn’t work in any way at all…

I’d really like some guidance in this since I’m very new to javascript and I’m getting confused about how to reach a solution to this problem.

Here is my code:

See the Pen eBRabp by hell nino ( @wristcutter69) on CodePen.

[Paulie_D]

You’ll probably need to make a working demo using actual images first.

[wristcutter69]

I updated the code pen with actual images now

[Paulie_D]

Yes, you can.

If you don’t have the images hosted on line I’d suggest you use an image replacement option like

http://www.placebacon.net/

or

http://www.fillmurray.com/

[wristcutter69]

Ok
I updated tthe code pen

See the Pen KNvabg by hell nino ( @wristcutter69) on CodePen.

[wristcutter69]

As you can see the slideshow works as it is intended and I’d just like to add a transparent or opacity effect while one picture transitions to another, but I don’t have any clue on how to do that and I tried several methods that ended up not working in any way…

[Shikkediel]

Here’s one way:

Link

But it’s crude, using ontransitionend would be nicer.

[wristcutter69]

Works like a charm and as wonderfully!!! Pardon my ignorance but when I try to work with the actual files in my computer, the whole thing fails…

I think it is because of the ” //res.cloudinary.com/dbssny2ox/image/upload/v1480180122/ ” reference, what does it do and what are you using in that source?

[Shikkediel]

Because it was the basic path to the images that was used multiple times inside the array, I decided to take it out of there and apply it whenever the link itself is made. That way it only needs to be written out a single time and making the array more readable. You’ll notice I also appended .jpg after it when defining the new image path. Not sure why it would fail under other circumstances. Are you trying locally or online?

Edit – I left out http: as well which is valid and just a bit shorter too.

[wristcutter69]

I am trying locally with my files, it works perfectly on code pen.

[Shikkediel]

Are you using local images as well then or the urls used in the example? Probably an incorrect path in case of the former, not sure about the latter. Pasted into any live web page, the code from the pen ought to work.

Edit – maybe try adding http: again… this might be one case where leaving it out doesn’t work as expected.

[wristcutter69]

Even though I paste the code pen code to my live web page it wont work as it should, since it onlly displays the first image and the following ones dont appear.

Shkkediel, you’ve still been of great help, unfortunelty I just can’t wrap my head around those concepts today since I’ve been working nonstop on my website today and I’m having a really darn wicked headache, but tommorrow I will try to get things right and if I fail again I’ll ask more of your guidance if you’re willing to still help.

Thanks for your time I mean it! And I’ll see what I can do as soon as I can.

[Shikkediel]

No trouble. The issue’s probably a matter of timing. If you’ve pasted the script inside the head section of the document without an event listener for when the document is ready, it’ll be executed before the element you’re trying to adapt exists. You could add the script just before the closing </body> tag instead or use a wrapper like I will add to the example pen (later because it’s apparently being overloaded at the moment). Codepen itself doesn’t really need it because of where it appends the script.

If there’s any more difficulties, just drop a link. ;-)

[wristcutter69]

Hi, I managed to get to get it working locally with my local files!
– Problem is that it onlly works with the first image, then it slides to the second one and keeps repeating the second jpg all the time… here’s my code pen:

See the Pen eBRabp by hell nino ( @wristcutter69) on CodePen.

[wristcutter69]

I found out what I got wrong!
Problem is in: mySlide.setAttribute… line… It wouldn’t work, because I had placed too many (wrong) arguments. I needed just two, and since I had an array of images set, what I need to do was this: mySlide.setAttribute(‘src’, imageArray[imageIndex]);

[Author]

Posts