ImageUI
Choose an Image
ImageUI is a mini-API that individually displays images.
It can be used to showcase art work, photography, or any interfaces while writing less code.
It's designed for people that are fairly new to frontend development and would prefer to have extra presentation on their website without doing much work.
It can also be used to put content into one page, navigating throughout it.
A basic understanding of HTMl is required. If you are unfamiliar with Javascript, that is okay.
The only keywords are "function" (used to operate a function) and "parameters" (names/numbers/etc. that the function utilizes)
1. source the API by adding this script in the bottom of the body tag.
<script src="http://jamcomm310.com/imageUI/imageUI.js"> </script>
It is required to add the CSS link in the head tag.
If you insist on customizing it, you can copy and paste the css in this link. Just make sure that '.crt' is always set to none.
<link rel="stylesheet" href="https://juicyjames111.neocities.org/imageUI/">
2. Add div with the id "s1" (this is the screen) and add a close button element with an id of "X" and a closePage() function.
<div id="s1">
<h3 id='x' onclick='closePage()'>X</h3>
</div>
3. Add a div with two classes, "p1" and "crt". p1 can be named differently;
it's purpose is to individually call the content in functions.
crt is short for curtain so that it doesn't display outside of the screen. You can then add whatever content you want in the div.
<div class="p1 crt"> <h1>I like cheese and there is nothing you can do about it<h1> </div>
4. Add an image tag that has a id, src, alt attribute, and an onclick function called imageSelector().
It should have two parameters, the first is the id of the image and the second is "p1" in quotations.
If you want to add a link to the image, add the number 1 as an extra parameter
<img id="imgId" onclick="imageSelector(imgId, 'p1', 1)" src="image.jpg" alt="image">
There you have it! An image interface for your website! Note that you can also have image displays for multiple images.
Just make sure that they are tagged properly in the function's parameters.
Here is the full code in the body tag incase you want to just copy and paste it.
<body>
<div id="s1">
<h3 id='x' onclick='closePage()'>X</h3>
</div>
<img id="imgId" onclick="imageSelector(imgId, 'p1', 1)" src="image.jpg" alt="image">
<div class="p1 crt"> <h1>I like cheese and there is nothing you can do about it<h1> </div>
<script src="http://jamcomm310.com/imageUI/imageUI.js"> </script>
</body>
If you are new to javascript debugging, you can simply hold the keys Ctrl + Alt + I.
A tab will open on the left side or bottom (depending on your browser.)
There should be a little tab called "sources" which should tell you what is wrong with your code.
It's saying that because there are missing tags or tags without their classes or id's.
Look through the documentation to see what is missing.
Also make sure that the script is at the bottom of your body tag, below all the other tags, else it's going to execute the code without recognizing all the other elements.
ID's are used to uniquely indentify tags. Because each one has to be unique, they all need to have different names.
So you can have a div tag with an id of "a1" but another div or tag would need to have a different name such as "a2", "b5", or "donkykong"
Classes are quite the opposite and identifies tags into groups or "classes".
Tags have the same classes or even multiple classes, so multiple tags can have a class named "p1" or have two classes "p1 crt"
Both classes and Id's are used in javascript to specifically grab and recognize tags so they can modify them.
If you have more questions and feedback for me, you can email me at jamesclark12345678@gmail.com and I will upload them to this page