How to create HTML Photo Gallery

Java




In this tutorial we will learn how to create a simple HTML Photo Gallery using CSS and Javascript.

First, we have to create the index.html file. To do this, open a text editor (Notepad, for example) and put the next code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>3Torials.com - How to create a valid HTML Photo Gallery for All Browsers</title>

    <link rel="stylesheet" type="text/css" href="style.css"/>

    <script type="text/javascript" src="script.js"></script>

</head>



<body>

<center><h1>3torials.com - Newest tutorials</h1></center>

<div id="gallery">

    <div id="thumbs">

        <a href="javascript: changeImage(1);"><img src="images/img1.jpg" alt="" /></a>

        <a href="javascript: changeImage(2);"><img src="images/img2.jpg" alt="" /></a>

        <a href="javascript: changeImage(3);"><img src="images/img3.jpg" alt="" /></a>

<a href="javascript: changeImage(4);"><img src="images/img4.jpg" alt="" /></a>

<a href="javascript: changeImage(5);"><img src="images/img5.jpg" alt="" /></a>

    </div>



    <div id="bigimages">

        <div id="normal1">

            <img src="images/img1.jpg" alt=""/>

        </div>



        <div id="normal2">

            <img src="images/img2.jpg" alt=""/>

        </div>



        <div id="normal3">

            <img src="images/img3.jpg" alt=""/>

        </div>



<div id="normal4">

            <img src="images/img4.jpg" alt=""/>

        </div>



<div id="normal5">

            <img src="images/img5.jpg" alt=""/>

        </div>



    </div>

</div>



</body>

</html>


Once you copy it, save the file as

"index.html"






The next step is the JavaScript file creation. Once again open your Notepad and paste the next code.



function changeImage(current) {

    var imagesNumber = 5;



    for (i=1; i<=imagesNumber; i++) {

        if (i == current) {

            document.getElementById("normal" + current).style.display = "block";

        } else {

            document.getElementById("normal" + i).style.display = "none";

        }

    }

}


Save the file as

"script.js"






Finally, we will create our style. Open your text editor and copy the next code:



body {

    margin: 0;

    padding: 0;

    background: #203b39;

    color: #FFF;

    text-align: center;

    font: normal 9pt Verdana;

}

a:link, a:visited {

    color: #EEE;

}

img {

    border: none;

}

#normal2, #normal3, #normal4, #normal5 {

    display: none;

}

#gallery {

    margin: 0 auto;

    width: 800px;

}

#thumbs {

    margin: 10px auto 10px auto;

    text-align: center;

    width: 800px;

}

#bigimages {

    width: 770px;

    float: left;

}

#thumbs img {

    width: 130px;

    height: 130px;

}

#bigimages img {

    border: 4px solid #555;

    margin-top: 5px;

    width: 750px;

}

#thumbs a:link, #thumbs a:visited {

    width: 130px;

    height: 130px;

    border: 6px solid #555;

    margin: 6px;

    float: left;

}

#thumbs a:hover {

    border: 6px solid #888;

}


Save the file as

"style.css"






Now we will have these files in the same folder and also the folder with the images. So you will have something like this:

JavaScript Photos Gallery


The final result should be like this:



Redirect Links with JavaScript

JavaScript



With the help of JavaScript, we have the possibility to redirect users from one page to another, just like an HTTP redirect.

There are two ways:

1. The replace method
Window.location.replace('Your URL')


This will replace your actually web-page with another one, using the same spot in our browsers history. So, the user won't be able to return to the previous page again using the back button.


2. The "href" method (not like the HTTP redirect)
Window.location.replace('Your URL')



This method will follow a url to a new page and leave a trace in the browsers history.


There are various codes that you can use:



<input type="button" onclick="window.location.replace('http://www.3torials.com')" value="Redirect to a new page" />


Result:







<div onclick="window.location.replace('http://www.3torials.com')">Here you can change your text for redirect link</div>


Result:
Here you can change your text for redirect link








<a href="#" onclick="window.location.replace('http://www.3torials.com/p/contact.html'); return false">Here you can change your text for redirect link</a>


Result:
Here you can change your text for redirect link

How to install a virtual machine (VirtualBox)

VirtualBOX




You want to use another OS on your PC, but you don't want to format your actual OS? There will be always an option by installing it on a Virtual Machine.
In this tutorial you will what you need to do for install it.
First of all, you need to download Oracle VM Virtual Box (click here). This is a free software and can run on Windows, Linux, Macintosh and Solaris hosts and supports a large number of guest operating systems.
After you download it, you can start the Virtual Machine installion. For that you will need the .iso file of the OS that you want. In this tutorial I will use the Linux Ubuntu distro.

Once you install the VM Virtual Box and open the program, you have to click on the New button.

Virtual Machine


The installation wizard will start now. You will have to click on the Next button now.

VirtualBOX Tutorial


Here you will have to put a name for your new Virtual Machine and select the OS type. The OS type that you will select will affect only the icon and the recommended specs that will appear next in the wizard. Once you wrote the name and chose the OS type, click on the Next button.

Oracle


In the next step you will have to select the amount of the RAM that you want your Virtual Machine use.

Install Virtual Machine


In the next step, you will have to select the virtual hard disk that will be used by your virtual machine as the boot disk. You can create a new hard disk or select and existing one here, but since this will be your first installation, you have to check the Boot Hard Disk and select Create new hard disk.

