Cyberward.net » javascript

iPad Ready and bgStretcher2 Update

Chris Ward — Tue, 06 Apr 2010 10:04:55 +0000

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)

Chris Ward — Mon, 05 Apr 2010 20:17:29 +0000

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

Chris Ward — Mon, 01 Feb 2010 11:30:54 +0000

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

Chris Ward — Tue, 21 Apr 2009 01:47:56 +0000

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.

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.

^?View Code HTML

RSS Feeds via Javascript

Chris Ward — Mon, 20 Apr 2009 18:25:58 +0000

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.

Note: for these examples, the simplest thing was to include an image example, not a running example inline. The Wordpress editor (even in html mode) keeps sticking in formatting and killing the javascript. There are links to example pages.

The first thing I tried was a wizard that created feed code for you. It presents a cool little AJAX box that can rotate through a feed list. This is what it looks like for one feed (see example page also) :

This is what it looks like for multiple feeds (see example page also) :

But this still wasn’t quite what I wanted. It was a little too flashy. I really just wanted a list of posts, with links to them. I then found the API page (that I mentioned above) and some more basic examples.

This is what I got (see example page also) :

There we go. That is what I was looking for. Ok, so what do you have to do to get this same result? First you should get a google api key. If you are grabbing code from me, don’t use my google code. Get your own, or use “key=notsupplied-wizard” instead.

You really need three pieces. You need to point to the google search API:

^?View Code HTML

Then you need the javascript that will do the work. I will explain it in a minute.

^?View Code HTML

That javascript can be included in a head statement. It doesn’t need to be inline with your presentation. Last, you need a DIV that the feed will show up in.

^?View Code HTML

So you can see where I gave my feed url in the javascript. Change that to whatever you want the feed to be. The rest of the javascript is used to create some code on the fly. It is added to the div “feed”. That can be any div you want. Just change the “document.getElementById(“feed”);” code to what ever your div is called instead of “feed”.

The basic example on the site does not show links. I had to build that. The result that comes back is a json object that contains info about the feed. I discovered that for every “entry” there was not only a “title” but a “link”. I used the “link” property to build an anchor tag to wrap the title. Now when the list is presented, a viewer can click on the text and go to the post. If you want to present more info, “publishedDate” and “content” are two other attributes you may want to use.

It works pretty well. Google caches the feeds too. Not sure how that is done, or how fast it is refreshed, but it sure is darn fast. I like it. Give it a try.

How to use Thickbox

Chris Ward — Mon, 13 Apr 2009 17:49:49 +0000

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.

Setting up¬†Thickbox

The thickbox site has great examples too. It is not hard to set up. Head over to the Thickbox site and grab the files. What you need to get are the thickbox.js file, the thickbox.css file, the loadingAnimation.gif, and the macFFBgHack.png. More on the images in a minute.

Don’t forget, this is a plugin, or aditional library that builds on jQuery, so you will need to download¬†jQuery too. You will only need one file: jQuery.js. For these¬†examples I am not using the compressed versions, but you could. Both jQuery and Thickbox offer compressed versions of their javascript libraries. They might be worth using in a production environment, but I will use the fully spaced files here.

Ok, first up, I like to have a bit of structure to my web sites. I like to have js, css,¬†images, and pictures folders. You don’t have to, but this is what I do. I put my javascript into the js folder. I put style sheets into css, icons and graphics for the site into images, and photographs into the pictures folder. So for this example, that is where¬†I put the files.¬†

/examples/thickbox/js/jquery.js
                 /js/thickbox.js
                 /css/thickbox.js
                 /images/loadingAnimation.gif
                 /images/macFFBgHack.png

A few little tweaks

If you put all of the files into /examples/thickbox/, and not into the structure like we have, you wouldn’t need to do this step, but if you did, we need to edit a couple of thickbox files to let them know what we did.

You can edit files in any number of ways. If you are on a web server running linux, you might want to try nano. It is pretty easy to use, and gives you some ctrl key combinations at the bottom for thigs like saving and searching.

To edit the index html file in nano type:

nano -w index.html

You can move around using the cursor keys, and the terminal will scroll for you. When you want to exit and save, press ctrl-x.

