Feb 21

Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I’ve done in the past. The difference is, is that this one will give you the ability to zoom more than just images. Though FancyZoom is a bit more light weight, there are some great advantages to Highslide. This tutorial will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit. You’ll also be using the tips page for the code reference and download which can be found here.

Feb 21

So your iWeb is getting pretty packed with pages and multiple sites and maybe even your band asked you to create a website for them and you don’t want to combine it with all your personal webpage files in iWeb. How do you create a whole new iWeb file and jump back and forth between your sites. Well this video shows you all of that. You can have as many iWeb files as you’d like. iWeb has no file>open option so learning this trick will help you make multiple sites and be able to jump between them as you please.

For OS X Lion Users

If you’ve install OS X Lion on your mac then you’ll need to do this a bit differently.  Simply download my application below and every time you launch it Lion will ask you to choose your iWeb domain file that you want to open.  Enjoy!

Download iWeb Launch App »

Feb 21

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.

Feb 21

This tutorial shows you how you can use Keynote from the iWork family to enhance the graphics in iWeb. Take a look.

Feb 21

This tutorial will show you how to make different parts of your image clickable.  Great if you want each head of a family photo to go to a different page, or a sports team photo, or many other possibilities.

Feb 21

Trying to get flash video into iWeb eh? You can’t bring it in like you do a regular flash .swf file. Flash video extension is .flv and it can’t work without some sort of .swf player to go with it. This video shows you some tricks to get flash video into iWeb. There are quite a few different options and this tutorial will show you how to get your flash video in iWeb in many different ways.

Here are the steps below:

VIEW DEMO »

Step 1:

Get video you desire to be a flash video and convert it to .flv format if it’s not already.

How do I convert my video to flash video you ask?

Well there are a number of different ways.  You are going to need one of these converter below:

  • Adobe Media Converter (comes with CS4 or Flash Video Encoder from CS3)
  • Visual Hub (no longer in development, but if you got it while it was out, lucky you)
  • Aimersoft Video Converter ($65)
  • Perian QuickTime Plug-In + QuickTime Pro (Perian is free, QuickTime Pro is $29)
  • SoThink FLV Converter ($45)
  • FFMpegX (Free, but it requires some external file installations, they make it a little difficult to get, so here it is made easy by me.  Click here to download the app and here to download the extra files.  Your welcome ;-).  You can get instructions and more info on the software here. After you open the .dmg file and drap application to your app folder and launch the app it will ask you to locate 3 files to add onto it.  They are the ones I provided.  I would recommend moving them to home folder/library/application support/ffmpegx (you’ll make this folder)/put 3 files here that were in the .zip folder here.  Then in the FFMpegX App you’ll know where to find the 3 files to install and they’ll be in a safe place where no one will touch them.  Hope that makes sense.  If it sounds to complex, just go buy one of the other converters above to make life easier for you.)

Which ever converter you use, just convert that video file to a .flv format.  So in a nutshell, step one is convert video to .flv

Step 2:

Download the Longtail Video JW player by clicking here»

You’ll be downloading a .zip file.  Double-click to open and inside you will see 2 files; one called “player.swf” and the other “swfobject.js”.  We will need these files to make this work.  So now we should have a total of three files

  1. Our .flv flash video we converted in step one
  2. player.swf file
  3. swfobject.js file

We just need to do one more thing and we’re ready to roll

Step 3:

We’ll need to have an image that will sit there until the user decides to click play.  So just export out a frame of your video.

It might be easier to go back to your original video to export out the frame.  You can do this in QuickTime pro, iMovie, Final Cut, and many other apps.  Or if you want to make it simple, just play your video, stop it on a frame that you would like to be your hold image and do a screen shot.  You can do a screen shot by pressing “command + shift + 4” on your mac, then draw a box around the frame of video your holding on.  When you let go you’ll have a new .png still frame  on your desktop.  We are going to use this to be the video preview.

