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
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"
Saturday, June 7, 2008
Make Your Pictures POP!
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment