Javascript Photo Gallery

In the same way that we implemented the dotdotdot javascript function on the Home page, I used a separate javascript file to enable putting a photo gallery into any part of a page. For this I used http://galleria.io/. To use this, download and extract the .zip file from their website to your site directory. In your header add <script type=”text/javascript” language=”javascript” src=”/galleria/galleria-1.4.2.min.js”></script>.

To fully put this in part of your site (I went with my “Photos” page) simply create a <div> with an id, and any number of <img> tags inside of that, linking to whatever images you want. On your css page you will need to add styling for that <div> id you just created with whatever height and width you want and a background: #000. Lastly, on the same page that has the that <div>, put a set of <script> tags with this code in between:

Galleria.loadTheme(‘/galleria/themes/classic/galleria.classic.min.js’);
Galleria.run(‘#galleria’);

If you look around on the website for galleria you can find a bunch of themes and other things you can customize, but if all you want is a simple photo gallery then you’re all set. Here’s what mine looks like:

Navigation Plus Javascript

All of the work I’ve done so far has just been with the home page of the website, but what about the other ones? We’ll get into creating those very soon, but first we need to fix up the navigation bar we created weeks ago.

Te navigation bar we have now is fine for jumping from one page to another. But what if we scrolled down to the point where we couldn’t see much of the info on the page and were wondering which page we’re on. The way to fix this is using some javascript to add a class to the current page that makes the text in the link for that page a different color than the rest.

This is the code that I used for it (put inside of my header file, so it applies to each page):

$(function(){
var current = location.pathname;
if (current == “/”)
{$(‘#nav li a[href=”/”]’).addClass(‘active’);}
else{
$(‘#nav li a’).each(function(){
var $this = $(this);
if($this.attr(‘href’).indexOf(current) !== -1){
$this.addClass(‘active’);
}
})}
});

location.pathname grabs anything in the url past the main domain name. For example, calling location.pathname on google.com/images will give you “/images/”. In the case of a domain without any extras, google.com, you will just get a forward slash, /. The “if” statement in the start of the code checks for this to see if it should add the class to the “Home” link. Everything in the “else” statement will check which link to add the class to based on the “href” part of the link.

The “active” class is simply a class with the attribute color (set to whatever color you want). In my case I chose gold.

If you want to see this in action create a new php file called photos.php in your /xampp/htdocs/ directory. Include your header and footer to it, with a <div> with the id “content-area” in between. Now just make sure the “Photos” link in your navigation bar has the link “/photos.php”. When you click on “Photos” it should now take you to that page you just created, and “Photos” should be highlighted in your navigation bar, like this:

Pre-made Javascript

Remember how I created a function to make loading a post into a page of the website much easier? Well the same sort of thing can be done with javascript but on a slightly larger scale. Some other person out in the world can create a function in javascript and save all of that code into a new file. Then, people like me who don’t know javascript well enough or have the time to make some really fancy things can use that file.

In my case I used a javascript file called dotdotdot, which can be found here http://dotdotdot.frebsite.nl/. If you look at that site you will see that the javascript will make it so any text that goes outside the bounds of its container is replaced by an ellipsis.

To implement this on your own site, simply download the .zip file from their site with the “Download” link, unzip that folder to the main directory where you are keeping your website (probably the /xampp/htdocs folder if you’ve been following along).

Next you will need to put some code into the <head> section of your site. Much like with when adding the ability to use javascript generally, you will need to put a <script> tag. However, this time the src should be either the .js or .min.js file in the folder you just extracted. It will likely look like this:

<script type=”text/javascript” language=”javascript” src=”/jQuery.dotdotdot-master/src/js/jquery.dotdotdot.js”></script>

Finally, inside of any set of <script> tags on the page with the area you want to have an ellipsis simply put $(‘id of element to have ellpisis’).dotdotdot();

In my case with the posts section, I put $(‘.post’).dotdotdot();

Now, instead of having to manually put in an ellipsis so your page doesn’t look like this,

 

 

 

You can instead have a neat page that looks like this,

Javascript Post Loading

To set up to be able to put a section of javascript into your site you first need to add a line to your <head>. Kind of like how you had a line to link your css file to your site, you will use the line <script type=”text/javascript” language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;. This will make it so that in any file that has the <head> you can put in a set of <script> tags with javascript code in between.

In my case, I put this code on my Home page:

<script>
function loadPost(postName){
document.write(‘<div id=”‘+postName+'” class=”post”>’);
$(‘#’+postName).load(‘/posts/’+postName+’.php .postTitle, .date, .postContent’);
document.write(‘</div>’);}
</script>

The first line simply is the name of the function that I created and the variable that it will take as a parameter. That variable can then be later used throughout the function by calling “postName”. The next line writes out <div id=”whatever postName was entered” class=”post”>, the same line that I wrote in the simpler version of posts.

The third line may look a little confusing at first glance, but is really not that bad. Basically what it does is within the element with the id “whatever postName was entered” (which ends up being the div that was created just before hand) it places elements from the file path /posts/”whatever postName was entered”.php that have the classes “postTitle”, “date”, and “postContent” after the <div> that was just created. Lastly, it writes a closing <div> tag. Now, all we need to do to put a post into an area of the page is put loadPost(‘postName’) inside a set of <script> tags.

This is what it might look like using the same post information as previously:

But what if we want to have a couple of posts all with the same size in the same area? Well if you just left the code as is and loaded multiple posts you would get a bunch of overlapping text that would be unreadable and look terrible. Well by downloading some javascript that other people in the world have written all of that can be easily fixed. But that will have to wait until next week.

Getting Ready for Javascript

Basically, the purpose of using javascript here is to make the process of putting the title, post date, and some information from a post into an area using one line of code. The first step towards being able to do this is correctly sectioning and labeling posts so that you can correctly grab each part later on.

As usual, whatever class or id name I give an element, you can give your something else, so long as you’re consistent when you start writing the javascript. In my case, I created a new php file that I named post01.php, and put it in a new folder inside of the /xampp/htdocs directory that all of my other files were in. In that file I first created a <div> with the class post. Inside of that I created three elements; a link element linking to itself and with the classes “postTitle gold-text”, a paragraph with class “date”, and another <div> with class “postContent”. Inside of that “postContent” <div> I just put whatever actual information is within the post.

Next I added some styling to each of these new id’s created. Gotta keep everything looking nice. For the “post” class I set height: 230px, width: 540px, padding-bottom: 10px, and border-bottom: 1px dotted white. As with the sidebar list I also added a :last-child styling of border-bottom: none to the “post” class.

Lastly, I gave styling to the last three classes, “postTitle”, “date”, and “postContent”. For “postTitle” you can set the font-family and font-size to whatever you want. The options I found most important were padding-left: 8px, line-height: 40px, and text-decoration: none. For “date” I set padding-left: 8px, and line-height: 0px. You can set color to whatever you would like. For “postContent” I set padding-left: 20px. Again, you can set the font-family, font-size, and color to what you would like.

You can create any number of posts with this method.

Next time we’ll move on to the javascript needed to put these posts onto a page.

Posts Section

I’ve found two main ways to add a section on a web page to show shortened sections of posts. The first way is done just using html and css, and can take a little long. The second way is by using javascript to automatically load certain information from posts that are separate files. The javascript method is the more complicated of the two, so I will show that after the html/css method.

The layout for this section will be very similar to the list that I put in the sidebar on the right. The main difference is that instead of having each <li> element be a person, they will each be a post. For example:

<div id=”posts”>
<ul>
<li>
<h2 class=”gold-text”>Lorem Ipsum<h2>
<p class=”sub-logo”>October 28th, 2014</p>
<p>Lorem ipsum dolor sit amet, arcu in porttitor sit etiam nulla, euismod aliquam amet nisl, ligula tempor lobortis placerat condimentum. Montes a, mauris dolor, mauris morbi vestibulum facilisis turpis. Erat tincidunt ut ut tristique integer, velit dui luctus non, donec massa vestibulum justo nisl netus. Ullamcorper fringilla. Quis a, condimentum nibh non vitae, lorem fusce eius etiam, erat nunc tempor aliquam nec in, ac non eget fermentum morbi nostra. Turpis aenean vitae a eros volutpat. Sociis wisi tellus, ac magna fusce, aenean parturient qui vestibulum ut vitae nisl, semper leo faucibus odio lorem…</p>
</li>
</ul>
</div>

This would result in something like this:

You can use the same sort of css as with the list in the sidebar on the right and add more elements and get something like this:

But writing and changing all of that out would be very frustrating if you had to do it often. What if you could have all of that copying done with just one line of code though? Next week: javascript.

Main Content

To start off the content area I made a <div> with an id of “content-area” with two <div>’s inside of it, one with an id of “post-area” and the other “sidebar”. You can use whatever id you want, those are just what I used. Then, in my css file, I gave “content-area” some simple styling to set the heigh, width, margin: 0 auto, padding: 30px, and the background-color. Next I gave the two <div>’s inside “content-area” some simple styling, setting the total width of the two to no greater than the width of “content-area”, margin-top: 70px, and the area I want on the left the attribute float: left, and the are I want on the right the attribute float: right.

To start off I put a small list in the <div> on the right. For example, if  you had a company and wanted to list some of the higher ups (CEO, Chairman, President, etc.). My code for that was just an un-ordered list (<strong> is the same as using bold text):
<div id=”directors”>
<h2>Directors</h2>
<ul>
<li><strong>Design: </strong> John Smith</li>
<li><strong>Production: </strong> Ashley Johnson</li>
<li><strong>Communications: </strong> David Jones</li>
</ul>
</div>

Then I added some styling to each element so it looked nice. For the <ul> element I set the margin and padding to zero, and gave it a list-style of none, to get rid of any dots. Next I gave the <li> element styling of color (whatever color you want), line-height: 35px, border-bottom: 1px dotted color (whatever color you want), margin: 0px, and border-left: none. Lastly, a cool thing you can do with styling lists is change the styling of only the last item in a list. This is done by putting li:last-child as opposed to just li when specifying which element to style. In this case all I want to do is set it so border-bottom is none. Just a nice looking piece of styling.

At this point my page looks like this. (You can’t see the footer due to the image size, but it’s still there)

Next week I’ll finally actually get to adding a section for posts to that area.

Xampp and PHP

For this week I am actually going to take a quick break to go over switching to using a program called xampp and using PHP files instead of html.

In terms of what it allows you to do, xampp is pretty similar to using NetBeans for web programming. You can simulate hosting a website from your personal computer. One of the most notable differences is that you can use other file types, such as PHP, which stands for PHP: Hypertext Preprocessor (yes, part of the acronym is the acronym).

The main, and really only reason that I use php files is so that I can break up parts of multiple webpages that are the same into their own files and put a single line to include it whenever I need it, instead of having to copy all of that code each time.

For example, I can take all of the html code that it took to make my header, put it in a file in another folder, and replace its original spot with
<?php include ‘/includes/header.php’; ?>

This is a good tutorial for downloading and setting up xampp if you are using Windows. https://www.udemy.com/blog/xampp-tutorial/

The \xampp\htdocs\ folder location that it mentions is where you should put your current html and css files, after deleting whatever files are already in there. The html file that you want it to initially open to should be name index. That way when you type in localhost in your browser it will just go straight to your website.

To get started using php you’re going to need to open your index.html file in some code writing program, save it as a php type file in the same location (\xampp\htdocs\), and delete your index.html from that location. In my opinion, Notepad++ is the best program to use when editing php files, and webpage files in general. However, if you know of something else you would prefer using then feel free. After doing that you are ready to include php files to that one, or include it into other php files. No need to change any of the code within the file. Just know that any time you want to include files into another file, the destination file needs to be of type php in order to use that handy “include” function (<?php include ‘/includes/header.php’; ?>).

Finally, test it all out by taking some part of your code that is going to be repeated a number of times (I’d recommend something like a header or footer), creating a new php file with that code in it, and then putting the php include function with the directory location of that file (I recommend creating a folder in the htdocs directory to hold some group of files). If everything has been done correctly it should look just like the original home page that you had.

Footer

To start off making a footer I, to the surprise of no one, created a pair of <div> tags with an id of “footerwrap” to surround the whole area. Inside of that I created a pair of <footer> tags surrounding two more pairs of <div> tags, one with an id of “quickcontacts” and the class “float-left”, the other with an id of “links” and the class “float-right”, and both with the class “sub-logo”.

Inside of the “quickcontacts” <div> I put a few paragraphs with names and e-mails. Inside of the “links” <div> I put an un-ordered list with a few links to other websites. You could put whatever you want as small things inside of the footer, I am just using these two as examples of things that some sites use.

The styling for the footer was in many ways similar to that of the navigation bar. I set the height and width of “footerwrap” to 90px and 100% respectively, and gave it a background color. I then made the width of the <footer> tag area 900px and gave it margins of “0px auto” to keep it nice and centered.

Lastly I added some styling modifications to the list in the #links section:

#links ul{ list-style: none;}
#links li a{
text-decoration:none;
color: #fff;
}
#links li a:hover{ color: #efc100;}

Once this was all set in I had myself a simple footer:

 

Next time I’ll make it so I can put posts of some sort in the body of the page.

 

Navigation Bar: Page Tabs

Just as we did with the logo section of the navigation bar, we’ll create a <div> that will hold everything to go on one side of the navigation bar. This time that <div> will cause everything inside of it to move to the right side of the navigation bar. Like with the logo, I did this by giving the <div> a class called “float-right” which simply gives it the css attribute float:right.

To create the different page tabs I started off by making an un-ordered list that I gave an ID. Then, for each tab that I want to have in my navigation I add in an <li> element inside of that un-ordered list, and inside each of those <li> elements I added a link to what I want that tab to link to. For example:

<ul id=”nav”>
<li class=”active”>
<a href=”linktoyoursitehere”>Home</a>
</li>
</ul>

(The active class is so I can later give certain attributes to whichever page the user is currently on)

Now for the slightly harder part; adding css styling to those tabs so it looks nice. My first step was to make it so the whole un-ordered list (using the id of #nav) doesn’t show any dots for each element in the list. I did this using “list-style: none”. I then added some margin and padding to stop that section from hitting the edge of the whole navigation bar.

Next I added some styling to the <li> elements of the un-ordered list. I put “li” after #nav” to affect only the <li> elements inside of the <div> with the id of “nav”. “display: inline” makes it so the elements all appear as horizontal. And the rest is either stuff I’ve used before or should be self explanatory.

#nav li {
display: inline;
position: relative;
padding: 0px 0 16px;
float: left;
min-height: 35px;
border: none;
}

The last css elements I added are to change the link parts of the list (really just changing the text that you see). First, I made the base color of each tab be white “#nav a {color: #fff;}”. Next, I made it so that the current page tab has gold text color, and when I hover over a tab it’s text color changes to gold. “#nav a:hover, #nav .active > a {color: #e5c100;}”. The “hover” part should be self explanatory in that it affects that area when you hover over it. Like with the “li” earlier, “#nav .active” will only affect the parts inside of <div> with the id of “nav” that also has the class “active”.

Lastly I added some css to remove any decoration that making something a link adds in (ex. underline), and some padding to space everything out nicely.

#nav li a {
text-decoration: none;
padding: 0px 15px 28px;
}

After aaallll this I ended up with a nice looking navigation bar:

Next week I’ll go with something easier. Just a simple footer at the bottom of the page.