iPad Ready and bgStretcher2 Update

I took this picture, from my iPod, of an iPad showing off my portfolio. It looks amazing. The images are actually sized perfectly for this device. But there was something weird. All the images in the night album, and the occasional other image won’t show. I get the blue image not found icon. Very weird. I wonder if they are exported with some weird settings. Not sure how that happened.

I was also able to confuse the javascript by pressing on the album and next/previous buttons. I will have to take a look at that. As noted yesterday, it doesn’t work well on the iPhone either. I also checked Kelby’s site again, and it looks great too, just not on the iPhone. I am wondering how that device reports it’s screen size. I might just need to look for that browser and then display presized smaller images.

If you want to get a rough idea of what your site would look like on the iPhone, check out iPad Peek. It doesn’t show the broken images like the iPad did, but it will give you a sense of size and how your content will fit. Just enter your site in the address bar at the top.

Are you iPad Ready? (No flash allowed)

Are you a photographer with a flash site? Do you know that the iPad, just like the iPhone, will not display flash content? What’s a photographer to do? Scott Kelby looked at this earlier today.

When Kelby first put up his flash portfolio, I decided to create a javascript only portfolio site to do the same thing. See my portfolio here, and my post here.

I think my code is successful, to a certain extent. It works great on the desktop, but doesn’t work as well on the iPhone, and I don’t yet know on the iPad. Need to try that out. Anyone that wants to comment about that, please do.

I think that my issue on the iPhone is the size of the images. I think they need to be smaller to save on bandwidth, and prevent the phone’s browser from having to scale the images so much. That may be the issue on Kelby’s site too, because his new non flash site didn’t work well on the iPhone either. His new portfolio is also a jQuery javascript site done by RC. It was too slow to be useable on my phone. I wonder if image size is the issue there to. Now his site was optimized for the iPad, not the iPhone, but I want mine to work on both. I will need to do some more testing with smaller images to see.

Full Screen Slideshow in Javascript

So I now have a full screen slideshow in Javascript, without using flash, and I wanted to tell you how I did it, and how you can do it too. I will talk a bit about Javascript here, but you will be able to download the jQuery plugin I have without needing to know much, if all you want is to implement the gallery.

I got the idea for this plugin after looking at a flash version of Scott Kelby’s portfolio. I just wanted to give it a try in Javascript.

I have created a permanent page for bgStretcher2, so it is easier to find from the side bar, so look here.

BuzzBoost your Feedburner Feed via Javascript

Well, it was pointed out to me that there was an easier way to get RSS feeds onto your site. Feedburner. Guess what. It is also a Google product. Sheesh! Basicly, you need to get your feed registered with Feedburner. Then you can use their BuzzBoost to create a piece of Javascript that will get your feed for you. It is pretty similar to what the GoogleApi is doing that I talked about earlier. The difference here is that Feedburner has a control panel where you set up how  your feed looks. No need to figure out any Javascript at all.

So this is my feed via WordPress.

This is my feed via Feedburner.

This is a snipit of my feed from the BuzzBoost.

Subscribe to RSS headline updates from:
Powered by FeedBurner


And this is the code that was generated that I pasted in. Pretty simple. I had a hard time getting feedburner to recognize my feed, but I am not sure that is feedburners fault. WordPress appears to take a really long time to respond with the feed.

RSS Feeds via Javascript

I set about recently to try to get a RSS feed parsed using only Javascript. Not as easy as I had thought it would be. I had figured that there would be several Javascript library’s around, and I thought for sure that someone would have a jQuery plugin for it. Well, I did find jFeed, but it suffers from a rather large issue. It can’t access sites from a different domain from where it is running. This is really a Javascript security feature. I did a simple AJAX test, and sure enough, Javascript stops us from directly accessing another domain (to prevent cross site scripting attacks).

How do you get around this issue? Well, a php based proxy is one solution. You call via AJAX, this php file that then makes the request to the real feed, and sends it back. That didn’t seem like a simple or elegant enough solution.

I found RssToHtml, which is a PHP script that you can use the parse the RSS feed. Using this, you can even use an server side¬†include to get the feed. This¬†didn’t work on my machine¬†that would only¬†run cgi scripts from the include.¬†

I had just about given up when I stumbled upon the Google AJAX Feed Api. Google to the rescue again.
Continue reading

How to use Thickbox

