Adrian Tomic

Panama!

Adrian Tomic — Fri, 03 Sep 2010 09:45:53 +0000

Panama is a TV show on SVT (Swedish Television) about visual communication. The entire site is bulit as a WordPress template. It is a heavily modified with jQuery. I was a part of the early planning team for the web site acting as a freelance technical consultant. I did all of the CSS and HTML, as well as some jQuery and some WordPress tinkering.

See the Live site

Wordpress: Edit link highlight with jQuery

Adrian Tomic — Thu, 15 Jul 2010 20:29:44 +0000

This is a simple jQuery script that you can use for your WordPress theme. I use it on a theme I made for a client. It makes it easier to see what they are editing when they mover the house over the edit-button.

Anyway, here’s the script:

$("a.post-edit-link").hover(
	  function () {
	  $(this).parents(".hentry").css("background", "yellow");
		},
	  function () {
	  $(this).parents(".hentry").css("background", "none");
	  }
	);

It will highligt the parent div (.hentry) when doing a mouse over of the edit-post link.

How to add jQuery to WordPress + jQuery plugin

Adrian Tomic — Thu, 06 May 2010 12:59:33 +0000

Adding jQuery functionality to a WordPress theme is pretty easy. But there are a few things you need to do to make it right. This is a tutorial describing how to activate jQuery (since it’s already built into WordPress) and later adding a jQuery plugin.

Start by going into your header.php file in your theme directory.

Add the code BEFORE the function.

That’s it. Now let’s try if it works. Create a directory in your theme directory called “js” (short for javascript). In the js directory, create a file called myscript.js. The myscript.js file will contain all the scripts. In the file myscript.js copy and pase the code below.

jQuery(document).ready(function($) { // When the document (page) has finished loading.
 
alert("jQuery is working!"); // Shows a window displaying "jQuery is working!"
 
});

Save the file and go to your site. You should see a window displaying the text “jQuery is working!”

The third step is adding a jQuery plugin. There are a lot of plugins for jQuery out there. I’ve decided to use the jQuery Cycle plugin. jQuery Cycle will cycle through images or div containers. Take a look at the examples on the site of the plugin.

The first thing you should do is to download the jQuery Cycle files. You can find them here. Place the files in your “js” folder.

You now need to notify WordPress about the new jQuery plugin files. You do that by using the wp_enqueue_script (same as the jQuery code). Place the code BEFORE
the function and the . Like this:

In your myscript.js add the jQuery cycle code. In this example the contents of your myscript.js should look like this after you have copy and pasted one of the examples from the jQuery cycle page.

jQuery(document).ready(function($) { // When the document (page) has finished loading.
 
$('#s1').cycle('fade'); //jQuery cycle code.
 
});

I hope I made myself clear in this tutorial. If you have any questions or like this tutorial, please make a comment below

jQuery LocalScroll Tutorial

Adrian Tomic — Wed, 05 May 2010 00:01:09 +0000

This is originally a post that was on my Tumblr blog. Since I just redesigned my portofolio and incorporated my blog into it I now repost the tutorial here. If you (for some reason) like the Tumblr post better, you can find it here.

Another note: I accidentally deleted the demo files If you can’t get the code to work from the tutorial, please comment and I’ll try to find the time to recreate the demo files.

I´m writing this small tutorial since I found it a bit tricky to implement the jQuery plugin LocalScroll.

This tutorial will help you add the nice scrolling effect that you can see on my portfolio to your own site. Go to my portfolio and try clicking on “Contact Me” on my portfolio and you´ll understand what I´m talking about.

Step one:
Download jQuery, LocalScroll and ScrollTo. jQuery is the base code. LocalScroll and ScrollTo are plugins that you can use with jQuery.

jQuery
http://jquery.com/

LocalScroll & ScrollTo (scroll to the bottom of the page for downloads)
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

You´ll also need to setup a menu and have

tags with a unique id. For example: A link in the menu to a

with the id “#aboutMe”. If you don´t know what I´m talking about, you can view or download the example files i made.

Step 2:
When you have downloaded the files you should put them in a folder called “js” (short for java script). You don´t have to, but it´s good to keep things organized Make sure the js folder is in the same folder as your index.html.

These are the files you should have in your js folder (the version numbers may differ though).
jquery-1.3.1.min.js
jquery.localscroll-1.2.6-min.js
jquery.scrollTo-1.4.0-min.js

Step 3:
Now when you have all the files you need, you just have to put some code in your html file.

Let´s start with importing the .js files. Put these lines of code in the tag of your html file.

And then copy and paste this below too (also in your tag).

What we just did was to first import the .js files. And then implement the localScroll and scrollTo plugin so it starts when the site is loaded.

The code below adds a smooth scrolling effect to all your anchor links on the page.
$.localScroll();

Step 4:
Click and enjoy the super smooth scrolling

The Truth About Dyson

Adrian Tomic — Mon, 03 May 2010 15:18:03 +0000

The truth about Dyson campaign is just what the name implies. The Japanese customers had some misinformation about the Dyson products. The aim of the campaign was to educate and answer many of the questions the customers asks and might ask about Dyson. I was a part of the idea and strategy team, but I did not take part in the production phase of the campaign.

See the Live site

Plants

Adrian Tomic — Thu, 15 Apr 2010 20:42:20 +0000

“Plants” is a short bumper for a fictional nature documentary program. I made this while attending Hyper Island. It is the first project I did in Adobe After Effects, but not my first project as an animator.

Take a look at my other videos on Vimeo

mySQL dump path and MAMP

Adrian Tomic — Wed, 10 Mar 2010 21:28:29 +0000

When moving this site, I used WordPress DBmanager plugin to back up my database. I had trouble finding the path to mySQL and the mysqldump.

The path to the “files” are as follows.

To mysqldump: /Applications/MAMP/Library/bin/mysqldump
To mysql: /Applications/MAMP/Library/bin/mysql

Hope it will help someone

The Night Stories

Adrian Tomic — Wed, 10 Mar 2010 19:30:42 +0000

Nine talented Swedish film makers got together with Tiger Jeans to promote their nine new washes. I worked together with my friends at Lowe Brindfors as a WordPress developer putting everything together into a small campaign web site.

Dyson DC26

Adrian Tomic — Wed, 10 Mar 2010 19:28:21 +0000

Dyson wanted a digital campaign to raise the awareness of the new DC26 vacuum cleaner on the Japanese market. I designed and directed the interactive banners and the landing page.

Take a look at the Live banner

iNSTANT KÖKSBORD

Adrian Tomic — Sat, 30 Jan 2010 22:21:00 +0000

En must have app.

http://www.mittegetjavlanarnia.se/?p=2034