Incrementis
diff --git a/‎Heart.png‎
4.34 KB b/‎Heart.png‎
4.34 KB
diff --git a/‎Junk.png‎
7.91 KB b/‎Junk.png‎
7.91 KB
diff --git a/‎Star.png‎
4.2 KB b/‎Star.png‎
4.2 KB
diff --git a/‎arguments.js‎
Lines changed: 98 additions & 0 deletions b/‎arguments.js‎
Lines changed: 98 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 97 additions & 0 deletions b/‎index.html‎
Lines changed: 97 additions & 0 deletions
diff --git a/‎wiki_images/Figure1.gif‎
201 KB b/‎wiki_images/Figure1.gif‎
201 KB
@@ -0,0 +1,98 @@
+//Purpose: Defines all the functionality that the Gallery needs
+function imageGallery()
+{
+	var current = 0;
+	var overall = arguments.length - 1;
+	var images = arguments;
+	
+	var Gallery =
+	{
+		
+		Next: function()
+		{
+			current++
+			
+			//Checking if it is the last image
+			if( this.showsLastImage() )
+			{
+				return images[overall];
+			}
+			
+			return images[current];
+			
+		},
+		Previous: function()
+		{
+			current--;
+			
+			//Checking if it is the first image
+			if( this.showsFirstImage() )
+			{
+				return images[0];
+			}
+			
+			
+			return images[current];
+			
+		},
+		showsFirstImage: function()
+		{
+			
+			if(current < 0)
+			{
+				alert("This is the first image. There are no previous images!");
+				
+				current = 0;
+				
+				return true;
+			}
+			
+		},
+		showsLastImage: function()
+		{
+			
+			if(current > overall)
+			{
+				alert("This is the last image. There are no next images!");
+				
+				current = overall;
+				
+				return true;
+			}
+			
+		}
+		
+	}
+	
+	return Gallery;
+	
+}
+
+
+
+//Initializing Gallery
+var initGallery = imageGallery( "Heart.png", "Junk.png", "Star.png" );
+
+
+//Purpose: Checks which button is pressed and changes the needed Picture if possible
+function buttonPressed(Button)
+{
+	var picture = document.getElementById('picture'); 
+	
+	if(Button === "Next")
+	{
+		
+		picture.src = initGallery.Next();
+		
+	}
+	else if(Button === "Previous")
+	{
+		
+		picture.src = initGallery.Previous();
+		
+	}
+	
+	
+}
+
+
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+
+<html>
+
+	<head>
+	
+		<title>"arguments" in variable</title>
+		<meta charset = "UTF-8">
+	
+	</head>
+	
+	
+	<!--
+		NOTE:
+		===============================================================================================
+		
+		Because of simplicity & demonstration purposes, the "style" attribute is used within html tags.
+		Nevertheless it is recommended to use CSS for styling.
+		
+		===============================================================================================
+	-->	
+	
+	<!--The "style" attribute in "body" centers the whole content-->
+	<body style="text-align: center; margin-left: auto; margin-right: auto;">
+	
+		<h2>Image Gallery</h2>
+	
+		<!--Also centering and defining a fixed width size-->
+		<section style="width: 596px; 
+						margin-left: auto; 
+						margin-right: auto;">
+	
+	
+			<!--Without "position:absolute;" resizing will not work here-->
+			<div style="position:absolute;">
+			
+			
+				<!--width consumes 10%-->
+				<button style=" height: 375px;
+								width: 10%;
+								background-color: lightgrey;
+								border: none;
+								opacity: 0.5;
+								float: left;"
+						onclick="buttonPressed('Previous');">
+								
+								<<
+				</button>
+				
+				
+				<!--width consumes 80%-->				
+				<img id="picture" src="Heart.png" style="height:375px; width:80%;">
+				
+				
+				<!--width consumes 10% and adding all percentages results in 100% of the "div" container-->				
+				<button style=" height: 375px;
+								width: 10%;
+								background-color: lightgrey;
+								border: none;
+								opacity: 0.5;
+								float: right;"
+						onclick="buttonPressed('Next');">
+								
+								>>
+				</button>
+				
+				
+			</div>
+			
+		
+		</section>
+	
+	
+		<!--An artifical gap to make the following html content beneath visible -->
+		<div style="padding-top: 400px;"></div>
+	
+
+		<section>
+		
+		
+			<hr style="width:50%;">
+			
+			For more explanation please visit - 
+			<a href = "https://github.com/Incrementis/Javascript-save-arguments-into-a-variable-/wiki"> 
+			Save arguments to a variable Wiki</a>
+			
+			
+		</section>
+		
+
+		
+	</body>
+
+	
+	<script language="javascript" type="text/javascript" src="arguments.js"></script> 
+
+</html>