JavaScript Image Gallery

 First off, what I will show is in an Image Gallery with a click event on each image to display the image in a popup.

Here is a live preview.

Here is a screenshot of the Gallery:

And when an image is clicked, the image is enlarged like so:

 

First we will start by creating out html page, which as you will see will have all CSS and JavaScript files attached, including the list of images which will be used. 

Before adding your images, insure that you have two sets of images, one set will be used as icons which are seen in the gallery, and another set to display the bigger view of the image.

I set the height of the images in the first set to 80px. Keep the proportions of the image, where the width should be set automatically.

For the second set, resize all images that the width and height is smaller that 500px, depending on what you want as an outcome.

As you can see above all images are added to an unordered list. Each images name and ID must have a number which continues in the sequence as seen above for this method to work. For the sorting of the images, the images are divided into different classes, but we'll get to that at a later stage. Next, I added the onClick events to each of the images, which will send that image through to the method 'showImage()'. I will come to what this method does at a later stage.

Also seen above, external files linked to my page is style.css (which has all my styles), jquery.min.js (allows for the use of jQuery methods) and script.js (contains all my script).

Now that we have our page, it's time to start withthe styling. Style your page as needed, just remember to add the following to create the gallery look:

If you want to add some space between your images, you can add th efollowing:

Now we want to create the method which is called when an image is clicked. As explained above, this method is showImage().

We will now be working in the script.js file. First creating the method 'showImage' with a parameter 'currentImage'.

What I want this method to do is to create a popup instead of just showing/hiding a previously created popup. Thus the code will be appended to the body like so:

The div with id - 'popupBackground' is as the name implies. It is the whitish background behind the popup. The style for this div is the following:

The inside this div, we have a div with id - 'popupwrapper', which is the window you will see, which contains the image and information. Styles are as follows:

and lastly you will see another div with an image inside it. This is the close button seen at the top-right corner on the popup.

The second line which reads as follows: $('#popupBackground').fadeIn('slow');, will slowly display the popup, which was just created. 

The next step is to display the image you clicked. This is where the numbering in the image names and ID's are importand. What we do is to get the id of the clicked image, and retrieve the imageName plus the expention from that element.I used this method, because my two different sets of images are in different locations, but the names of the identical images are the same.

Here is the code:

The variable loc as seen above is set to the source folder of the image.

The amount variable will be used at a later stage as this is used for the description of the images.

Next we get to the result variable. This is set to the name and extension of the clicked image to get the name of the image which should be displayed.

Next I added the image to the div with id - 'popupWrapper'. As seen above the source is coded as the following:

             src="assets/images/galleryLarge' + result + '"

What this does is to add for example: /car1.jpg to the url to create

             src="assets/images/galleryLarge/car1.jpg"

Next a div was also added to popupWrapper, which will have the information regarding the image.

Now if your image sizes are correct sizes, the following should work, but if you find that some popups do not display the correct size, you can increase the 100 value found at the end of the setTimeout method.

The setTimeout method is used because you need to get the size of the image after it has been loaded.

As seen above, I set currentImageHeight equal to the height of the image and currentImageWidth equal to the width of the image. This is done, because the image sizes vary. Next you set the size of the popupWrapper equal to thiese sizes.

Now the method mouseEvent is fired, which will be explained in the next part.

Now I created the boolean variable clicked, which checks whether the description view is open or not. As for the click method, animated the description div to open and close as it's clicked.

Now we get to the mouseEvent method.

 

These events are only used for the close button on the popup. Thats it for the popup.

Next Sorting the images into different categories using the buttons created in the html:

Now we need to add events to these buttons. There are various ways to do this as shown in this tutorial, but I will be adding them using the jQuery click method.

First I created a jQuery ready method to load the code as the page is done loading:

In this method I will create all the click methods for these buttons:

What the slideUp method does, it shrinks and moves the image until it can't be seen, where the slideDown method restores the image to its original state.

Lastly, styles need to be added to elements, which will not be shown in this example.

Javascript Custom Objects

Let's have a look at custom objects.

First off we'll start by creating our object function:

This is a basic layout of a custom object. When creating the function, keep in mind that all the parameters which you want to store data in should be specified in the parentheses (). In this case each person will have their own name and surname, which is sufficient for this tutorial.

Fot those thinking 'whats with this.name = name;'. It doesn't make sense. This isn't as complicated as it looks. 'this' means the current object and because we have this.name, we are specifying the name of the current object and setting it to the name argument, which is found in the parenthesis: function person ( name, surname ). The surname works the same way.

To show how above works, lets initiate this function with different values:

Now we have created three person objects, each with it's own values.

Let's start with variable personOne. Because you set it equal to the person function with the two parameters: 'John' and 'Doe', the method initiates with John as name and Doe as surname.
Now inside the object you say that this. name, which is variable personOne. Thus the name for personOne is John and the surname is Doe.

The second and third objects work in the same manner. The values are sent to the object function and stored in the variables. It doesn't matter how many objects you create, they will all have their own values.

Now to test whether the data has been stored, I will be using alert popups:

As seen above, to display the values in the first popup, I used personOne.name. This will return the name variable inside object personOne object. The output for the first popup looks like so:

Which is what we expect as we sent the values John and Doe to the object function.

Next to check the output for the second popup, which should be the surname 'Bowen':

Lastly we want to output the both name and surname from object personThree:

Now we have created three different custom objects.

If anything is still unclear or if there is something you really want to know, leave a comment.

Javascript Objects

What would you say an Object is? An object is as the name implies. It is something with certain specifications, for example if you take a person. You have a name, surname, age, weight, length and so on. All of these are concidered a person's properties.

Now that we have concidered person as an object, the next part is to created your object:

Now that we have our object, we can start setting values. But as you will now see, you only need to specify a property name, and a value. The property will be created in the object with little effort.

Take this for example:

You have to clerify which object you're using, which is person. Seeing that we want to set properties for this object, you have to add a ., meaning you will go inside the object. thus we have ( person. ). Because we want to set the property name of person to Phillip for example, you do this as shown above.

After all the properties has been set, will should have the following:

Now we have created our object and set the properties. Now what we want to do is to return the values which have been stored inside the object. This is the same method as storing data inside the object. Let's say we want the person's name.
We will use

to access the name field inside of person.

Now I will display the name and Surname of the person object using:

The ouput for this is:

Thus we are able to access the properties of the given object. These propertiy values can be stored in variables if necessary.

Next we will have a look at Custom Objects:

Javascript functions - Basics

Hi there

This blog will sum up various methods of using JavaScript functions.

Firstly, what is a function?
It is a piece of code that is called by name. When it is called, the coding inside it will run. The purpose of this is to be able to call one method several times, if needed, without having duplicates of the same coding.

Example:

Lest say you have two close buttons( cancel and close button in top right corner ) on a popup.
They will both close the popup, but with some other code that may differ.

Here are the buttons calling different functions:

The functions which are being called are closePopup and cancelPopup.
The function looks as follows:

As you can see there are similarities between the two functions which is that both have the following:

Instead of using one line multiple times, you can take that line and put it in a seperate function, although for one line of coding, it's not worth the trouble, but when you have more code that is similar, you can do this.

In above method, if you call the hidePopup function, only the element with id popup will display as hidden. If you want the current object to hide or to change the styles, you can do the following:

As seen above, all the methods has an argument. That is merely the id of your clicked button. An argument is a value that is added into the functions parentheses to be used for some calculations.

Lets say I have

var x = 1;

Now I want to use that value in my method to return another value. The method will be called like this (Keep in mind that the variable name is x):

myFunction(x);


This function can either return a value or perform some actions. In the previous example where I used closePopup, they merely perform an action. With a return function, you can set a variable equal to the function like so:

As seen above, newVlaue is being set to function calculate. While you set this, the value x is sent to the function and is used inside the function as numberValue. In other words, when you're inside calculate, numberValue value is the same as the value of x. I have explained what the while loop does here.

Lastly we see the code return numberValue; What this does is it send back the final value, where it is then stored in newValue. Thus the line
var newValue = calculate(x);
can be read as
var newValue = 16;

For further questions or if you want a tutorial for something, leave a comment or send me an email.

Css, Javascript - Change styles on window resize

Hi there

In this blog I will show you how to optimize your css styles according to different browser sizes.

What I will be using is Javascript/jQuery and CSS to achieve above mentioned.

For the purpose of using jQuery, you need to add the following in your head tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

or you could get download the jQuery libraries and link them like so:

<script src='assets/js/jquery.min.js'></script>, which is the way I am doing it.

This can be found on https://developers.google.com/speed/libraries/devguide with along with other JavaScript libraries.

I have created all files needed, which are: index.html, script.js and class.css.

Now I will apply some styles to the divs, wrapper, header, content and footer.

Below is the html page which was opened in a browser.

To start off, what I have done is to give the wrapper a width and set margin-left and margin-right to auto, which centers the div. But remember, to achieve the centering using this method, you have to remember to give the div a width.

Next I added a width of 100% to class 'bodypart', which the three divs, header, content and footer, all have. Because these divs are inside the wrapper div, the 100% will be the width of the parent div, which is the wrapper div, which in this case in 900px;

Next I set background colors for each of the divs seperately. For those who do not know, using background: rgba allows you to change the background color while adding opacity to the background only. The opacity is not applied to the content of that element.

Next I will be changing the heights of these divs, just to get the basic layout of a webpage and as you can see below, there is a small white space above the wrapper div:

This space is actually the default margin that is placed on the body, thus to remove this, this is all that's needed and I will also set a background image to the background:

Now to set the Heights and color of the text of the different body divs:

After these changes have been made, the page looks like so:

I just resized everything to show as an example, but keep your sizes the same.

Now it's time to implement some JavaScript/jQuery to check the browser size and change classes accordingly.

Let's start with adding the jQuery . ready method to our .js files:

This event will only fire once all elements have been loaded on your document. 

Now we can create some methods inside the above method. The first method is the resize method to check whether your browser size changes.

Now inside this method, we will be using an if statement, to compare the browser width to change styles according to the width.

If you look at above image, the  $(window).width() returns the width of the browser as you resize it and checks whether that values is smaller than 600. If it is, I set the wrapper width to 100%, thus the child divs' width will also be 400px, as their width is set to 100% of their parents' width which is 400px. 

If the width is bigger, it will revert to the original size. 

Instead of just changing one property, you can also change classes inside the if statement. They can change the size, background, or even add elements or rearrange elements if need be.

Let's say I created a class oldMobile:

Here I make slight changes, but for this tutorial this should be sufficient. Now to apply the class to the divs on resize:

This have been tested in all browsers and it works. 

For any questions or if there is something you want to be able to do, feel free to leave a comment.

JavaScript Basics

Hello everyone, this blog will contain some of the basics of using Javascript.

To start off, JavaScript is an interpretive programming language, which can interact with html code, enabling dynamic content on sites.

There are various ways Javascript coding can be linked with a webpage. The two main methods are using internal and external Javascript.

When you want to use internal JavaScript, special tags are needed to interpret the code as JavaScript.
See below:

Whereas when using external Javascript files, it can be linked by placing like so:

The above method is usually placed inside of the <head></head> tags like so:

Then there are ways to use Javascript inline as well. When for example using the html onclick mehtod:

Let's start using Javascript.

To start off, let's say we want to create variables with Javascript. 
This can easily achieved. The question you want to ask yourself is 'What do I want to save in the variable?' or even 'What is a variable?'.

Lets start with what is a variable is:
A variable is merely a container for data.
There are various types of variables. These are called Data Types. Here is the list with examples of each in brackets: String ( "Hello World" ), number ( 343 ) , boolean(which is either 0[true] or 1[false]), Arrays (This consists of a group of values like so [ 2,3,4,5,6 ]. This array example consists of 5 values) and lastly objects ( var person = { name : "Phillip", surname: "van der Berg", age: 23 }; ), but I will go into more depth on a later stage.

