View Demo of Shadowbox in iWeb »

Step 1) Make a page in iWeb and add links to your media in one of the following ways:

Images: Drop an image on your page and enable as a hyperlink from the hyperlink inspector and link to “a file” and choose the same image (preferably a higher res version of the photo, at least 800 x 600).

SWF’s (Flash Files): Drop an image to represent the swf (could be an image, a shape, text, you could even launch your swf and do a screen capture (command + shift + 4) and drag over it to get an image to add in.)  Basically just get something that will be clickable that we can link to the swf.  After adding that image or whatever enable it as a hyperlink and link to the swf file itself.

HTML: Simply enable as a hyperlink your image, shape, text to an external page.

FLVs (Flash Video): Same as the swf, get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .flv file.

QuickTime: Same as the FLV and SWF.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .mov file.

WMV (Windows Media Video): Same as the FLV,SWF, and MOV.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .wmv file.

YouTube: Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to an external page.  Copy the you tube URL from you tube and paste it in URL field in iWeb hyper link inspector.  Then here your going to do one more step.  You need to alter the URL just slightly.  Your YouTube video code will look like something like this: http://www.youtube.com/watch?v=qKiIm5EcQ7A you need to alter it so it looks like this: http://www.youtube.com/v/qKiIm5EcQ7A, basically you delete the “watch?”, put a slash after the v, and get rid of the “=” sign. If you don’t do this your YouTube video for this effect won’t work.  So this is an important step for you YouTube users.

This effect works with many other video services like Vimeo, Google Video, Yahoo Video, etc.  For those sites you don’t need to alter the code like the YouTube, simply make a graphical representation for them and link them to an external page with the URL of the video in it.

Step 2) Publish your iWeb file to a folder, MobileMe, or FTP

Step 3) Download the Shadowbox .zip file by clicking the download link at the top of this page or click here ».

Step 4) Unzip the shadowbox.zip file (if your mac didn’t unzip it for you), and drop the folder called “shadowbox” into your site folder.  Not your page folder, your site folder.  You want the shadowbox folder to be right next to your html page.

Step 5) Open your html page (the one with your hyperlinks of course) with an HTML editor.  I prefer to use Coda, but again you could use an array of other ones out there (Espresso, TextWrangler, Even TextEdit)(if you use text edit be sure to check the checkbox in the textedit prefs that says ignore rich text commands in html files).

Step 6) Add this code before the </head> tag of your HTML page:

OR you could also just do a find and replace by finding:

</head>

and replace with

Where it says players, go ahead and delete any/all the players that you don’t need.  So for example if your not linking to an swf flash file, delete the ‘swf’, code.

Step 7) Find your hyperlinks that we created in iWeb in the html code here and add a

rel="shadowbox"

to your image links so it looks like this

<a href="myimage.jpg" rel="shadowbox" title=“Whatup”>My Image</a>

An easy way to find your links is to do a search for “title”, then you can spot the link code and put the rel=”shadowbox” right before the title tag.

For your video links you need to add a width and height dimension to it, so for all flv, swf, mov, wmv, html, and youtube like links you’ll need to add this code instead:

rel="shadowbox;width=640;height=480"

Just adjust the dimension to match your swf, webpage, or video. Here’s an example for a quicktime video.

<a href="mymovie.mov" rel="shadowbox;width=480;height=640" title=”My Movie”>My Movie</a>

You can also group items to together in a slideshow like way by adding a grouping text to all the shadowbox code you add to the links.  Here’s what it would look like:

rel="shadowbox[Group]"

Just be sure to add that [Group] to all the links you want to be connected.  You can have 2 or more seperate groupings by just making a different text group like [Group2], and add it to the other ones you want to group.

For YouTube videos you have to use this code:

rel="shadowbox;width=425;height=344;player=swf"

Same princible goes with adjusting the width and height for your YouTube video.  So your YouTube link would look something like this:

<a href="http://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"><img src="my_webpage_files/flash_in_iweb-youtube.jpg"

Step 8 ) While your in adjusting your links adding rel=”shadowbox” code, you should probably change your “title” code to say something more relevant than just the path to your file.  So where you see the title=”big_long_link_files/this_is_not_a_good_title.html”, change it to say something else like title=”Check out my cool photo” or whatever.

Step 9) Hit Save and your done! Yay!  Make sure all your files are online, test it out to make sure it’s working properly and your set.

There are many other options that you can add for advanced users that I won’t go into here, but you can check them out by going to http://www.shadowbox-js.com/options.html.

