NotrevBlog » Web

Creating Web Albums with gThumb

Éverton Arruda — Fri, 04 Dec 2009 20:31:52 +0000

If you want to create a web album with some images you have in your computer, with Linux as your OS, i recommend you to use gThumb.

gThumb is, as said in WikiPedia (http://en.wikipedia.org/wiki/GThumb):

… an open-source image viewer and organizer for the GNOME desktop environment released under the GNU General Public License. It was originally based on GQView, and is designed to have a clean, simple interface.

gThumb Homepage: http://gthumb.sourceforge.net/

INSTALLING GTHUMB:
I’m using Ubuntu 9.04, named Jaunty Jackalope, to write this tutorial, so the installation process is very simple, all you have to do is run:

1	# aptitude install gthumb

This should work the same way for Debian GNU/Linux, but if you’re using another distro Linux, you might have to compile gThumb.

CREATING WEB ALBUM:
When you run gThumb you’ll see this interface:

I mapped it to make it easier to follow:

The steps to create the Web Album are:
1 – Create directory to keep the images:
First create a directory and put the images you’d like to be in the album in it.

2 – Open directory with gThumb:
In gThumb interface, select the directory in which the images are (#1 in MAP)

3 – Select the images you’d like to show in the album:
After opening the directory, which contains the images, you’ll have to select the images you’d like to show in the album (#2 in MAP)

4 – Open the “Create Web Album” window and configure it:
Now, with all images selected, go to Tools > Create Web Album (#3 in MAP)
Then you should see a window like this:

This is where you’ll configure your web album. The options are:

#1 – Where the web album files will be saved.
#2 – The name of the page, i recommend you to leave it as it is.
#3 – How many images per line and per column will be shown.
#4 – The title of the page, or header message, if you preffer.
#5 – The footer message of the page.
#6 – The theme that will be used in the web album.

The other options are not so important for me, so i didn’t put them in here.

In the end, you’ll have something like this: http://am.softwarelivre.org/galeria/fedora12releaseparty/

:wq

GooSH.org, my new start page

Éverton Arruda — Fri, 25 Sep 2009 19:05:29 +0000

A friend sent me a link to a webpage, the link was: http://goosh.org. Right after accessing the webpage i decided: “This is going to be my new start page”.

GooSH stands for Google Shell, it is an unofficial Google Product. Written by Stefan Grothkopp, it simulates a Unix Shell with access to some Google Products, simply fantastic!

I recommend it for everyone!

Shock ‘n’ Roll with FireFox 3.5

Éverton Arruda — Tue, 30 Jun 2009 19:03:56 +0000

FireFox 3.5, named ShiretokoShock, is out!

Get it at: http://bit.ly/ShiretokoShock

See also the Shiretoko Shock Campaign: http://www.spreadfirefox.com/shiretokoshock-campaign

[JavaScript+CSS+PHP] Changing style of actual menu link

Éverton Arruda — Wed, 24 Jun 2009 22:09:26 +0000

I was looking for a way to change the style of the actual menu link (the last clicked link in the menu), so that the user could know what page he is seeing, or the last link he clicked. My first attempt was to use only CSS, but i didn’t find anything. Then i read somewhere that it was not able to what i wanted only with CSS, that i needed JavaScript to do it. Well, i’ve done it and here i’ll teach how to do it:

The first thing we have to do is to create the menu and it’s style:
Style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#menu {
border-top: 2px solid black;
border-bottom: 2px solid black;
padding: 10px;
text-align: center;
width: 300px;
}

#menu a {
padding: 10px;
text-decoration: none;
margin: 0px 5px;
color: black;
background-color: "white";
}

#menu a:hover {
text-decoration: underline;
}

Note that i didn’t set the a:visited style.

Menu:

1
2
3
4
5

Now we have our menu, but it’s still not showing what is the actual menu link, so we will need a function that will change the style of the actual menu link:

Javascript Function:

1
2
3
4
5

function setActualLink(item)
{
item.style.backgroundColor = "black";
item.style.color = "white";
}

Now that we have the function it’s necessary to make it be executed after the menu is loaded, adding this line:

1	<script>setActualLink();</script>

You could also create a class for the actual menu link and assign the class to the actual menu link, instead of setting the styles directly inside the javascript function, as shown below:

Actual Menu Link Class:

1
2
3
4

#menu a.actualLink:visited {
background-color: black;
color: white;
}

And the javascript function would change to:
JavaScript Function:

1
2
3
4

function setActualLink(item)
{
item.className = "actualLink";
}

You can see the examples in the links below:
Using class
Not using class
The php codes are commented in the source.

Remeber that the pages must be .php .

:wq