Looking for a simple and easy image show with fade transition

[Winchester]

Greetings all and happy new year!

I hope someone can help me. I'm looking for a simple and easy image show script to display 10 images on my home page. I have already looked at WOW slider and Pikachoose because they got high ratings in an online blog I read, but it seems they are a bit beyond me (my skill and my needs). They are too packed with features that I will never use. I would like a simple fade transition only, an easy install and a small code base. I'm hoping that "small" means easier to understand because although I have used existing/inserted HTML and CSS a lot in Dreamweaver and Serif WebPlus, I have very little experience of straight scripting. I hate to sound lazy but a copy and paste script with easy-going tutorial is what I'm after. A gentle hand to lead the way would also be appreciated.

Can the good folks here come to my rescue? Suggestions welcome.

Thanks in advance.

[mlegg]

Wow Slider is fairly straightforward. You add the images that you want to use and then in the options set your choices. Once you hit publish it gives you all the code that you need to put on a website.

I like this one too http://unslider.com/ (it's free)

[Winchester]

Thanks but they are too complex (read "large") for my needs. Why do they need such a large code base?

[Winchester]

Additional: That is one of the reasons why I dismissed WOW and Pikachoose already and now unslider.

Sorry for the add. How can I edit my post?

[Beverleyh]

Thanks but they are too complex (read "large") for my needs. Why do they need such a large code base?
jQuery is a helper library that is meant to standardise behaviour across different browsers, adding extra functionality to older ones that do t have it. The resulting code written by the developer who uses the library the much smaller and leaner, but you're right, the need of the large code base in order to do that sometimes negates the object.

Can I ask, do you need to support older browsers? You could go very light with the code if you can use CSS3 for your transition effects, but only modern browsers supports it.

[Beverleyh]

Additional: That is one of the reasons why I dismissed WOW and Pikachoose already and now unslider.

Sorry for the add. How can I edit my post?
There should be an "Edit" button under your post (for a short time after you post). Click that, make your changes and hit "save".

[Winchester]

There should be an "Edit" button under your post (for a short time after you post). Click that, make your changes and hit "save".
I got it. The save button isn't saving for me however. Maybe it has something to do with my browser settings. Let me reset.

[Winchester]

jQuery is a helper library that is meant to standardise behaviour across different browsers, adding extra functionality to older ones that do t have it. The resulting code written by the developer who uses the library the much smaller and leaner, but you're right, the need of the large code base in order to do that sometimes negates the object.

Can I ask, do you need to support older browsers? You could go very light with the code if you can use CSS3 for your transition effects, but only modern browsers supports it.
Thanks for clearing up what jQuery is for and thanks for replying and I feel honored to have a moderator help me :)

I'm not sure if I need to support older browsers. What is considered old by today's standards? And how would I find out if I need to keep supporting?

[Beverleyh]

xaavo123,

It is unfair to hijack somebody elses (unrelated) thread for your own problem. Please start your own thread and refer back to this one if you need to.

[Beverleyh]

I'm not sure if I need to support older browsers. What is considered old by today's standards? And how would I find out if I need to keep supporting?
Today, "old" usually refers to Internet Explorer 7/8 because it cannot be updated beyond version 8 on Windows XP computers. The other major browsers (Chrome, Firefox, and later versions of Internet Explorer) tend to auto-update to the latest version, and therefore adopt the latest browser features behind-the-scenes. Newer Windows operating systems (Windows 7,8) come with or support later versions of Internet Explorer and so will automatically upgrade (unless deactivated by the user) to IE10+. Windows 10 comes with Edge as the default MS browser. IE10/11 and Edge browser can make use of modern CSS3 animations/transitions just like Chrome, Firefox, Opera, Safari, etc.

If you have a web stats software installed, such as Google Analytics or even something provided in your web host's control panel, you should be able to assess how many of your users are still using IE7/8. Then its your call - if you only have a handful of IE7/8 (even IE9) users, it probably isn't worth the extra scripts or development time to continue support, unless the content is critical? Is your slideshow critical or just an extra flourish? A static image fall-back might suffice as a gap-filler for the very few users who still use IE7/8.

[Winchester]

That's brilliant. Indeed there is a webalyzer tools in my control panel so I took a look and am pleased to report less than 1% of visitors using old Internet Explorers.

The slideshow I would like is not critical so I think I will be safe to use a normal image for those people.

Thanks for your help so far :)

[Beverleyh]

OK, I think I have something right up your alley. Take a look at this blog post http://www.dynamicdrive.com/forums/entry.php?315-RWD-Cross-Fade-Slideshow-with-Retina-Images

The fading slideshow works fully in IE10+ and other modern browsers. In IE9 the images will just change. The demo is setup so that IE8 only shows a static fall-back images but you can make it behave just like IE9 with a bit of extra CSS. Read the comment at the bottom for details on how to do that (I didn't include it in the demo)

Hope that helps

[Winchester]

It certainly does :D

I haven't had chance to review in great detail but can you answer me a very quick question before I get too far along? Cut to the chase... Is it responsive? My site isn't responsive YET but I'm working on it so I'd like to cut out any future disappointment before I invest lots more time.

[Beverleyh]

Yes, fully responsive. And only a few lines of script so its very lightweight :)

[Winchester]

Great! Future mobile users will be pleased. I'm thrilled that your blog post explains how to keep page size small for mobile with the use of that retina images method. That's exactly the type of thing I was aiming for by avoiding jQuery.

I am however failing somewhere in my implementation because my images refuse to load online. I can see the slideshow working brilliantly on my computer though. What might the problem be?

[Beverleyh]

Could be a few things so, to be sure, a live link would be most helpful when troubleshooting.

In the meantime there are a few things you could check;

- check that images are uploaded, and to the correct location (relative paths can be confusing so sometimes it helps to use absolute paths while troubleshooting, such as http://mywebsite.com/path/to/images/pic1.jpg)

- check that file extensions in the markup match the file extensions actually used by the images (jpg and jpeg are not the same file)

- check that the letter-case used in your markup matches the letter-case of the actual file names (Windows isn't case sensitive whereas UNIX is, so its very easy to have a page that stops working once you upload to your web host simply because the web host environment is now sensitive to upper and lower-case letters)

- like above, but check the letter-case of file extensions too (jpg isn't the same as JPG)

[Beverleyh]

Actually Beverleyh I was thinking . This post is related slider, reason behind this i posted it in this thread. I you are thinking I'm hijacking this thread. Then I have to post new one.

ThanksYou are hijacking another user's thread for the purpose of starting your own topic. Please be respectful of other users and start your own thread where people will attempt to help you with your problems away from this thread.

[Winchester]

Thank you so very much. Checking letter case did the trick! Everything is up and running perfectly.

Is there any official way I can drop a token of thanks because you've helped me so much? A small donation perhaps?

[Beverleyh]

You already been clicking those "thumbs-up" Thanks buttons like a trooper, and that's a great way to express thanks here. But if you really would like to wing a little something my way, you could make a small donation to my Fast Edit development fund?: http://fast-edit.co.uk/ that would be wonderful - not necessary though so please don't feel like you have to :)

[Winchester]

Wow! You're just full of surprises! Your Fast Edit software is something that I MUST look into some more. It would be great for my colleagues to make edits without me doing to it for them all the time. LOL

A small donation should have landed now. Let me know that it came in safely.

And thank you very much once more. It's been a pleasure and I know where to come should I required further help along the way :D

[Beverleyh]

Got it! And thank you - that's very generous :)

It's been my pleasure to help.