Image Gallery – Click Button to Show Image

@Cody_DacoderJun 21.2021

I’m working on an Image Gallery with buttons to show images with an [X] in the upper right corner to close the image. While the image is displayed the screen will not be darkened, but will be frozen from clicking anything except for the [X] to close the image. In the attached code there’s a call to a CustomFunction, which is where I really need help. All of the images will be smaller that 500 x 500 pixels and will be displayed in the center of the screen. I’m hoping there’s a way to use Width and Height variables within the CustomFunction, so there’s only one function needed.
I appreciate help with this Image Gallery, and I hope the finished code will benefit others as well. Thanks!
`<html>
<head>
<title>Image Gallery</title>
</head>
<body topmargin=”0″ leftmargin=”0″ background=”Background-Image.jpg” bgcolor=”#FFFFFF”>
<div align=”center”>
<center>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”border-collapse: collapse” bordercolor=”#FFFFFF” width=”1000″>
<tr><td width=”1000″ height=”60″ align=”center” colspan=”2″> </td></tr>
<tr>
<td width=”1000″ align=”center” colspan=”3″>
<font face=”Arial” color=”#000000″ size=”7″>Image Gallery</font>
</td>
</tr>
<tr><td width=”1000″ height=”60″ align=”center” colspan=”3″> </td></tr>
<tr><!– Image 1 –>
<td width=100 height=50 align=”center”> 
<button onclick=”CustomFunction()”>Image 1</button>
</td>
<td width=900 height=50 align=”left”>
<font face=”Arial” color=”#000000″ style=”font-size: 14pt”>
Image1_450Wx305H.jpg size in pixels is 450 Width x 305 Height.
Click button to show image centered on the screen, then click X on image to close.
</font>
</td>
</tr>
<!– Area to show information about Image 1 –>
<tr><td width=”1000″ height=”330″ align=”center” colspan=”3″> </td></tr>
<tr><!– Image 2 –>
<td width=100 height=50 align=”center”> 
<button onclick=”CustomFunction()”>Image 2</button>
</td>
<td width=900 height=50 align=”left”>
<font face=”Arial” color=”#000000″ style=”font-size: 14pt”>
Image2_295Wx400H.png size in pixels is 295 Width x 400 Height.
Click button to show image centered on the screen, then click X on image to close.
</font>
</td>
</tr>
<!– Area to show information about Image 2 –>
<tr><td width=”1000″ height=”330″ align=”center” colspan=”3″> </td></tr>
<tr><!– Image 3 –>
<td width=100 height=50 align=”center”> 
<button onclick=”CustomFunction()”>Image 3</button>
</td>
<td width=900 height=50 align=”left”>
<font face=”Arial” color=”#000000″ style=”font-size: 14pt”>
Image3_355Wx350H.gif size in pixels is 355 Width x 350 Height.
Click button to show image centered on the screen, then click X on image to close.
</font>
</td>
</tr>
<!– Area to show information about Image 3 –>
<tr><td width=”1000″ height=”330″ align=”center” colspan=”3″> </td></tr>
</table>
</center>
</div>
</body>
</html>
<!– Please note that spaces here are for visual only and are not the real code –>
`

to post a comment

CSS HTML JavaScript

11 Comments(s) _↴

@ZorgJun 22.2021 — #Is this what you mean?

<i>
 </i>// button with hardcoded params, strings wrapped in single quotes
 &lt;button onclick="checkThisOut('something-img.jpg', 500, 500)"&gt;
 Click Me
 &lt;/button&gt;
 // example using PHP vars
 &lt;?PHP
 $file = '/path/to/some-img.jpg';
 $filename = basename($file);
 list($width, $height) = getimagesize($file);
 
 // note the single quotes around $filename
 ?&gt;
 &lt;button onclick="checkThisOut('&lt;?= $filename ; ?&gt;', &lt;?= $height; ?&gt;, &lt;?= $width; ?&gt;)"&gt;
 Click Me
 &lt;/button&gt;
 
 // results
 &lt;div id="results"&gt;
 File : &lt;span id="file"&gt;--&lt;/span&gt;&lt;br/&gt;
 Height: &lt;span id="height"&gt;0&lt;/span&gt;&lt;br/&gt;
 Width: &lt;span id="width"&gt;0&lt;/span&gt;&lt;br/&gt;
 &lt;/div&gt;
 
 // js
 function checkThisOut(file, height, width){
 document.getElementById('width').innerText = width
 document.getElementById('height').innerText = height
 console.log(<span><code>${file} is Height: ${height} x Width: ${width}</code></span>)
 }

More:

[function.getimagesize](https://www.php.net/manual/en/function.getimagesize.php)

[Passing params onclick](https://www.w3schools.com/js/tryit.asp?filename=tryjs_function2)

@Cody_DacoderauthorJun 22.2021 — #Thank you Zorg. I'll try out your code when I get home tonight. I appreciate it.

@Cody_DacoderauthorJun 22.2021 — #I tried a few things to see if I could get this working, but I am having some trouble figuring out exactly what is needed to include in the sample html file. Here is what I pasted into my html file just below the <title> section near the top.

&lt;title&gt;Image Gallery&lt;/title&gt;
 &lt;!-- ===================================================================== --&gt;
 &lt;!-- // button with hardcoded params, strings wrapped in single quotes --&gt;
 &lt;button onclick="checkThisOut('Image1_450Wx305H.jpg', 450, 305)"&gt;
 Click Me
 &lt;/button&gt;
 &lt;!-- // example using PHP vars --&gt;
 &lt;?PHP
 $file = 'Image1_450Wx305H.jpg';
 $filename = basename($file);
 list($width, $height) = getimagesize($file);
 ?&gt;
 &lt;!-- // note the single quotes around $filename
 &lt;button onclick="checkThisOut('&lt;?= $filename ; ?&gt;', &lt;?= $height; ?&gt;, &lt;?= $width; ?&gt;)"&gt;
 Click Me
 &lt;/button&gt;
 --&gt;
 &lt;div id="results"&gt;
 File : &lt;span id="file"&gt;--&lt;/span&gt;&lt;br/&gt;
 Height: &lt;span id="height"&gt;0&lt;/span&gt;&lt;br/&gt;
 Width: &lt;span id="width"&gt;0&lt;/span&gt;&lt;br/&gt;
 &lt;/div&gt;
 
 &lt;!-- // js --&gt;
 &lt;script language="JavaScript" type="text/javascript"&gt;
 function checkThisOut(file, height, width){
 document.getElementById('width').innerText = width
 document.getElementById('height').innerText = height
 console.log(<span><code>${file} is Height: ${height} x Width: ${width}</code></span>)
 }
 &lt;/script&gt;
 &lt;!-- ===================================================================== --&gt;

When I run it I see the Height and Width numbers change in the return section, but the image filename still shows "--". I'm not sure what I need to change in this to get it to work. Thanks.

@NogDogJun 22.2021 — #@Cody_Dacoder#1633249

Forum tip: for blocks of code, use this forum's ... tags, rather than using the edit window's </> button (which is really only suitable for in-line mono-spaced text).

@Cody_DacoderauthorJun 22.2021 — #Thanks for the cool tip about using the code tags. I wanted to edit my post, but there doesn't seem to be that option anymore. Newbie is learning some new stuff.

@NogDogJun 22.2021 — #> @Cody_Dacoder#1633251 I wanted to edit my post, but there doesn't seem to be that option

Fixed. ;)

@ZorgJun 23.2021 — #Looks like I forgot a step.

Take a look at how I'm setting the height and width within the function.

Grab the span element by the id and set its inner text within the function.

document.getElementById('file') is this element: <span id="file"></span>

Add the following to checkThisOut()

<i>
 </i>document.getElementById('file').innerText = file

_Quick tip on HTML page layouts:_

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HTML Layout&lt;/title&gt;
 &lt;style&gt;
 /* css styles in the &lt;head&gt;*/
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;!-- content, buttons, images, etc... within the body --&gt;
 &lt;/div&gt;
 &lt;!-- js scripts --&gt;
 &lt;script&gt;
 // js at the end, before the closing &lt;/body&gt;
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Cody_DacoderauthorJun 23.2021 — #I appreciate your HTML page layout information. I was working from a HTML layout that a friend helped me with a while back. I included the code you mentioned to add to the checkThisOut() section. I also moved the <button onclick section below the top <div area. Now I can see the results with the Image filename text clearly. Is the <?PHP section required here? Is there more code needed to show the image centered on the screen?

<i>
 </i>&lt;!-- // example using PHP vars --&gt;
 &lt;?PHP
 $file = 'Image1_450Wx305H.jpg';
 $filename = basename($file);
 list($width, $height) = getimagesize($file);
 ?&gt;

@ZorgJun 24.2021 — #No, you don't need the <?php tags.

Only if you want to assign the variables dynamically, for example using data from a database or your filesystem. The purpose being, you won't need to edit the files directly every time you want to change an image. Maybe something to look into in the future.

**You can remove this code block:**

<i>
 </i>&lt;!-- // example using PHP vars --&gt;
 &lt;?PHP
 $file = 'Image1_450Wx305H.jpg';
 $filename = basename($file);
 list($width, $height) = getimagesize($file);
 ?&gt;
 &lt;!-- // note the single quotes around $filename
 &lt;button onclick="checkThisOut('&lt;?= $filename ; ?&gt;', &lt;?= $height; ?&gt;, &lt;?= $width; ?&gt;)"&gt;
 Click Me
 &lt;/button&gt;
 --&gt;

**Centering elements**

This can be done with CSS. How you do it, depends on your page layout.

Take a look at these resources for a few examples:

[W3Schools: Basics on Aligning elements](https://www.w3schools.com/css/css_align.asp)

[Mozilla: Aligning items with Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)

@Cody_DacoderauthorJun 24.2021 — #Zorg, I really appreciate the reference links you have added to some of your posts.

That gives me other resources to learn from, and I will check them out.

Thanks.

@ZorgJun 26.2021 — #No problem. 👍️

Also in #JavaScript _↴

Help with AutoFill textbox Strange question, any answers?javascript in a style?

Success!

Help @Cody_Dacoder spread the word by sharing this article on Twitter...

Tweet This

Image Gallery – Click Button to Show Image

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image Gallery – Click Button to Show Image

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