Search jQuery

jQuery Forum

Rotate images with ASP .Net/Jquery

in Getting Started • 10 years ago

Im a little stuck with this task which i thought was simple. I have an ASP .Net form with some JQuery to change the image. At first i thought it was the array of images not being found in my project but now im not so sure what the issue could be. Here is my code:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="TempCollection.Site" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
            $(document).ready(function () {
                // Handler for .ready() called. 
                var imgs = ['http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png',
                'http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/test.jpg'];
                var cnt = imgs.length;
                setInterval(Slider, 3000);
 
                function Slider() {
                    $('img[id*=imageSlide]').fadeOut("slow", function () {
                        $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
                    });
                }
            });
        </script>
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
    Test
        <img id="imageSlide" alt="" src="" />
    </div>
    <asp:ContentPlaceHolder ID="cph" runat="server">
 
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

Im using an internet image but that doesnt even display. Can anyone shed any light on how this should be done?

Thanks

Replies(2)

Godsbest

Re: Rotate images with ASP .Net/Jquery

10 years ago

If you use developer tools: Firebug (FIREFOX) or Web Inspector (CHROME) you might see an error regarding 'Slider'. Here is how to define the function so that you can use it the way you are using it:

var Slider = function() {

                    $('img[id*=imageSlide]').fadeOut("slow", function () {
                        $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
                    });
                };

Or if you choose to leave the current definition of the function intact the change your setTimeout function to:

setInterval(function() { Slider(); }, 3000);

Im using an internet image but that doesnt even display.

Now about, about the location of the images: you may want to load the images from your own server. You cannot rely on microsoft always providing those images. I am surprised they have not blacklisted your server from loading them.

And just to be sure we have not missed anything, please give us the generated HTML of your page since this is likely a javascript issue as opposed to ASP.NET.

jamiemlaw

Re: Rotate images with ASP .Net/Jquery

10 years ago

When using jQuery, or any external library, you have to load it in its own script tag, close that script tag, open a new script tag, and then start writing your code, i.e.

Don't do this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
// your code
</script>

Do this instead:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// your code
</script>

John Resig, who created jQuery, speculated a way that you could write code like the top example, and for it to work, but it's a hack.

You'll also notice that I omitted the 'type="text/javascript"' from the tags. It's become more popular to do that.

Top Reply

Response title

Attachments

jQuery Forum

Rotate images with ASP .Net/Jquery

Replies(2)

Re: Rotate images with ASP .Net/Jquery

Re: Rotate images with ASP .Net/Jquery

Statistics

Tags

Actions