Category: HTML

19 Aug 2015 21:29

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	1

Example program for slideshow in html with asp.net

I want create a webpage for slideshow it contains 10 images those all change dynamically at runtime .how am done it Friends

#761689

19 Aug 2015 22:01

Joined:	12/02/2013
Level:	Gold
Points:	3098

Points:	4

Hi

Slide show of images can be done in many ways using Html, Javascrip. Css or asp.net ajax slide show.

Below article shows you how to make a slide show of images in asp.net

http://www.c-sharpcorner.com/uploadfile/anjudidi/making-an-image-slideshow-in-Asp-Net/

Using asp.net ajax refer below link

https://demos.devexpress.com/ASPxImageAndDataNavigationDemos/ImageSlider/SlideShow.aspx

Using Html and Javascrip refer below link

https://msdn.microsoft.com/en-us/library/hh920769(v=vs.85).aspx

Regards

Sridhar Thota.
If you learn't from defeat..
You haven't really lost..

Sridhar Thota.
Editor: DNS Forum.

#761704

20 Aug 2015 00:20

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

JavaScript or JQuery will help you to maintain slide show of images, with the help of 'setTimeout' method in javascript you can easily put slideShow
see below snippet


<script language="JavaScript">
var i = 0;
var path = new Array();
 
// LIST OF IMAGES
path[0] = "image_1.gif";
path[1] = "image_2.gif";
path[2] = "image_3.gif";

function swapImage()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",3000);
}
window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

#761706

20 Aug 2015 00:47

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	1

Superb, you r right.But when am click a particular button the only the start slide show.but i want to make slide show on pageload.

By Paul.S

#761710

20 Aug 2015 01:21

Joined:	05/06/2009
Level:	Gold
Points:	10245

Points:	2

You can call your function as follows. If you are using jQuery

$( document ).ready(function() {
// Call your function..
});

By Nathan
Direction is important than speed

#761716

20 Aug 2015 01:41

Joined:	06/04/2012
Level:	Gold
Points:	4230

Points:	4

Hello Paul,

Refer the below links for image slide show :

http://www.aspsnippets.com/Articles/ASPNet-AJAX-SlideShow-Extender-control-Tutorial-with-Example.aspx

http://code.runnable.com/UhnDqcDBgJNdAAAe/how-to-make-an-image-slider-in-asp-net

http://www.c-sharpcorner.com/uploadfile/anjudidi/making-an-image-slideshow-in-Asp-Net/

http://www.aspdotnet-suresh.com/2013/02/create-simple-jquery-image-slideshow.html

http://www.dotnetbull.com/2011/09/how-to-make-image-slide-show-from.html

Hope this will help you.

Regards,
Nirav Lalan
DNS Gold Member
"If you can dream it, you can do it."

#761727

20 Aug 2015 02:40

Joined:	29/05/2009
Level:	Gold
Points:	10380

Points:	1

hi
paul

Prasad post the code working when the page load means firing this code

Name : Dotnet Developer-2015
Email Id : kumaraspcode2009@gmail.com

'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

#761769

21 Aug 2015 01:06

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	1

#Dotnet Developer-2015, am tried to Prasad's posted query but i did not got exactly output. So could you please correct my query if i did make any mistakes,.
Below is my query.

<%@ Page Title="" Language="C#" MasterPageFile="~/User/MasterPageUser.master" AutoEventWireup="true" CodeFile="Reach Us.aspx.cs" Inherits="User_Reach_Us" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
function swap()
{
var i = 0;
var path = new Array();
//list of images
path[0] = "~/Admin/AdminImages/w5.jpg";
path[1] = "~/Admin/AdminImages/b1.png";
path[2] = "~/Admin/AdminImages/Admindown.jpg";
}
function swapImage() {
document.slide.src = path[i];
if (i < path.length - 1) i++; else i = 0;
setTimeout("swapImage()", 3000);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/w5.jpg" Height="200px" Width="400px" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/b1.png" Height="200px" Width="400px" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/Admindown.jpg" Height="200px" Width="400px" />

</div>
</asp:Content>
By,
Paul.S

#761772

21 Aug 2015 02:43

Joined:	29/05/2009
Level:	Gold
Points:	10380

Points:	4

Hi
Paul

You can follow this code working for me.

Master Page this


<form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>

        <asp:ContentPlaceHolder ID="head1" runat="server">
        
        </asp:ContentPlaceHolder>


        <asp:ContentPlaceHolder ID="body1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>

Content Page this


<asp:Content ID="Content1" ContentPlaceHolderID="body1" Runat="Server">
<script type="text/javascript">
         var i = 0;
    var path = new Array();

    // LIST OF IMAGES
    path[0] = "image_1.jpg";
    path[1] = "image_2.jpg";
    path[2] = "image_3.jpg";

    function swapImage() {
        document.slide.src = path[i];
        if (i < path.length - 1) i++; else i = 0;
        setTimeout("swapImage()", 3000);
    }
    window.onload = swapImage;
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
    <img height="200" name="slide" src="image_1.gif" width="400" />
<%--<asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/image_1.jpg" Height="200px" Width="400px" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/image_2.jpg" Height="200px" Width="400px" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/image_3.jpg" Height="200px" Width="400px" />--%>
</div>
</asp:Content>

I have attached Images below check them

Name : Dotnet Developer-2015
Email Id : kumaraspcode2009@gmail.com

'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

Delete Attachment

#761773

21 Aug 2015 02:46

Joined:	29/05/2009
Level:	Gold
Points:	10380

Points:	4

Hi
Paul

You can try this Below Code this also working


<script type="text/javascript">
         var i = 0;
    var path = new Array();

    // LIST OF IMAGES
    path[0] = "../Admin/AdminImages/image_1.jpg";
    path[1] = "../Admin/AdminImages/image_2.jpg";
    path[2] = "../Admin/AdminImages/image_3.jpg";

    function swapImage() {
        document.slide.src = path[i];
        if (i < path.length - 1) i++; else i = 0;
        setTimeout("swapImage()", 3000);
    }
    window.onload = swapImage;
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
    <img height="200" name="slide" src="../Admin/AdminImages/image_1.gif" width="400" />
<%--<asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/image_1.jpg" Height="200px" Width="400px" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/image_2.jpg" Height="200px" Width="400px" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/image_3.jpg" Height="200px" Width="400px" />--%>
</div>
</asp:Content>

Name : Dotnet Developer-2015
Email Id : kumaraspcode2009@gmail.com

'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

Example program for slideshow in html with asp.net

About dotnetspider.com

Quick Links

General

Services