I've been struggling with my problem for a week now and can't seem to figure it out. I'm looking to create a webpage that will scroll through 5 or 6 images by clicking a next or prev button in Visual Studio Web Developer. Can someone guide me on how to achieve this from scratch?
I have a blank website created with a master page in Visual Studio, and I want to add this gallery function to the auto-generated Default.aspx file.
The image names are pic001.jpg; pic002.jpg; pic003.jpg and so on.
All I need is a previous button on the left to go back to the previous image, a next button on the right to show the next picture, and the changing image displayed in the middle.
Please assist me with this issue as I've attempted and failed miserably at it. Thank you to anyone who can help!
Here is some of the code from my attempts:
Default.aspx file
<%@ Page Title="Default" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" >
<script src="myJava.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >
<table>
<tr><td> GALLERY </td></tr> <!--Header-->
<tr>
<td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClientClick="getPrevImage()"/> </td>
<td> <img ID="pic" alt="" src="" runat="server" width="400" height="400" /> </td>
<td> <asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="getNextImage()"/> </td>
</tr>
</table>
</asp:Content>
Default.aspx.cs file
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string script = string.Empty;
script += "<script language='javascript'>";
script += "init()";
script += "</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "Error", script);
}
}
}
myJava.js file
var imagePath = new Array();
var imageIndex = 0;
function init(){
addPath("pic001.jpg");
addPath("pic002.jpg");
addPath("pic003.jpg");
addPath("pic004.jpg");
addPath("pic005.jpg");
getImagePath(0);
}
function addPath(path){
var index = imagePath.length;
imagePath[index++] = path;
}
function getImagePath(index){
var length = imagePath.length;
if(index <= length){
if(index >= 0){
document.getElementById("MainContent_pic").src = imagePath[index];
document.getElementById("MainContent_pic").alt = imagePath[index];
imageIndex = index;
}
} else {
document.getElementById("MainContent_pic").src = "DOES NOT EXIST";
document.getElementById("MainContent_pic").alt = "DOES NOT EXIST";
}
}
function getNextImage(){
var length = imagePath.length;
var index = imageIndex;
if(index++ < length--){
if(imagePath[index] != null){
imageIndex = index;
document.getElementById("MainContent_pic").src = imagePath[index];
document.getElementById("MainContent_pic").alt = imagePath[index];
}
}
}
function getPrevImage(){
var index = imageIndex;
if(index-- >= 0){
if(imagePath[index] != null){
imageIndex = index;
document.getElementById("MainContent_pic").src = imagePath[index];
document.getElementById("MainContent_pic").alt = imagePath[index];
}
}
}