ASP.net get images to fade into each other

Hi

I am using the following VB.net code on my ASP.net web page to do a slide show of images.
Instead of the picture suddenly changing, is there a way to get each image to fade out and have the next image fade in

 
  Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        Call Display_Next_Image()
    End Sub

    Sub Display_Next_Image()
        Try
            Dim intLast As Integer = CInt(Me.lblImageNumber.Text)
            Dim oNextNumber As String

            If intLast = 10 Then
                Me.Image1.ImageUrl = "~/Images_Slide2/1.jpg"
                Me.lblImageNumber.Text = "1"
            Else
                oNextNumber = intLast + 1
                Me.Image1.ImageUrl = "~/Images_Slide2/" & oNextNumber.ToString & ".jpg"
                Me.lblImageNumber.Text = oNextNumber.ToString
            End If

        Catch ex As Exception
            Response.Write(ex.Message)
        End Try
    End Sub

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
You will need to do that client side i.e. using JavaScript. Does your page reload with each image?
0
Julian HansenCommented:
Do you have a link we can look at?
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

sybeCommented:
CSS transitions will do. Example: http://css3.bradshawenterprises.com/cfimg/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Ouch,

Looks like your doing this with an update panel server side ???

What you want to do is load all your images on the page at once and use Javascript (preferably JQuery) to cycle through them.

Take a look at libraries like JCycle which will handle the transitions for you.

The way you are doing it now - you won't be able to do the fading because you are effectively using a page refresh to change the images. The code must all be client side in order for it to work.
0
sybeCommented:
> preferably JQuery

Oh man. JQuery is such an overkill. Everything can be done easily without JQuery.
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much. Like to avoid J Query where possible
0
sybeCommented:
Sorry, i was not aware of a new policy. In this case it is a link with examples of css transitions. Those words ('example' and 'css transitions') happen to be in my comment. Is that not enough?
0
RobOwner (Aidellio)Commented:
Should be noted that this CSS3 will only work on the latest versions of the major browsers.
I would consider a JavaScript backup. Nothing wrong with using jQuery, it adds all of about 30kb to your site and makes it so easy for you to code the JavaScript seeing as it is just JavaScript wrapped up nicely for you :-)
0
RobOwner (Aidellio)Commented:
If you're a serious programmer you'd realise there's really no reason to program in pure JavaScript again unless you're forced to e.g. company policy approving its use, multiple frameworks etc
0
Julian HansenCommented:
Oh man. JQuery is such an overkill. Everything can be done easily without JQuery. 

Open in new window

Good point - lets rather try and teach raw javascript to people not acquainted with it.

Usually I just love typing out lines and lines of code instead of using one or two - this is howI  fill the endless hours of the day.

Seriously dude with that logic you should be still programming in assembler.
0
RobOwner (Aidellio)Commented:
Agree, and while the basics of javascript should be known, reinventing the wheel is, at the end of the day, a waste of someone's money :)
0
COBOLdinosaurCommented:
Why would you bloat the page and threaten SEO using jquery when the effects can be done natively with CSS transitions.  The native capability is there because developers working on browser code "typed out some lines of code" to "re-invent the wheel" and let the browser do it.  Perhaps we should not use any native capability and generate the whole page using jquery libraries, and then Google would not have to fill up the SERPS with all the content generated by jquery that the spiders cannot see or index.

Cd&
0
RobOwner (Aidellio)Commented:
I'm all for native capability, My point was that these css transitions are only supported in the latest versions of the browsers so there should be a fallback in JavaScript.
My point about jQuery is someone has gone to the trouble to make the code as efficient as possible while being cross browser compliant. It's also well supported so you're not relying on an individual to manage the code.
Trying to do this transition effectively, efficiently and cross browser supported in your script would be tedious and must likely bloat the page more than jQuery with all the whitespace you'd need to read and maintain it.
As for generating the page, I agree with using the markup structure defined for the browser rather than have JavaScript (jQuery) generate anything unnecessarily.
The tools are there to be used, sure, but using the right tool for the job is the key. In this case it is a combination to ensure your target market is reached.
0
COBOLdinosaurCommented:
We spend half our time in WebDev fixing pages that are broken because they are using jquery that uses an old version, or uses multiple jq libraries that are incompatible, or create conflicts; or are using junk jq libraries written by authors who are either idiots or scammers. Or worse you end up with a plugin that contains malicious code.

There is no valid recognized standard for jquery and no way to verify the validity. As for the excess white space; it takes a lot of white space to fill the 30-40k that a jquery library uses, and tedious is trying to dig through the DOM to figure out what jquery is doing to prevent a change that should 10 seconds, because the styles have been effectively disabled with inline code.

Jquery will not be stable until there is a recognized standard.

Cd&
0
COBOLdinosaurCommented:
BTW,

I am not saying don't use jquery.  I find it useful for things like ajax, but it should not be used based on the belief that it is the "cross-brower" way to do things and the way most plugins bind content and presentation that screws up SEO, it definitely not the way to go.

Cd&
0
RobOwner (Aidellio)Commented:
&Cd I think you've hit the nail on the head. It's about using the right tool for the right job. I can do a lot of things with a hammer but am I using it in the way it was intended? I won't really know if I'm using it properly unless I did an apprenticeship in building/carpentry etc.
I like you're comment about a standard but that's also a programmers experience and training more so than something you can put a standard around.  You'd be restricting JavaScript in  process so I'm not sure about that.
I think it comes down to education and the affects of using certain components (tools) of a framework, such as the SEO implications you've mentioned above.
0
RobOwner (Aidellio)Commented:
I also agree that JavaScript frameworks are overused and there is a lot of lazy coding out there, which happens across all languages, hence my point about how important proper education is. There are a lot out there that go right for jQuery with little or no web experience, let alone JavaScript out DOM knowledge.  it's people trying to cut corners that really can't be cut.
0
COBOLdinosaurCommented:
If you were setting up a 2-year Community college program for Web development Jguery would be part of the final semester.  By then the students would know enough that they could could use it to enhance, extend and do magic tricks.  The problem is all the novice developers who think the magic tricks are all there is and if they learn that nothing else is important.

I was playing with OO javascript 10 years ago and used prototype for a while; so I'm not anti-scripting.  I just don't like to see novice developers getting tied in knots trying to use things without understanding what it is they are abstracting.

Cd&
0
RobOwner (Aidellio)Commented:
Absolutely agree, we're on the same page. it's just lazy to not do the hard yards to learn the foundations.
0
Julian HansenCommented:
Anit-bloat - pro-CSS - anti non-compliant browsers.
Comment was about using JQuery in place of raw javascript when it is required - in response to the comment
Everything can be done easily without JQuery
Following on from what tagit says a tool is only as good as the craftsman that holds it which applies to javascript, css and jquery - sacrificing one for the other does not make one a better craftsman - but rather the better craftsman chooses the right one for the job.
0
COBOLdinosaurCommented:
Before I give someone a bulldozer, I prefer learn basic driving skills first.

Before I give them power tools I prefer they learn basic tools first.

Before I let them drive a formula one car I expect them to demonstrate that they actually know how to drive.

the better craftsman chooses the right one for the job.

I have no problem with that, but the majority of questions get asked by apprentices, novices, and casual developers that are not at the level where they understand what they are abstracting and how it works.  Without first learning the basic they have a very rough road to becoming a craftsman and we are not doing them any favors by sending them down a pothole filled back road shortcut filled with wrecks instead of directing them to paved highway.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.