I have had a lot of hits on my How to use Lytebox post, and I thought I might continue it as a series and do something on another of the light box clones. It also looks like lytebox has been discontinued by the author. I have started to use Thickbox. Why you ask? It uses jQuery, and I am starting to really like that library. One of the things that drew me to lytebox was that it had no dependencies. But now, more sites require javascript anyway, and my library of choice is jQuery. So, if I am using jQuery, why not the Thickbox plugin?

If you are not sure about this library, check out this matrix that lists just about every light box type javascript library around.

Continue reading

Moving Pictures via Javascript

Ok, I had promised to let anyone know that happened to be reading before Christmas, that I would talk about the collage script that I am using on the Christoper Ward Photography site. I am using the lytebox script when you click on an image, but the collage image that moves the pictures around the screen is all mine.

You can get the html source from that page. Here is the Javascript and the CSS files that are used. You can use this code, but please leave the Javascript comment header with my name on it.

/*
	collage javascript
	
	You are free to use this script provided you include this header

	Created by Chris Ward
	veggie2u@cyberward.net
	http://www.cyberward.net/blog/
*/

function Collage(pName) {
	this.name = pName;
	this.state = "closed";
	Collage.list[Collage.quantity] = this;
	Collage.quantity += 1;
}

Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

Collage.prototype.close = function() {
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.startPoint[0], y:this.startPoint[1], mode: 'absolute' });
	}
	this.state = "closed";
}

Collage.prototype.swap = function() {
	if( this.state == "closed" ) {
		this.open();
	} else {
		this.close();
	}
}

Collage.closeAll = function() {
	for( i=0; i < Collage.quantity; i++ ) {
		var $aCollage = Collage.list[i];
		if( $aCollage.state == "open" ) {
			$aCollage.close();
		}
	}
}

function doOnLoad() {
	$$('img.collageImg').each(function(s) {
		s.show();
	});
	collage1.swap();
}

Collage.quantity = 0;
Collage.list = new Array();

var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

var collage2 = new Collage("g2");
collage2.endPoints = [ [220, 100], [360, 120], [280,220], [300,390], [380,300], [580,100], [500,180], [470,420], [560,330], [660, 420] ];
collage2.startPoint = [4, 180];

var collage3 = new Collage("g3");
collage3.endPoints = [ [280, 80], [240, 230], [400,100], [460,180], [280,400], [340,320], [540,290], [600, 400], [580, 130], [480,380] ];
collage3.startPoint = [4, 300];

var collage4 = new Collage("g4");
collage4.endPoints = [ [280, 80], [300, 230], [400,100], [540,120], [580,200], [340,400], [280,320], [480,290], [540,380], [700, 110], [650, 350] ];
collage4.startPoint = [4, 420];
body {
	background: black;
	margin:0;
	padding:0;
	height:100%;
}

#albums {
	position:absolute;
	top:10px;
	left:20px;
}

#about {
	position:absolute;
	top:530px;
	left:10px;
}

#about img {
	border:0;
}
#about a {
	text-decoration:none;
}

#title {
	position:absolute;
	top:10px;
	left:220px;
}

#collages {
	background-image:url("./images/albums_background.png");
	position:absolute;
	left:0;
	top:0;
	width: 180px;
	height: 100%;
	margin-top:0px;
	margin-bottom:0px;
}
#collages img {
	margin: 10px;
}

#content {
	margin-left:180px;
	color:white;
}
#content img {
	border:0;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.collageImg {
	border: 1px solid white;
}

.collageThumb {
	opacity:0.4;filter:alpha(opacity=40);
	border: 1px solid white;
}

#g1img1, #g1img2, #g1img3, #g1img4, #g1img5, #g1img6, #g1img7, #g1img8, #g1img9, #g1img10, #g1img11 {
	position: absolute; top: 60px; left: 4px;
}
#g1img11 {
	opacity:0.4;filter:alpha(opacity=40);
}

#g2img1, #g2img2, #g2img3, #g2img4, #g2img5, #g2img6, #g2img7, #g2img8, #g2img9, #g2img10, #g2img11 {
		position: absolute; top: 180px; left: 4px;
}
#g2img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g3img1, #g3img2, #g3img3, #g3img4, #g3img5, #g3img6, #g3img7, #g3img8, #g3img9, #g3img10, #g3img11 {
		position: absolute; top: 300px; left: 4px;
}
#g3img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g4img1, #g4img2, #g4img3, #g4img4, #g4img5, #g4img6, #g4img7, #g4img8, #g4img9, #g4img10, #g4img11, #g4img12 {
		position: absolute; top: 420px; left: 4px;
}
#g4img12 {
		opacity:0.4;filter:alpha(opacity=40);
}