Note: Shadowbox can be used for free for non-commercial websites.  If you are going to use it for commerical purposes you must purchase a license.  You can do that by visiting their website at www.shadowbox-js.com.  Also included with the iWeb version of shadowbox that I have made is a JW FLV Player.  It also can be used for free for non-commercial websites.  If you use the JW FLV Player to play flv files for commercial purposes you must purchase a license.  You can do that by visiting https://www.longtailvideo.com/players/order2.

**Also note that this effect cannot be used with links using a shape or text box. Link only a true graphic (jpg, png, gif, etc) or link the text itself.

I know it can get a bit complex getting into the code, especially if you’ve never really dealt with html code much before.  But just take it slow and go step by step and you’ll get it.  If you mess up, just go back to iWeb and republish and you can start over.   I think this is the best of the popup effects cause it deals with all media formats so easily.  So I hope you enjoyed the tip and if you feel like this helped you in some way consider donating to the iWeb cause.  The more donations I get the more time I’ll put into making more tips like this.

Thanks for visiting iWebUnlimited.com

—iJason

View Demo »

Step 1) Download Lytebox by clicking here »

Step 2) Add images to your iWeb page and make them a hyperlink (as a file) to itself (the same image).

Step 3) Publish your iWebsite to a folder, iDisk, or server.

Step 4) Add the “lytebox” folder you downloaded in step one to the site folder (not the page folder)

Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor.  I like to use Coda (by Panic Software), but you could use TextEdit (if you check on ignore rich text commands in HTML files checkbox in the preferences of TextEdit), or Espresso, TextWrangler, etc, etc, there are a bunch.  Just something that you can edit HTML in.

Step 6) Right above the </head> tag in the HTML, paste these lines of code.

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

Step 7) Then find where your image links are and add a rel=”lytebox” in between the link and the tittle tag. For example, here is what your looking for in the HTML:

<a href="mypage_files/my_image.jpg"  title="Image Description">

Put the rel=”lytebox” inbetween the image link and the title tag so it looks like this:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">

Step 8 ) Save and that’s it your done.  You’ll have a cool image popup effect, similar to highslide or fancyzoom, but slightly different.

Options: (If you dare :-))

Grouped Images:

If you want to have the images scroll through with a cool next and previous button to the lytebox, then instead of adding rel=”lytebox” in between the image link and title tag, add rel=”lytebox[group1]“to each image link and there will be a neat navigation to cycle through the images.  Here’s an example of what the code would look like:

<a href=”images/image-1.jpg” rel=”lytebox[group1]“ title=”Image Description”>

You could have multiple sets on one page too if you change the group1 to something like group2 for all the ones you want in a seperate group and so forth.  Click the example button above for reference.

Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page.  So be sure to add images to the page in the order you want them to show up in the lytebox effect.

Lytebox Slideshow:

You can also have a little slideshow effect in the lytebox popup by using rel=”lyteshow[group1]“ instead of the rel=”lytebox” (single images) or rel=”lytebox[group1]” (multiple images).  So your link code would look like this:

<a href="images/image-1.jpg" rel="lyteshow[group1]" title="Image Description">

iFrame Content in Lytebox:

If instead you want a webpage in the lytebox effect instead of an image, then simply add a link to an external page (it could be one of your own pages).  Find the code in the html where your link is and add rel=”lyteframe” instead of the others above.

Note: When using this effect it only works with highlighted text links (not textbox links) and image links.  It does not work very well with iWeb shapes for links.  For those, use the Highslide effect.

When applying the Lytebox effect it will take a default width and height of 400px and scrolling is set to auto.  If you want to control how big the frame is for your iFrame then add this code in your title tag

rev="width: 400px; height: 300px; scrolling: no;"

Replace the items in the brighter red to the size you want and your set.  Here is an example of the full link code as an example:

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

You could even group pages together like we did with the images above by using this “rel” tag instead: rel=”lyteframe[group1]

Another note on doing this if your using iFrames on your iWebpage: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.  They are both found in the lytebox folder.

Browser Compatability:

This effect was built with browser compatability in mind, so it’s safe to say it works on most all browsers.  The following browsers have been tested with this script:

IE 5.01 SP2 – The fade effect does not work, but the background is darkened (completely).

IE 5.5 SP2 – No known issues.

IE 7.0 – No known issues.

Opera 9.23 – No known issues.

Firefox 1.5+ – No known issues, of course.

Safari 2.0+ – No known issues, of course.

End Notes:

Well that’s it folks.  Hopefully it’s not to crazy for you.  Like I’ve said in other posts.  I usually don’t like having to get into the HTML code after publish if possible, but sometimes to get a cool effect you just gotta.  So don’t work yourself up to much if you don’t get it the first time.  A simple republish in iWeb will let you start over and try again (though I recommend publishing from the File menu with the publish entire site option to get a clean full publish).

View Demo »

Highslide with Images |   Highslide with Flash Files |   Highslide with iFrames