Linux Ubuntu


Now, a new window will open. This is for creating the new hard disk. Here you can select one of the two options:
Dynamically expanding storage: this type will occupy initially only a very small amount of space on your physical hard disk. This space will grow up (up to the size specified) as you will install more things on this Virtual Machine.
Fixed-size storage: It's the opposite of the dynamically one - will not grow. The amount of space that will ocuppy on your physical hard disk from the beginning, will be the one that you will select for it.
In my case, I have chose the Dinamically expanding storage.

Virtual Hard Disk


Next you will have to select the size of the virtual hard disk (in megabytes) as the location of this one on your physical hard disk.

Virtual Software


Now a summary with the parameters that you've selected for your virtual machine will be shown. Simply click on Finish.

VMWare



Once you have created the hard disk for your new virtual machine, select it and click on the Settings button (or press Ctrl + S). You also can double-click on the new virtual machine and, at the first start, you will be asked for the .iso location.

Windows


So, in my case I have clicked on the Settings button. Here you will have to click on Storage -> Select the Empty virtual CD/DVD ROM -> Now click on the CD icon (the right red mark in the pic) and select the .iso from the location that you have in your PC. Now click the OK button.

VM Virtual BOX


And that's all. Now you can start the OS installation by double-click on your virtual machine or select it and clicking on the Start button.

PD: If you can view the pictures well, click on them to open in a new tab and enlarge them.

Use Android apps on your PC

Android Tutorial




There are two methods to use Android applications on your PC:

  • First one, by using a Android App player.

To do that, you have to download first an App Player For example, the Blue Stacks (click here to go on the official page) App Player.
Simply download that app player for Windows and then you can run android apps on your Windows PC

  • Second one, by installing the Android On your virtual machine.

To install a virtual machine of Android you have to download first the Android OSX 86 .iso (click here to go on the official page) and install it your PC. After, you simply have to start that virtual machine. Now you have the Android OS installed as a virtual machine on your PC.

Simple Contact Form in PHP

PHP Tutorials




If you have a web-site, sometimes your users will want to contact you or it's just you who want that users contact you.
Having a contact form is the simplest method for a user to contact you.

First, you have to create a new php file. Let's call it form.php
Once you have created it, put in your file the following code:



<?php



$toEmail = "youremail@email.com";

$subject = "Message from Website";



$headers = "MIME-Version: 1.0\n";

$headers .= "Content-type: text/html; charset=iso-8859-1\n";

$headers .= "From: \"{$_POST['username']}\" {$_POST['emailaddress']}\n";

$headers .= "Return-Path: {$_POST['emailaddress']}\n"



mail( $_POST['emailaddress'], $subject, $_POST['emailmessage'], $headers );



The variables meaning:
- $toEmai : The e-mail address where the message will be sent.
- $subject : The e-mail subject that you will see when you'll receive one.
- Headers : tell e-mail clients what to do with the message and how to display it to the user.
In our headers we will include: The email address the message is from, the type of message and what e-mail to reply to.
- mail() function: This function accepts 4 parameters:
First is the e-mail address to send to.
Second is the subject of the e-mail.
Third is the actual message body of the e-mail.
Finally the fourth is the headers for the e-mail which we set earlier with from
e-mail address and type of e-mail.

Now we have the php script done, lets take a look at our HTML form. First you have to create a new file (for eg: contact.html)
In this file we will need a form that submits to our "form.php" script (or the name that you have chose for your form). The method should be POST and you will need the following fields:

  • Name
  • E-mail Address
  • Message


Example:




<form method="post" action="form.php">

Your Name: <input type="text" name="username" /><br />

Email-Address: <input type="text" name="emailaddress" /><br />

Message: <textarea cols="50" rows="5" name="emailmessage"></textarea>

<br />

<input type="submit" name="submit" value="Send" />

</form>




This contact form is only a simple example and some security should be added to stop spam bots by using captcha or logins.

How to add voice recognition to any text input






Have you saw the microphone button at the end of Google's search box and you wanted to have on your web-site too, so visitors can search for content using voice recognition?

Actually it is very easy to add it to any text input in your web site...
It is a HTML5 function and you can use it directly in input by adding "x-webkit-speech" to your input code.

Example:

<input type="text" x-webkit-speech />

Remove esnips Toolbar and Search Engine





Esnips is one of the popular file sharing services available on the web. In order to download files from esnips, you need to download the "esnips downloader" software. This software by default changes the default search engine in all your web browsers (Firefox, Chrome, etc.) which is very annoying and it slows down your system performance.

In order to completely remove the esnips software and toolbar, you can un-install the esnips download software from your system Control Panel. To do this, you have to click on Start -> Control Panel -> Add/Remove Programs (this name may be different depending of the Windows version that you use).

Also, you may uninstall the "esnips downloader extension" if you are using Mozilla Firefox. To get here, click on Tools -> Add-ons -> Extensions (or press Ctrl + Shift + A). There you have to Disable the eSnips Downloader Extension.


In order to remove the esnips search engine from your web browser, if you are using Mozilla Firefox, in the browser address bar -> type about:config





and search esnips




Select all, right click and click on "Reset".

After that, search browser.startup.homepage





Them, right click on it and click on Modify option. Now a new window will be open and there you have to put the link of the homepage you want to.




Once you set it, click on the Accept button and restart your browser.

Twitter Delicious Facebook Digg Stumbleupon Favorites More