Wednesday, June 18, 2008

Press Release: Soundwave Joins Cast of "T & M's Voices"!

For Immediate Release:

This week marks the announcement that Soundwave has joined the cast of "T & M's Voices" radio show as a fill-in co-host, while long-time beloved co-host Tit-o is off on assignment.

While Episode 8 served as an introduction to the popular blogger for the show's loyal listeners, the upcoming episodes will get back to the business of producing high quality, entertaining, and thought provoking internet radio episodes.

Soundwave brings his knowledge of cutting-edge recording technology with him to a show that is renown across the internet for its high calibre interviews with world leaders.

"We are really glad to bring Soundwave on board during this slow time, while Tit-o is out of the studio for an unknown amount of time," co-host Magnum was quoted as saying, "We are excited to bring a new element to the Show. We have already begun experimenting with new recording techniques that were just not possible a short while ago. We will be breaking new ground on many fronts in the upcoming months."

Soundwave also shares the show's excitement and optimistic outlook for the show in the following months.

"This will be a new challenge for me. Writing a blog is pretty simple when you get multiple chances to review what you've written, but on a radio show you've only got one shot. Once something's said, its out there... you can't deny it or take it back. We are going to do some big things, just get ready!"

Fans of both sites can catch Soundwave's premier episode on the show right now, just follow the link:

Season 3, Episode 8: Inside Mission Control

"T & M's Voices" is a production of the CSAL Radio Podcast Network, a subsidiary of ShureShot Media Inc.

"Don't Cross the Streams" is an independent blog published regularly on a monthly basis.

"Bringing you the Truth, with talent on loan from God" copyright ©2006, Shureshot Media Inc.


"bah weep graaagnah wheep ni ni bong"

Saturday, June 7, 2008

Make Your Pictures POP!

I have been working very hard to bring you the coolest web technologies to help bring some pizazz to your websites. I try to beta test code on this site, and then bring a tutorial to you on how to make it work.

Today I bring you the coolest javascript code that I have seen in a long time, HIGHSLIDE.

For a full description of what HIGHSLIDE can do, visit the site at the hotlink above. Here is but a taste of what this amazing script can do. Below is an array of images. Click on one, it should blow up over the site (if it takes you to a new page to view the image, then you are being blocked from my repository). You should also be able to click and drag the pictures around. Now press the left and right arrow keys, you should be progressing through the images. Now click on several images, they should all expand. Click on the expanded images to shrink them back.







How do you implement this awesome code into your own site? Well follow the instructions below.

1) Get a content repository.

You need a file host that will allow you to create folders and subfolders that are referenced in the file's URL's. Googlepages will not work. The javascript files assume everything is in a given hierarchy and you need to create folders. I use http://www.fileave.com/ and so far it is working out very well.

2) Download the latest HIGHSLIDE files.

Get the latest HIGHSLIDE files and save them to the desktop and extract them with winzip. This will give you a folder with several subfolders and files. The HTML files and Flash.swf are part of the examples and can be deleted if you want to, or you can double click on index.html for demos. All you need to keep is the highslide folder and the subfolders and files.

3) Upload the folders and files to the repository

Create a highslide folder in the root of the repository and keep the folder structure the same as it appears in the desktop folder.

4) Paste the following code into your page

Paste this code in the <head></head> section of your site. For Blogger, I have had the most success putting it immediately after the <head> tag.

<!--
    1 ) Reference to the file containing the javascript.
    This file must be located on your server.
-->

<script src='<url to your repository>/highslide/highslide.js' type='text/javascript'/>

<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type='text/javascript'>    
    hs.graphicsDir = '<url to your repository>/highslide/graphics/'
    hs.allowSizeReduction = false;
</script>

<!--
    3) These CSS-styles are necessary for the script to work. You may also put
    them in an external CSS-file. See the webpage for documentation.
-->

<style type='text/css'>
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
cursor: url(<url to your repository>/highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid silver;
}

.highslide-wrapper {
background: white;
}
.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-loading {
    display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
    text-decoration: none;
padding: 2px;
border: 1px solid black;
    background-color: white;
    
    padding-left: 22px;
    background-image: url(<url to your repository>/highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}

a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
background: url(<url to your repository>/highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}

/* These must always be last */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
</style>


Replace the with the actual URL to your repository.

5) Add your images

Add your images with the following code:

<a href="large-image.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="thumbnail.jpg" alt="Highslide JS"
        title="Click to enlarge" height="100" width="100" />
</a>


And Voila! your images should be ready to jump out of the page!

If you review the example pages and the website, it will help you to develop other cool things that you can do with this code!

So, if you have a particularly cool implementation on HIGHSLIDE that you want to show off to the world, post a comment to this article with your URL so other Stream Crossers can enjoy your site as well.

Until next time, this is Soundwave signing off!

"bah weep graaagnah wheep ni ni bong"