To get started I will separate the tip into Images, Flash, and iFrames (which would include any other html page (websites, videos, youtube, etc)).  Here we go:

Highslide with Images:

Step 1) Add an any image(s) or graphic(s) to your page in iWeb.

Step 2) Open up the inspector and make it a hyperlink in the hyperlink inspector.  Choose to Link To: “A File” and choose the same image (so it basically it is linked to its self).

Step 3) Publish site to Folder, Server, or MobileMe iDisk – Whatever your method is.

Step 4) Download files. I’ve made a special iWeb version of Highslide to simplify things.

Step 5) Unzip the downloaded file called “highslide_iweb.zip” and you will see a folder simply called “highslide”.  Drop that folder into your published site folder (not your webpage folder).  When publishing iWeb makes a index.html file and your site folder (named whatever you named it in iWeb), this is the folder you want to drop this highslide folder into.)

Step 6) Open your favorite HTML Editor (Coda, Espresso, TextEdit) and you are going to find and replace the code below:

Find:

</head>

Replace with:

Step 7) Now we’re going to find and replace one more item:

Find:

title="pagename_files/imagename_1.jpg">

Replace with:

title="Click to Enlarge" onclick="return hs.expand(this)">

When it says “pagename” that means whatever the title of your webpage you are doing this one in the sidebar of iWeb and imagename is the name of the photo you put on the page.  If your not sure what these names are, you can go back into iWeb and take a peek.  Here’s where you will look.

So for example if I was wanting this effect on my page called “iweb09” in my sidebar and my image was named “myimage.jpg”, then my replace code would be:

title=”iweb09_files/myimage_1.jpg”>

Important Note: If you are linking to a shape made in iWeb take off the “>” tag at the end of the search and replace. If you are linking an image to text get rid of the “_1” at the end of the find code.

Basically your are replacing the “title=…” tag of your items.  So if your having a tough time finding the right items to replace just do a search for “title” and copy that whole line “title=”mypage_files/myimage_1.jpg”>” and paste it to replace with the other code.

Step 8 ) Save your modified html file online and your good.

Highslide with Flash Files:

I’m going to go through the flash one a bit faster assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Make flash file (Adobe Flash, Keynote, Bannersnack, etc) be ready to link to it on your hard drive.
2. Make or get an image or button to represent that file (this will be your button.  It could be anything really, text, shape, image, etc) and put it on your iWeb page.
3. Link image/button to .swf file from the hyperlink inspector as a “A File”
4. Publish site
5. Add “highslide” folder to published site folder
6. Open your html page with HTML editor and find and replace the following code:

Find:

</head>

Replace with:

7) Now find and replace these:

Find:

title="pagename_files/flashfile.swf">

Replace with:

title="Click to See Flash" onclick="return hs.htmlExpand(this, { objectType: 'swf', width:300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your Flash player'  } )">

8 ) Replace the items in red with your page name, flash file name, file width (twice), and height.
9) Save your page make sure it’s online and your set.  It looks pretty cool.

Highslide with iFrames:

Again I’m going to go through this one fast assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Create or Find your webpage that you’ll be iFraming in the highslide zoomer and put it online.
2. Make or create an image or button or text that will pull up this iFrame when user clicks on it and make it a hyperlink in the inspector to “An External Page” and type in the full address of the page (example http:www.iwebunlimited.com/iwebtips/iwebtips.html)
3. Publish site
4. Drop “highslide” folder (downloaded from above) in published site folder
5. Open html file with html editor and find and replace the following code:

Find:

</head>

Replace with:

6) Then find the following code and replace it:

Find:

title="http://www.yourlinkyouadded.com">

Replace with:

title="Click to Enlarge" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

7) Replace what’s in red with the size your want the highslide to be and the page you linked to. Save online and your set.

Note: If you have a page that has all of these items images, flash, and iFrames.  Use this code to replace in the <head> tags as the first thing you replace

Find:

</head>

Replace with:

Then replace the second one’s with the ones above in their sections with their links.

It makes for a pretty neat effect.  Hope you find it helpful and if your not very comfortable using external editors, just take it slow, be very careful of your code and if you mess up, no big deal, just republish from iWeb and it’ll be brand new again to try again.

Back to Top

FancyZoom in iWeb

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

VIEW DEMO »

Step 1:
Drag a photo onto your iWeb page that you would like the photo fancy zoom to be on.

Step 2:
Click on your photo, and head to the hyperlink inspector and make the image a hyperlink. Where it says “Link To:” choose “A File” and find your same photo that you dragged onto the iWeb page.

Step 3:
Now your done with the iWeb part. Now publish, either to a folder or to MobileMe.

Step 4:
We now need to do just 2 more things. First download this .zip file.

