Richard & Stephanie Sipe

I recently redesigned my picture gallery as part of moving my website to a WordPress powered site. As part of that redesign, I wanted to move my full size picture view to one that uses LightBox JS 2.0. That worked out smashingly until I decided that I wanted the home movies in my gallery to also display in a LightBox frame. Turns out that LightBox is coded to display image files and does not work out of the Box (har har har) for displaying movies.

After a quick google search I stumbled upon the MPOV blog and a post on Lightbox with iframes. I downloaded his script and plugged it in instead of my current lightbox.js file. It worked great to display the movies but wouldn’t display the images because of a bug. To display my Flash movies in the new iFrame LightBox JS v2.0 I just edited the existing link to the Flash created simple HTML file to include the rel=”lightbox” property. The HTML file is simply a file with an embedded Flash movie (.flv) playing file (.swf).

My issue with the new hacked LightBox was that although it now allowed me to define a height for the iFrame and Lightbox, it didn’t support setting the width of the iFrame and the LightBox and it would no longer display the images. So, when my Flash movie would load in LightBox it, depending on its size, would have a scroll bar. You can set the width at the top of the lightbox.js as the iFrameWidth variable but my videos are a variety of sizes so I needed to be able to dynamically set the width for the LightBox/iFrame.

No biggie, though, with the addition of a few lines of code the new Lightbox with iFrames now supports setting the height and width of the iFrame and therefore LightBox and it also now displays images . To pass in the width and height use: rel=”lightbox|WIDTH|HEIGHT”. For instance if you want to display a 640px X 480px movie you would use rel=”lightbox|660|500″ The script automatically adds the defined LightBox border (var = borderSize) x 2 to the width and height.

Download the new LightBox with iFrames Reloaded
Install by changing the extension to .js from .txt and replace your existing lightbox.js file with the new one.
Note: You will need the full LightBox v2.0 installed already which you can download from here.

For an example of using LightBox to open embedded Flash movies and standard JPG images check out our Picture Gallery. Click on one of the movies links from the first page to see an iFrame + LightBox being used to display the Flash Video or one of the thousand pictures for the standard LightBox image usage.

Thanks to Lokesh Dhakar for the LightBox script and Tim Morgan cool iFrame hack.

              

Well, its been a long time coming but I have finally redesigned our website. I had never completely finished the first design and I was over the purple so I figured now was a great time for a new look.  I created this new site on WordPress which is a Content Management Tool and Blogging Open Source solution.  WordPress is database driven and allows me to manage the content on this website through an administrator interface.

I am still working on getting all the old content moved over but I have managed to rewrite The Rich & Steph Picture Gallery to work with WordPress and substantially jazzed it up. Now when you click on an image a nifty animation appears. You can use the Next and Previous links on the pages to move between the different pictures (they are in the upper right or left, just move your mouse and they will appear if you don’t see them).

I also have actually posted current news to the Sipe Family News section! I will try to keep this more up to date than before (almost two years behind!) and WordPress makes it easier for me to add new information. Even better, it allows you to comment on any of our posts. We would love to hear from all our family and friends about any of our news or other items.

The website now contains all of my geek Technology Posts in one place with subsections.  My technology posts are reviews or solutions to problems or information on a large range of topics I run across in my daily work as a software engineer and my technology fumbling in my spare time.

As always, our Eagle Crest Vacation Rental is still going on strong.  We would love to have you stay at our chalet at the Eagle Crest Resort, just contact us and we will get you set up. Also, I am still working hard on my Log Furniture Business, Modern Rustics Log Furniture. I have delivered log beds to as far away as Tennessee and as close as Tacoma this past year. All of my log furniture customers have been extremely happy with their furniture.

              

Soap is a hybrid mouse created by Microsoft Labs and UW researcher Patrick Baudisch. The Soap Mouse is an awesome idea that is amazingly easy to do yourself. In a super surprising move from Microsoft, Patrick’s Soap Mouse website includes not only a very detailed pdf how-to but also a great movie how-to build your own soap mouse.

The mouse is made by removing the internals from a wireless mouse, performing a bit of modification, placing them into a reclaimed Rite Aid hand sanitizer bottle, and placing that assembly into a fuzzy sock. The soap mouse works by reading the inside of the sock by the normal mouse optical unit as the above created assembly is rotated inside of the sock in a very soap bar in your hand kind of motion.

The Soap DIY includes information for two versions, a gamers soap mouse and a 2D display mouse for more usualy mousing. The 2D is more difficult to make but (for most games) having a gamers soap mouse requires you to have a keypad to do your AWSD moving.

I love this creation for a bunch of reasons: It is a new take on the age old mouse input device, it is a pretty easy and inexpensive ($35) geek DIY project, and it just looks cool. I am seriously considering making it but am still trying to figure out when I would really use the little sock mouse.

              

Tough times at the Sipe family household as a nasty cold strain has gotten all of us. After our great Thanksgiving trip to South Beach, OR Stephanie and Kayla came down with a cold. It started with a sore throat and quickly went to an icky, stuffy head, body sore cold. Poor Kayla has been coughing and sneezing and her little nose has been running. Its tough for us to see her sick but even worse she isn’t sleeping well now so we are up all the time. With Steph sick that left Rich who just also came down with the ick. Hopefully we will all be better here soon and can better enjoy the great Christmas season.

              

Ever noticed that the little icon next to the URL in your address bar? For some websites the icon is customized and for others it is either blank or a default icon. That icon is actually pulled from a file on your webserver called favicon.ico. The favicon.ico file tells the browser what 16×16 pixel icon to display when people browse to your website. The icon will also appear to the left of your favorite entry for any website with a favicon.ico.

So how do you get your own icon for your website? You need to create a file named favicon.ico and upload it to the main directory of your websierver. Sounds easy enough, right? Well almost, the only thing that makes this tricky is this very tiny image file is in a format most image editors can not save as a default. This little devious file is a Windows Icon Format file (.ico) which should spread dread into the hearts of MAC users everywhere. No fear, though, with a little plugin you can use good old Adobe Photoshop to create your very own favicon.ico file.

First, go to: this website and download the ICO format plugin for your version of Photoshop (MAC and PC are different). Next, follow the included instructions to drop the ICO plugin into your Photoshop plugins folder. Now the fun part, get your self a 16×16 pixel canvas and design your favicon.ico. A little hint is to use a canvas of 32×32 and then change the image size right before you save so you can actually see what you are doing! Now, choose save as and select Windows Icon Format (ico) from the format dropdown box. Last upload your file to the home directory of your webserver.

The first thing I know you are going to do is go to your website to see your nifty new website icon! Sadly, though, there is a good chance you will not see it Browsers are iffy on when they check for the new versions of favicon.ico. Some check when you refresh, some you have to clear the cache, some you have to bookmark the page, others you have to jump on one foot while left clicking! Anyways, just give it some time and sometime your new image will pop up on your address bar.