[Simon Matthews]

Okay, thank you. Wasn’t really expecting you to write out something for me from scratch (though I really appreciate it when you do), was hoping that there was something out there already available. My knowledge of JS is extremely limited but hopefully I will find time to study it a bit more at some point.

Thanks,

Simon.

[Simon Matthews]

Sorry, it won’t let me type out an example for some reason. Basically my example was adding an id of ‘one’, ‘two’, ‘three’ etc. to the image tag of each cycler image.

[Simon Matthews]

Hi,

So could I put id=”one”, id=”two” etc. on each of my cycler images for this to work with a cycler?

Eg:

And then just add your function somewhere in the cycler script?

Thanks,

Simon.

[Simon Matthews]

Hi,

Thanks for pointing that out, I hadn’t noticed that, although after sending in my question I did find the same solution further down the same page as a response to a question someone had sent in.

I do have another slight problem now though: I have my images fading in very, very slowly (as in the example website I attached), but as the first image fades in you can see the underlying images fading in as well. To achieve the fade in I set the display to none on both img and img.active in CSS, then I added the following script to the cycler to fade them in:

$(window).load(function(){
$(‘#cycler-sub-banner2 img.active’).fadeIn(3000);
$(‘#cycler-sub-banner2 img’).fadeIn(15000);
// run every 7s
setTimeout(‘cycleImages2()’, 7000);
})

The problem with this is, the active image and the other images start to fade in at the same time. I need a way to delay the fading in of the other images so that they don’t show through. Any ideas would be much appreciated!

Thanks,

Simon.

[Simon Matthews]

Hi Curtis,

Can you help me out with a little problem please? I need to create a cross fade image carousel like the one I use on my website but I want it to stop on the last image without going back to the first image again. I’m guessing it can be done by making an amendment to the code I’m already using?

Here is a link to a website that has the effect I’m trying to create:

https://www.fresherclean.co.uk/leather-cleaning-plymouth-exeter/

Note the small images that contain the place names fade between 3 different images and then just stop. I also want to have the images fading in slowly like they do in that website.

Can this be done by amending the following code?

https://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Thanks,

Simon.

[Simon Matthews]

Hi,

Thanks, I just worked out a simple way to do it actually. You just add display:none to cycler image.active in CSS instead of display:block and then add an extra line in the JS to show cycler image:active. However, doing it this way actually makes the page loading look worse, even after I compressed the images in JPeg! The rest of the page is displayed before the cycler, and there is a much longer pause before the cycler is shown than I thought there would be, which looks messy. It looks better just left alone to load up as normal! I suppose to do it right you’d have to programme it so that nothing at all is displayed before the cycler, but for the minimal difference you’d get it’s not worth me pursuing that avenue.

Thanks for bearing with me on this experiment of mine! At least I now know about the save for the web in Photoshop, which is much better than the way I was doing it before – I used to upload each pic to an on-line compressor, which was time consuming and is the reason I delayed it until the page was finalized. Now I can compress the images from the beginning.

Oh thanks for the link to the jQuery cyclers too, may use some of those in the future!

Thanks again,

Simon.

[Simon Matthews]

Hi,

Well I’ve seen the issue occur lots of times when loading other people’s websites, so I guess that has verified it for me as an issue that exists. For example, it occurs slightly when loading Video Copilot’s website. I think I’ve seen it occur on one of my own sites after image compression but can’t answer with 100% certainty on that one. I’m pretty sure it occurs, but obviously to a lesser extent. I don’t see much point in comparing my full website homepage that includes a 900×400 pixel banner to a page consisting of just a small cycler in the corner of the page. The smaller page is going to load up quicker isn’t it.

As I think I said earlier, I have already tested the image cycler on a page of its own. When the cycler is on a page of its own the issue is barely visible. Unfortunately my image cycler is on a website with a lot of other information, which slows down the process, making the issue visible. Is it possible to preload images so that nothing is displayed on screen until the images are loaded? This is what I am asking. It’s not essential but it would be nice to know. There’s either a way or there isn’t. If possible I’d like to know if there is and thought you might be able to tell me.

Your JPeg image compression advice is duly noted and will be utilized in the future! Actually, I had never noticed the option for saving for the web in Photoshop until you mentioned it, so thanks for that! 🙂

Thanks,

Simon.

[Simon Matthews]

Hi,

Well yes, compressing the images will make them load faster onto the screen but still not fast enough to eliminate seeing them load up down the screen I don’t think, which is not as pretty as having them load instantly. Once the images are cached they appear more instantly. I presumed preloading images would have the effect of delaying anything being displayed on screen until the images are loaded, then displaying the images in a more instant way, as though they were cached? This is not an issue that is vastly important to me but I thought it might make the loading slightly neater and I would use it if it was available.

While we are on the subject, can you recommend the best way to compress JPeg images? Can it be done from within Photoshop or should I use a compression application or website?

Thanks,

Simon.

[Simon Matthews]

Hi, thanks for explaining the order of JavaScript. At the moment I have put learning JavaScript on hold as it was getting too much for me with all the animation, Cinema 4D and After Effects etc. I’ve resorted to just copying and pasting for now without really knowing what’s going on. The way things seem to be going with me though, I may end up concentrating more on understanding JavaScript instead of animation.

I didn’t realize I was preloading twice? There’s some script at the top which is greyed out – is this what you are referring to?

With the image sizes, what I plan to do is finalize the page and then compress the images. I’ve already changed the banner images several times during development, so to avoid repetitive compressing I will do it all at the end. I probably wouldn’t have uploaded the site to my host yet, but I’m not sure how to view pages in my browser when there is a contact form included.

So you say that any web page is a top to bottom thing. I understand that, but I thought that by preloading the images they would display more quickly, as though they were in the cache? Isn’t that what preloading is? If not then I don’t see any point in preloading.

Simon.

[Simon Matthews]

Hi,

I was a bit confused, wasn’t sure if the script was meant to be split into two separate chunks, with the “// Usage” chunk going in the body and the code above that to go in the head. I’m guessing now that it all goes together in one single chunk?

Anyway, I’ve tried the script at the bottom of the body and it doesn’t work for me at all. I tried the JavaScript and the jQuery versions (copied and pasted, then changed the names of the images), both did nothing to change the way the page loaded. The banner still appears line-by-line instead of instantly.

Tell you what, here’s a link to my website so that you can see how the banner loads down the page instead of instantly (with an empty cache). By preloading the images I was hoping to avoid the way the banner appears down the page.

https://www.deezinehub.co.uk/

The reason I was reluctant to show you my website at first is because I am offering a web design service – and I’m far from an expert on the subject, but to hell with it, you’re in on my secret now! 😀

Simon.