Lets say you have a textbox and want to save the user's input in a variable. Following is an example of each Data Type:

As seen above, the 'var' is merely how you declare a variable. Whatever comes after the equals sign (=) is what decides what type of variable it will be.

Now we move on to using for, while and do while loops.
1. A for loop can be used when you want to run certain code for a specific number of times of when you want to read date stored in Arrays or Objects.
Below is the basic structure of a for loop:

Now what does this mean?
First of all, the 'for' initializes the for loop with the perameters inside the parentheses. The 'var' merely declares the number variable 'x'. Then we look at x = 0; What this means is that we will start counting from 0, and x < 10 means that we don't want the value to become more than 10. Lastly, the x++ means the variable x will be incremented by 1. It can also be written as x = x + 1.  If the value of x was to be printed out in the for loop, you will have the output of 0 1 2 3 4 5 6 7 8 9. Although it only goes up to 9, there are 10 values as it starts at 0.

Next there is a While loop. What this does, it runs the code in the body until the condition is met, for example:

As seen above, the variable x is declared, and in the while loop, it checks if x is equal to 2.
Fisrtly x is equal to 0, thus is not equal to 2, so the code inside will run. You will get the popup alert, after which x will increment by 1. Now it goes through the loop another time, with x = 1. Again the popup alert shows, because x is not equal to 2 and is yet again incremented. Now x is equal to 2, thus the condition is met, so this ends the while loop. Now the second alert will run.

Lastly we have a do while loop which looks like so:

 








 
The only difference between this and the while loop is that with a do while loop, the code is run before it checks whether x is equal to 2. What I have done is to change the x value to 3 and the while condition to check whether x is smaller than 2. Seeing that 3 is not smaller than 2, the while loop won't execute, but with the do while, because the condition isn't checked yet, the alert will execute and x will be incremented, then the condition will see that x is not smaller than 2, thus exiting the do while loop.

The last thing regarding the basics is if and else if statements.

Lets start with an if statement:

It is similar to a while loop only that it checks if a condition is met. In this case if the condition is met, the code inside will run, unlike the while loop. 
First I set the variable x equal to 3. Now the if statement checks whether x is equal to 3 which is true in this case. Thus the code will run.

Next we have  the if else statement. This is the same as the if statement, but uses an else with it:
  

As you can see, it checks whether the condition is met in the if statement, if it's not it goes to the else if statement to check whether that condition is met, and because it is, it will skip the last else statement. 

How this works is it checks if condition is met, otherwise, it goes to the else if and if it is met, the coding inside that statement is run, otherwise it will go to the lase else statement, after which the code will run, if none of the conditions were met.




As seen above we say x = 3; This is how we set a variable to a given value. And if we look at the if statement's condition, we see x == 3. This checks whether the value of x is equal to 3. If you accidentally use only one '=' in the if statement, x will be set to 3 in this case, and the code will run, which you don't want. 

Other than ==, you can use >, <, !=, <=, >=, ===, !==.

These are called Comparisson Operators. One reason they are used is to compare values of variables. 

Next we have Conditional operators, which can also be used with an if statement.
These are &&, || and !

&& / and can be used to check multiple conditions at the same time, but when && is used, all conditions must meet. For example:

As seen on the left, we have 2 if statements. In the first on it checks whether x is smaller than 10 and whether girls is bigger than 10. Seeing that 10 (boys) is not smaller than 10, the condition is not met, as they both have to be correct.

In the second if statement, it checks if boys is smaller than 20, which is correct, and if girls if bigger than 10, which is also correct. Now the code will run.




|| / or works similar to the &&, except that with or, either of the conditions can be met for the code to run. Only one condition has to be met.

Lastly !/not.
I mostly use this for boolean variables, but can be used with other variables. Here is an example of both

For the first one, !x will return true  because x = false. It will return the opposite of the x value.

In the second if statement, I created 2 conditions to show the difference, which are basically the same. They both check if x is not equal to 10. Just the different ways it can be used.





If anything is unclear, don't hesitate to ask. I will be adding more advanced tuotials during the new few weeks, so don't be scarse.