You should now have four files.  Fyew.  These are all the files we need and we are ready to roll.  So we should have these four files

  1. Flash Video (our .flv video we converted in step one)
  2. “player.swf” (file we downloaded in step 2)
  3. “swfobject.js” (file we downloaded in step3)
  4. Preview image (file we created in this step.  You should name it preview.png)

For file size reasons you may want to open that image you created in step 3 in the application “Preview” and choose file>save as and save it as a jpeg image and bring the image quality down a bit so that the file loads quickly on the web.  Just a suggestion, if you have photoshop you could choose file>save for web and size it down that way too.  You can use a .png file or a .jpeg file for this

Step 4:

Now put those four files (.flv, .swf, .js,(.png or .jpeg)) onto the server, meaning your iDisk or your own ftp server.  If your using MobileMe I’d recommend making a folder called flash in this location: iDisk/Web/Sites/flash/put 4 files here. Just make sure you have these 4 files on your iDisk or server all all will be well.

Step 5:

Almost done.  All we need to do now is use the below code in an html snippet and replace the items in red with our own server path names.


<script type="text/javascript"
src="http://web.me.com/yourusername/flash/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://web.me.com/yourusername/flash/player.swf','mpl','720','480','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=http://web.me.com/yourusername/flash/yourflashfile.flv&image=http://web.me.com/yourusername/flash/yourimage.jpg&stretching=none');
so.write('player');
</script>

Just replace the items in red with the path that goes to your files on the iDisk replacing the appropriate names to point to the right place.  So be sure to put in your MobileMe username and your correct flash video name (yourflashvideo.flv) and your preview image (myimage.jpeg or myimage.png).  Also be sure to adjust the width and height of your video with the 2 numbers that are red in the code.  Once it’s all updated and you have all your links pointing to the right spot, hit “apply”.

Done!

We now have flash video in iWeb successfully! Yay!

Hope it wasn’t too complicated for ya.  Just do it a couple times and you’ll have it down in no time.  There is a video I made that will walk you through this too if you’d rather look at that.  Just got the Video Tutorials section and it’s all about flash video.

Note: You can use Longtail Video JW Player on your site for free as long as your not selling anything, have ads on your site, etc.  If you are doing those things you need to purchase a license.  It’s €30 (Euro) which is about $41 dollars.  You can purchase a license here»

More Notes:

If your wanting to customize the JW player, they have a nifty little embed code creator that you can tell it what paramaters you want to be set.  Click here to go to it.

Feb 21

This tutorial will show you how to get more advanced navigation in iWeb. Navigation such as custom rollovers, drop down menus, and more. It’s the ultimate tutorial on getting a new navigation that goes far and beyond what the default is offered in iWeb. It’s a must see for any heavy iWeb user.

Feb 21

This tutorial from iWebUnlimited.com will help you learn how to add a website to go inside of your website in iWeb. Very useful if you want to load a page into iWeb, such as putting in a form, your facebook page, myspace page, etc. Use this tutorial to show you how.

Feb 21

This tutorial  will show you how to get files created with Adobe Flash (.swf) into iWeb. By using a little code.

Feb 20

Scrolling Text in iWebScrolling Text in iWeb

There are times when your web design gives you little space for a lot of text.  That’s where this tip comes in handy.  This little bit of html in a snippet will allow you to size your snippet to really whatever size you want and the text will be scrollable  inside.  I’ve even added a bit more advanced code at the end that will allow you to add an image, a link, and more.  The user just uses a handy inline scrollbar to read your text and works very nice.  The other option on this page is to have a auto-scrolling text box.  I have one to scroll horizontally and another to scroll vertically.  They have a lot of options to adjust the speed, direction, font, color, etc.  So let’s get started.

See Demo »

1) Add an HTML Snippet to the page you want your scrollable text box to be.

2) Then paste this code into your HTML Snippet:

<div style="height:425px;width:300px;color:#000000;font:13px/16px Verdana;overflow:auto;">
<font color="004080"><strong>This is my title</strong><br></font>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>Another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
These tags below add breaks from one paragraph to the next
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
<font color="004080"><strong>This is another title</strong></font><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
<br><br>
You could even add an image to it if you add this code:
<br>
<img src="http://www.iwebunlimited.com/images/iweb.png" alt=“iWebUnlimited” />
<br><br>
If you want the image to be on the left and the text on the side use this code:
<div style="height: 0px; left: 0px; position: relative; top: 0px; z-index: 0; ">
<a href="http://www.iwebunlimited.com" target="_blank"><img src="http://www.iwebunlimited.com/images/iweb.png" alt="Image Title" style="border: none; " /></a>
</div>
<div style="left: 65px; position: relative; top: 2px; width: 200px; z-index: 1; ">
This is my text that is along side an image in a scrolling textbox in iWeb.  Pretty cool huh.  Pat yourself on the back and call yourself an html coder.  You can even make a link in here if you do this: <a href="http://www.twitter.com/iwebunlimited" target="_blank">Here's my link</a>
</div>
<br>
<br>
That's all folks
</div>

3) The code in red is where you’ll make adjustments to your own code for your own design specifications and the text in blue is the paragraph text you’ll put in.

4) After making your changes hit apply, publish, and your set! ;-)


Auto-Scrolling Text Boxes:

If you want an auto-scrolling text box then use this code below:

Horizontal Scrolling:

<div align="center">
<font color="000000" size="4" face="Verdana"><marquee bgcolor="transparent" direction="left" loop="true" width=100%"><strong>I Love iWebUnlimited.com's tips!</strong></marquee></font></div>


Vertical Scrolling:

<div align="center"> <marquee bgcolor="transparent" scrollamount="3" direction="up" loop="true" width="100%"> <center> <font color="#000000" size="4" face="Verdana"><strong>My Scrolling Text Title</strong><br>I love iWebUnlimited.com's tips and Tricks.<br><br>This below is just some jabber text to show you what it would look like if there was a lot of text here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.<br><strong>iWebUnlimited.com</strong></font> </center> </marquee></div>

That’s it, hope that helps.  If iWebUnlimited.com helped you please consider donating by hit the donate button on the sidebar.  Thanks for visiting iWebUnlimited.com.

—iJason



Tagged with:
Feb 20

Redirect Pages in iWebRedirect pages in iWeb

This tip shows you how to redirect a page to another page.  There are many instances where you might find you’ll need to redirect one page to another and this tip will show you how.  One example might be if you are using iWeb built in auto navigation and you want one of the links to actually go to an external page.  Another example may be that you’ve posted a page and many people are linking to that page from other sites, so you need to keep the same page up to keep the link, but you actually want to redirect them to another page.


So here is how to redirect your page to another page:

1) Go to the page that is going to be the redirect page.
2) Add an HTML Snippet onto your page and paste this code:

<script type="text/javascript">
parent.location.replace('http://yoursite.com/yourpage.html');
</script>

3) Then simply change the URL in the code to the page you want the page to be redirected to.
4) Then hit apply and your set.  You’ll find that once you publish your site and visit that page it will automatically redirect to the page you specified in the code.

Sometimes you want to redirect to another page after some time.  For example if you are redirect a user to another site you could send them to one of your pages that says something like “You are now being redirect to AnotherSite.com” then after 3 seconds or so it automatically directs them to the page.  To do that do the same steps as above, but simply paste this code below in an HTML snippet.

<script type="text/javascript">
var url ='http://yoursite.com/yourpage.html';
var delay = 3;
var d = delay * 1000;window.setTimeout('parent.location.replace(url)', d);
</script>

Then specify the URL and how long you want the redirect to delay and you’re set.

Hope that helps.

Tagged with:
preload preload preload