Maui Fig

I may look exotic, maybe even a little scary but my scrumptious-ness might change your mind.  I was stolen from someone's yard.  Yeah I was just hanging around like I always do since I was developing on my parent's branch.  I grew vigorously and ripen, however just before I was going to drop to the ground and pecked to death by birds, I was stolen.  I guess I was saved in some way but in the end I was eaten and enjoyed in some sort of way.  What a life!

I'm still an ugly duck

I think my parents lied to me when they said I shall become a beautiful swan when I get older, even though I'm an ugly duckling now .  My sores and hideous facial features grew larger and changed to a rather attractive red.   Now that I'm older I'm over my physical attributes and more focusing on when and where my next meal will come from.  Have any extra rice, grain, corn, and feed to share?

On top

Like the previous post, if you can't get above the clouds in the plane, why not drive up and see the clouds at their level.  Hell it'll make a great view looking down at the valley below.  Not too many places on the US east coast that would allow you to travel up a mountain or a volcano for that matter like Haleakala in Maui.  It was a fun drive getting to the top and seeing everything below makes it look like we're flying above the clouds.  The family in the picture had the right idea, picnicking with a fantastic view.

In the sky, above the clouds

The amazing thing about flying when it's not a long flight and you actually have a view from the plane is the cloud formation.  When the clouds are all at the same elevation the formation soars up with multitude of variations and randomness.  It's so much better viewing the clouds while you're either just above them or in them, it changes your entire perspective.  Makes everyone wish that you could fly and hover in the clouds and absorb your surroundings.

Single Image Fade In - Fade Out

If  anyone has visited the Boston Globe website and seen their "The Big Picture" page you would be awe struck by the amazing photographs.  I always go there to see the amazing photos around the world and just makes me feel humble and pathetic about my photography skills.  I guess it gives me something to strive for.  For now I know that my photography knowledge might not be as skillful but at least I know how to extract code that I believe is quite effectively used.

If you visit the Earth Hour 2010 page from Boston Globe they have a great way of transitioning images from dark into light.  Great setup and I thought it was skillfully executed.  From a developer point of view I wanted to see the JavaScript involved in fading one image into the next that seems to work across IE and Firefox without any glitches so I started to dissect the code and here is what I found.

The main JavaScript use for fading is very small and simple:

<script>

var isFading = 0;

function setOpacity(obj, opacity){opacity = (opacity == 100)?99.999:opacity;obj.style.filter = "alpha(opacity:"+opacity+")";obj.style.KHTMLOpacity = opacity/100;obj.style.MozOpacity = opacity/100;obj.style.opacity = opacity/100;};

function fadIn(objId,opacity,sc){if(((sc==1)&&(isFading == 0))||(sc==0)){isFading = 1;if (document.getElementById) {obj = document.getElementById(objId);if (opacity >= 0){setOpacity(obj, opacity);opacity -= 10;window.setTimeout("fadIn('"+objId+"',"+opacity+",0)", 100)}else{obj.style.display="none";isFading = 0}}}};

function fadOut(objId,opacity,sc){if(((sc==1)&&(isFading == 0))||(sc==0)){isFading = 1;if (document.getElementById){obj = document.getElementById(objId);obj.style.display="";if (opacity <= 100){setOpacity(obj, opacity);opacity += 10;window.setTimeout("fadOut('"+objId+"',"+opacity+",0)", 100)}else{isFading = 0}}}}

</script>

I honestly don't care too much about understanding the code other than just knowing that it works. The next part was just calling the fadIn or fadOut functions.

<a href="#" onclick="this.blur();fadOut('imgA',0,1);return false">
   <img src="img_off.jpg" style="height:658px;width:990px;border:0px;" /></a>
<br/>
<div style="margin-top:-658px;height:658px;width:990px;position:relative;" id="imgA">
   <!-- the initial picture to display -->
   <a target="_new" href="img_off.jpg" onclick="this.blur();fadIn('imgA',100,1);return false">
   <img src="img_on.jpg" style="height:658px;width:990px;border:0px;" /></a>
</div>

Well after looking at how the fadIn and FadOut functions are called I saw what the trick or illusion is.  If you look at the div style attribute you will see the -658px value and that is where the trick lies.  Initially I thought the JS script was going to retrieve the next image and fade it in but this is even better, there won't be any delay of waiting for an image to download it would just work.

Here is how it works just to make it clear, HTML is rendered sequentially and the first image that is rendered is img_off.jpg and img_on is rendered right underneath.  Since the div has the top-margin style attribute of -658px (the height of the image)  for img_on.jpg it will overlay img_off.jpg.  In-essences they are stacked on top of one another.  The JavaScript is only changing the opacity to fade out one image and revealing the other.  I hope all that made sense if you even wanted to understand what's going on.  For the lazy people like me.   Here is the complete code that you can simply use to test it out.

<div>

 <a href="#" onclick="this.blur();fadOut('imgA',0,1);return false">
 <img src="img_off.jpg" style="height:658px;width:990px;border:0px;" /></a>
 <br/>

 <div style="margin-top:-658px;height:658px;width:990px;position:relative;" id="imgA">
    <!-- the initial picture to display -->
    <a target="_new" href="img_off.jpg" onclick="this.blur();fadIn('imgA',100,1);return false">
    <img src="img_on.jpg" style="height:658px;width:990px;border:0px;" /></a>
 </div>

 <script>
 var isFading = 0;

 function setOpacity(obj, opacity){opacity = (opacity == 100)?99.999:opacity;obj.style.filter = "alpha(opacity:"+opacity+")";obj.style.KHTMLOpacity = opacity/100;obj.style.MozOpacity = opacity/100;obj.style.opacity = opacity/100;};

 function fadIn(objId,opacity,sc){if(((sc==1)&&(isFading == 0))||(sc==0)){isFading = 1;if (document.getElementById) {obj = document.getElementById(objId);if (opacity >= 0){setOpacity(obj, opacity);opacity -= 10;window.setTimeout("fadIn('"+objId+"',"+opacity+",0)", 100)}else{obj.style.display="none";isFading = 0}}}};

 function fadOut(objId,opacity,sc){if(((sc==1)&&(isFading == 0))||(sc==0)){isFading = 1;if (document.getElementById){obj = document.getElementById(objId);obj.style.display="";if (opacity <= 100){setOpacity(obj, opacity);opacity += 10;window.setTimeout("fadOut('"+objId+"',"+opacity+",0)", 100)}else{isFading = 0}}}}

 </script>

</div>

**Note: The important thing is to set the correct height and width for your images so that they will overlay/stack on top of one another properly.  To ensure a seamless fade I had to adjust the "top-margin" value.  You'll have to play with the value until you think it looks correct.  A sample of this can be found on my photography blog.

Molokai From Maui

Everyday is a nice day on this island.  The beautiful blue skies, blue water, and everything is so crisp and clear.  It makes a great vacation place that would make me want to go back to all the time.  For now I will only have the memories of my photos and the longing of returning.