First is the /js/thickbox.js file. We need to modify were the loading animation is located. Change that line to:

var tb_pathToImage = "images/loadingAnimation.gif";

This line is inserted into generated html, so the path is relative to the html page created.

Then we need to look at the /css/thickbox.cc file. We need to navigate down through that file and find the .TB_overlayMacFFBGHack class. Change that to:

.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}

What are these files for? The loading animation is a little bar that shows up inbetween when you click on the image, and the larger one is ready. The overlay image is to help firefox on Mac’s provide the screen dimming over flash.

Including our files.

To get our files ‘included’ into a html document, we need to put some lines into the head of the document, like this:

^?View Code HTML

1
2

That’s all there is to it. The two script tags insert the javascript, and the link tag inserts the stylesheet.

Apply the effect

Thickbox uses the jQuery library. This means that it is all about selectors. That usually means that we use css class names in our javascript to identify elements on a page. Thickbox uses the “thickbox” class to identify what images to apply this effect to.

Here is a line of html that displays a thumbnail, and when you click on it, it takes you to a different page and displays it full screen.

^?View Code HTML

1
2

Here is a line of html that displays a thumbnail, and when you click on it, it uses the thickbox javascript to display the light box type effect.

^?View Code HTML

Not much different is there? The only difference is the class=”thickbox”. I think that is pretty cool. How about linking several images together so that you can use next and previous buttons to link them? You just need to add a rel=”xxx” where xxx is the name of the gallery. As long as this text is the same for each image you want linked together, it can be anything.

^?View Code HTML

1
2

The full example

What I show now is a full example of using this to create a gallery. A very simple one. Not going to win any style awards, but it will do. There are 3 versions of the index.html file here. One without the thickbox effect at all (index.html), one with the thickbox effect (index2.html), and one with thickbox using gallerys¬†(index3.html). To make this work I have also added another css file: /css/gallery.css.

^?View Code HTML

 
  
  
Thickbox Example Gallery

    No Thickbox
    Using Thickbox
    Thickbox with Galleries

  
  
  
 
  
  
  
  
Cyberward blog post on Thickbox

^?View Code CSS

body {
        background-color: black;
        text-align: center;
        margin:10px;
}
h1, h3, h3 a, span {
        color: white;
        font-family: sans-serif;
        margin:10px;
}
img {
        border: solid 1px gray;
}
img:hover {
        border: solid 1px white;
        /* doesn't work in ie */
}
a img {
        text-decoration: none;
}

There you have it. A pretty simple gallery. Fell free to copy it. You will just need to download the files from jQuery and Thickbox, and get your own images. Have fun.

Moving Pictures via Javascript

Chris Ward — Tue, 13 Jan 2009 13:00:47 +0000

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:

^?View Code JAVASCRIPT

1	<a href="./pictures/Blue/Erie Night.jpg" rel="lytebox[one]" title="Erie Night"><img id="g1img1" class="collageImg" style="display:none;" src="./pictures/Blue/Erie Night (1).jpg"/>a>

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.

^?View Code JAVASCRIPT

1	<a href="#" onClick="collage1.swap();"><img id="g1img11" class="collageThumb" src="./pictures/Blue/Montana Road (1).jpg"/>a>

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:

^?View Code JAVASCRIPT

1
2
3

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:

^?View Code JAVASCRIPT

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

Chris Ward — Mon, 05 Jan 2009 03:21:18 +0000

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

Chris Ward — Tue, 30 Dec 2008 15:47:45 +0000

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

Chris Ward — Mon, 29 Dec 2008 19:38:26 +0000

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.

Cyberward.net » javascript

iPad Ready and bgStretcher2 Update

Are you iPad Ready? (No flash allowed)

Full Screen Slideshow in Javascript

BuzzBoost your Feedburner Feed via Javascript

RSS Feeds via Javascript

How to use Thickbox

Setting up¬†Thickbox

A few little tweaks

Including our files.

Apply the effect

The full example

Thickbox Example Gallery

No Thickbox Using Thickbox Thickbox with Galleries

Cyberward blog post on Thickbox

Moving Pictures via Javascript

Christopher Ward Photography

Javascript Speed Tests

Javascript Speed