Archive for May, 2008

Options for “hybrid modal” lightbox display of images

Posted by admin in Web design & development on May 29, 2008

[Update 2009 - OK now I'm not the total newbie anymore and would have to recommend Shadowbox on top of jQuery for it's versatility and power. Slimbox is still great though.]

The Contenders

Slimbox

The true successor to the king (Lightbox). This is the chosen one. Very lightweight, simple instructions, does what it says on the tin. Simple instructions for when I’ve forgotten in two weeks are further down…

Shadowbox.js

This one seems to be the current best in breadth of options but too much to read for a low level webdev monkey like me.

Lightbox

The original – but perhaps no longer the beast.

Thickbox

Could have been a contender but I balked at the heavy graphic design.

FancyZoom

The one that started the search thanks to seeing it in action at this FontFeed article. Great tool – but as a webdev guerilla [read chimp] the commercial licence stopped me. Need a bit of slack before I can convince anybody to pay…

Slimbox walk-through

Upload css and js files – add these three lines of code to the head of the HTML:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

(The last slash there may want removing according to your doctype. Are you strict enough for it?)
Then craft the images links like this for single images

<a href="" rel="lightbox" title=""><img src="" alt="" /></a>

or, for sets, like this (where the rel attribute has the set name’s suffix)

<a href="" rel="lightboxset" title=""><img src="" alt="" /></a>

, , , , ,

No Comments

Encoding and embedding Flash video (FLV) for the web on a mac

Posted by admin in Web design & development on May 22, 2008

It’s taken quite a few hours of trial and error and things not working – but in the end it’s not too complicated. In essence getting your video onto a webpage is a two part process – encode into FLV format then wrap this FLV in a SWF viewer and embed in your webpage. The first part is best achieved ffmpegX with a helping hand from MPEG Streamclip if your source is a DVD VOB file. The second part requires finding a Flash player – more elusive than I had anticipated – and writing a wee bit of HTML code into your webpage.

Step one: prepare FLV video stream

Use ffmpegX. Its a really great tool but currently falls over with some QuickTime movies when the virtual stack of audio/video is the wrong way round – an “invert mapping issue”. I came across this problem when changing the soundtrack of an existing movie file. The work-around is documented here

What if the source material is on a DVD or a VOB file?

Use the free MPEG Streamclip and, perhaps, Apple’s twenny dollah QuickTime MPEG-2 Playback Component to convert your source into something QuickTime friendly. (Thanks to this Macworld article) The easiest and best quality option being “Convert to MPEG…” from the File menu.

Step two: wrap in a simple SWF movie and embed into your page

for the wrapper go see Jeroen Wijering for his “JW FLV Media Player” . His documantation is good. Then there’s always Free Video Coding for another helping hand to generate the code you’ll need. Beware the one issue I found here was that I couldn’t mix relative and absolute URLs. Example code (with relatve URLs) follows below…

<embed src="video-flvplayer.swf?file=YourMovie.flv&autoStart=true"
width="480" height="360"
quality="high"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">

Lovely.

[Edit]
Must look into swfobject it’s “easy-to-use and standards-friendly method to embed Flash content”…

, , , , ,

No Comments