The way that it is implemented is pretty simple. In order to make this work, I relied on a naming convention. Lets look at one image:


The id of the image is set to g1 for 'gallery 1', img1 for 'image 1'. If you look at the html, I had to add this logical id to every image. This is a very tedious process. There is also the code for lytebox, namely the rel="lytebox[one]" to launch the lytebox script when the image is clicked, and link all the 'one' galleries together. The other thing on this line is the style="display:none;" part. This bugs me, but it appears to be a css limitation I can't get around. Because all the images are stacked, they all appear in turn as they are downloaded without this. If I put this style in the css, then javascript can't turn it back on! It has to be an inline style. I would love to hear a solution for this.

Then we have one more line from the html file to look at.


This line is the last line in each gallery, and is the last image repeated. This is the one that will not move, and forms the thumbnail for the gallery. Via css, the transparency is lowered when the collage is out. This image contains the onClick call to move the images.

Now onto the javascript. Look at this bit of code that defines a collage:

var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

This defines gallery 1 ("g1"). All those numbers are the end points for where each image will be when the collage is expanded. Again, this is a pain, and it can be confusing which image you are adjusting when changing the numbers.

So lets look at the open function:

Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

This is pretty simple. Once I found the Effect.Move() function of scriptaculous, this simply loops over the images in the gallery, and tells the Move function to move the images from where it is (stacked with the others), to the endpoint. The close is similar. It moves the images from where they are (the endpoints) to the start point that was defined in the gallery definition.

The rest of the script is pretty simple. The other methods show all the images (doOnLoad), or set up the swap.

What could be improved? A lot. I don't like defining the galleries and the images through the id field. The user of the collage js has to have intimate knowledge of how the script works in order to set it up. Not only that, but you need matching elements defined in CSS correctly. Having the end point definitions in the js is a pain too. Would would be better, is to come up with a way to have the javascript scan the html and look for images to use, much like how lytebox does it via the rel attribute. Well, guess what? That is exactly what I am working on!

Christopher Ward Photography

Gerbera photo from new gallary

Gerbera photo from new gallary

I finally have my pictures up at Christopher Ward Photography. I was hoping to get them up before the end of the year, but a couple of days isn’t too bad. I had thought that I would go with a site at smugmug, and I may later, but I had an idea for some javascript-y-ness that I wanted to try first. The album’s on the left contain pictures that fly out into a collage. I will post more on the Javascript later. I tried something different with the albums too. Annie had the idea to group them by color, instead of landscape, people, etc. I think it worked pretty well. I have some images that I wasn’t able to get in because of it, but the individual collages look better and more cohesive this way.

Javascript Speed Tests

As part two of yesterdays Javascript Speed post, I have an interresting link. MooTools, another Javascript library, has a speed comparison page up here. I had looked at MooTools a while back when I put up the slideshow piece on the front page of the site. I didn’t look into it too much, but it seemed small and compact. Anyway, the speed comparison is interresting. If you go to the site, press the “start tests” button in the upper right to see the differences. I got here while I was looking into jQuery. Prototype gets smacked in the speed test. Yikes.

This post is from 2007, but was already complaining that WordPress was going to use Prototype instead of jQuery for version 2.0. (which was just released a month ago) It would appear to me though that WordPress went and switched to jQuery. Looking at the WordPress docs, I found this page on AJAX, and it talks about jQuery.  When I look at the source of one of the admin pages, there is jQuery references all over, but nothing about prototype.

Looks like WordPress has switched to jQuery, and if I am looking at making plugins for wordpress, I might want to think about moving to jQuery.

Javascript Speed

I have been working on a new script that will “fly” collages out from an album. It was using an effect from script.aculo.us. I am much closer, and am in the process of gathering images to post before I call it done. I tested it with Safari, Windows Explorer 6, and Firefox 3.0. I have to say, it was crazy smooth in Safari and Explorer. I was disapointed in Firefox. It is a little jerky. It was in development, but I figured that was just something to live with until I tried the other browsers.

There is hope. Firefox 3.1 is in beta (as of October), and it is supposed to have Tracemonkey support among other things. All the browsers have been madly working on their javascript kung fu it would appear. I haven’t tried the beta, but here’s hoping for a smoother ride once it hits prime time.