CODEWITHSUNDEEP
jqueryasp.net
IT_info
IT_info

Reputation: 727

dynamic jquery header

I would like to do a header in my homepage having different images and that they will continuously change dynamically between the various images using jquery.

Any suggestions?

Upvotes: 1

Views: 380

Answers (4)

Pankaj
Pankaj

Reputation: 10105

You need a Carousel

Here is an example Demo

ASPX Code

<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
    abc();
    var index = 0;
    var images = [
                        'Chrysanthemum.jpg',
                        'Jellyfish.jpg',
                        'Penguins.jpg',
                        'Lighthouse.jpg'
                    ];
    function abc() {

        images = [
                        'Chrysanthemum.jpg',
                        'Jellyfish.jpg',
                        'Penguins.jpg',
                        'Lighthouse.jpg'
                    ];
        $('img').attr('src', images[0]);
        setInterval(change_image, 2000);

    }
    function change_image() {
        if (index >= images.length) index = 0;

        $('img').attr('src', images[index]);
        index++;
    }

</script>

Upvotes: 1

trapper
trapper

Reputation: 12003

There many ways, but something like this will get you started.

var index = 0;
var images = [
    'image-0.jpg',
    'image-1.jpg',
    'image-2.jpg',
    'image-3.jpg'
];

$('img#image').attr('src', '/path/' + images[0]);

setInterval(change_image, 5000);

function change_image() {
    index++;
    if (index >= images.length) index = 0;

    $('img#image').attr('src', '/path/' + images[index]);
}

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

So if you have fixed number of images you can get them with jQuery and just loop through them: var bannerNum = 0;

$.ajax({
   url: '/GetImagesList.aspx',
   type: 'GET',
   success: function(d) {
       var intNum = setInterval(5000, function(d){
          if(bannerNum > d.Images.length)
             bannerNum = 0;
          $('#your_image_id').attr('src', d.Images[bannerNum].Src);
          $('#your_image_id').parent().attr('href', d.Images[bannerNum].Href);
          bannerNum++;
       });
   }
});

What I have done, I have requested list of banners from server, then I have created timeout which will be executed every 5 seconds and it will change attribute src of image and href of link.

Next, in C# load list of banners and put them in list then convert that list into JSON using JavaScript serializer and write it to response.

e.g.

public class VOBanner {
    public string Src { get; set; } 
    public string Href {get; set; }
}

Logic

//Load data from db
List<VOBanner> banners = new List<VOBanner>();
foreach(DataRow rw in datatable.Rows)
{
   banners.Add(new VOBanner { Src = rw["Src"].ToString(), Href = rw["Href"].ToString() });
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
Response.Clear();
Response.Write(serializer.serialize(new { Images = banners } );
Response.End();

And that would be basic logic.

I hope this helps...

Upvotes: 0

eouw0o83hf
eouw0o83hf

Reputation: 9598

There are tons of jQuery image sliders/rotators - do a quick Google search or use one of these?

http://www.tripwiremagazine.com/2012/01/jquery-image-slider.html

Upvotes: 0

Related Questions