#!/usr/bin/alex

and He came..

*Red Spirit*

http://www.gnome-look.org/content/show.php/Red+Spirit?content=90220

3 anni fa

Tumblr and Lightbox

Tumblr and Lightbox2 is a very wonderful combination!

from the Author’s page ( http://www.lokeshdhakar.com/projects/lightbox2/ ) : Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

You can have an example by clicking on each photo in my tumblelog, (only on photo post, not on all pictures of my blog),

Now I will explain you how to setup it correctly on Tumblr:

NOTE^1: Edit the urls respecting the correct path where you’ve uploaded the files!

NOTE^2: Ensure that you’ve uploaded all the needed files!

I’ve made a list of all the file you must upload:

./css:
lightbox.css

./images:
bullet.gif        donate-button.gif loading.gif       thumb-1.jpg
close.gif         download-icon.gif nextlabel.gif
closelabel.gif    image-1.jpg       prevlabel.gif

./js:
builder.js       lightbox.js      scriptaculous.js
effects.js       prototype.js

First follow the instruction by Author’s page (edited by me for inserting it on Tumblr custom css):

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. Between <head> </head> HTML tags!
 <script src="http://www.yourdomain.name/lightbox2/js/prototype.js" type="text/javascript"></script> <script src="http://www.yourdomain.name/lightbox2/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="http://www.yourdomain.name/lightbox2/js/lightbox.js" type="text/javascript"></script> 
Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
 <link rel="stylesheet" href="http://www.yourdomain.com/lightbox2/css/lightbox.css" type="text/css" media="screen" />
Edit your css/lightbox.css file:
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.yourdomain.com/lightbox2/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://www.yourdomain.com/lightbox2/images/nextlabel.gif) right 15% no-repeat; }
Edit your js/lightbox.js file:
fileLoadingImage: 'http://www.yourdomain.com/lightbox2/images/loading.gif', fileBottomNavCloseImage: 'http://www.yourdomain.com/lightbox2/images/closelabel.gif',

Now let’s start with tumblr integration:

On the custom CSS form on Tumblr, go to: {block:Photo} and edit your {LinkOpenTag} like this:
{LinkOpenTag}<a href="{PhotoURL-500}" rel="lightbox" title="{PhotoAlt}"><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>{LinkCloseTag}
Edit PhotoURL dimensions as you like, you can put values: 100, 250, 400, 500.

It’s all! now you have Tumblr+Lightbox2

if you have problems, write them to me!

3 anni fa

tagged as: tumblr lightbox2 lightbox image picture photo preview tumble tumblelog api combination integration support wonderful web2.0 web 2

New Header-Image for: blog.alexworld.it

Created with The Gimp,

3 anni fa

tagged as: alexworld.it alexworld flickr header tumblr great theme style display css image background photo

Tony - Alex - Pau

4 anni fa

tagged as: alessandro arrichiello pasquale boemio antonio bevilacqua south park style display image background wallpaper flickr publish unina

A mosaic poster made by me, it’s on my bedroom!

4 anni fa

tagged as: hitman photo collage wallpaper alessandro arrichiello made flickr background image picture.

Website Homepage	Take the RSS!	Look at Blog Archives
Send me an eMail	Take my gpg key	Add me to Your Skype Account
Chat with Me!	Look my Works	Look my Picasa Photo Album!
Look my Videos on Youtube!	Look my bookmarks on del.icio.us!	Add to Technorati Favorites!
My HD Videos on Vimeo!	Go to Google!	Go to MTV nomafie!