DOWNLOAD FANZYZOOM .ZIP FILE

Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:

If you published to a folder:
Find the web export folder that you published to and you will see inside a index.html file and a folder which is the name you gave your site. Drag the “fancy-zoom” folder into that site folder.

If you published to MobileMe:
Open up a finder window and go to the iDisk. You are then going to search for the “Web” folder, then go into the “Sites” folder, and in there you should see a folder named the name that you titled you site in iWeb. Drag and drop this fancy-zoom folder into that folder (it may take a while depending on your internet connection).

Step 5:
Almost done. We now just have to alter some code. Now don’t get scared quite yet, it’s not to bad. In that same folder that we dropped the fancy-zoom folder you will find a bunch of other files including that page that you want to have your fancy zoom on. Find that html page that you added the photos to and we need to open it up with something that allows you to edit html code. I personally use “Coda” by Panic Software, they even have some trial version so you can try it out or just use it till you get your fancy zoom going. Anyway, you can also simply use TextEdit on your Mac. So here’s what you going to do. Find that .html file, right click, choose “open with” and choose your html editor, it will say TextEdit or Coda or whatever you choose. You will then see all the great code that iWeb users typically try to stay away from, but we just need to alter 2 lines of code. Both Coda and Text Edit have a Find and Replace feature. So press command + F on your keyboard and you’ll get the find and replace window. Simply find and replace these two things:

1) Find:

</head>

Replace:

<script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>

2) Find:

onload="onPageLoad();"

Replace:

onload="onPageLoad(); setupZoom();"

Then just save (command + s, or File > Save).

Done!

Now that wasn’t so bad eh?

From there you should have a fancy, shmancy zoom that will look great and it will also work on the iPhone. Pretty cool, eh.

Note: You can only use FancyZoom on none commercial websites, if you would like to use FancyZoom on a commercial site you must purchase a license for $39 on Cabel’s Blog (the creator of FancyZoom)

More Notes:

If you are looking to do other things with FancyZoom here are some tips:

• If you want to replace the Title below the photo then, do a search for href and find the title it’s using and change to what you want. Example title=”Add Your Title Here”

• If you want to get rid of the title entirely just Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”

• If you want to add a border on the popup just add something like a 10px border on the image by adding the following at line after 63 in FancyZoomHTML.js: inImage1.style.border = ‘10px solid white’;

• FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

• There is not a way to put anything else but photos into the fancy zoom, so no videos, flash, etc. But I’m working on another tutorial to use another method so you can get video and flash in them, check back.

Pop Up Windows in iWeb

Opening certain small windows on a page can be very helpful and convenient. As long as the content of your pop-up window is relative to your site, visitors don’t mind the pop-ups, it’s when it’s for something unrelated to your site, like an “ad” of some sort, that visitors don’t like them.

See Demo

Step 1:
Create a new page page in iWeb that you want to be your pop-up window. Usually it’s smaller so you might want to make your page size something like 400-500 width and 600 height. You can change the sizes in the Page Inspector under Layout (take into account your headers and footers).

Step 2:
Finish your design of how you’d like your pop-up to look and jump to the page where you want to button for the pop-up to be. Get an HTML Snippet and paste this code into it.

<script type="text/javascript">
function open_win()
{
window.open("http://web.mac.com/username/sitename/pagename.html", "_blank", "toolbar=no,  location=no,  directories=no,  status=no,  menubar=no,  scrollbars=no,  resizable=no, copyhistory=yes, width=490, height=600") }
</script>
<form>
<input type="button" value="View Pop-up Window" onclick="open_win()"> </form>

Step 3:
Change the items in RED and hit apply.

You need to be sure that the URL is the exact location of your pop-up. If your pop-up is within a blog, or a My Albums page there might be a few more folders you’ll have to type in for example:

http://web.me.com/username/sitename/myalbumpagename/pagename.html

From there just decide if you want scrollbars, and other things that say “no”, just change to “yes” if you want them. Also change the red text at the bottom of the code to be what you want the button to read.

Step 4:
Publish and your set. Be sure to try it out before inviting anyone to view your site.

Good luck with it and have fun.

To use your own images:
If you’d rather have your own image for the button, put your button graphic (jpg, png, gif, etc) on your server somewhere and use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com', 'Open Link', 'height=640, width=500, scrollbars=no')"><img src="http://www.yoursite.com/imagefolder/yourbutton.png"style="border:none;" ></a>

To Use Text:
If you’d rather use text instead of a form button or your own button use this code:

<A HREF="javascript:void(0)"onclick="window.open('http://www.iwebunlimited.com/examples/popup.html', 'Open Link', 'height=600, width=500, scrollbars=no')">View Pop-up Window</a>