iWeb Tip #14 – Highslide JS in iWeb

75
30790

Highslide in iWebHere it is, finally a fancy zoom that will allow us to get not only images, but flash, video, and other html content.  So first let me answer the question, what is Highslide JS?  Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I did 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 you will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit.  Just as long as you have some way to edit the html after iWeb publishes.  I try to do as many tutorials trying not to get into post published html, but sometimes you just gotta do it to get the desired effect.  So here is an easiest way I’ve found to get it into iWeb.

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:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.graphicsDir = 'highslide/graphics/';

</script></head>


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:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<script type="text/javascript" src="highslide/swfobject.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.preserveContent = false;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.graphicsDir = 'highslide/graphics/';

</script></head>


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:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.graphicsDir = 'highslide/graphics/';

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.useBox = false;

hs.width = 600;

hs.height = 450;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

</script></head>


6) Then find the following code and replace it:

Find:

title="https://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:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<script type="text/javascript" src="highslide/swfobject.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.preserveContent = false;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.useBox = false;

hs.width = 600;

hs.height = 450;

hs.graphicsDir = 'highslide/graphics/';

</script></head>


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

75 comments

  1. Jaza 19 July, 2010 at 04:32 Reply

    When I try to copy the highslide folder to my site folder on my mobile me account I receive an error when the highslide.css and the swfobject.js files try to be copied over. “The Finder can’t complete the operation because some data in “highslide.css” can’t be read or written.
    (Error code -36)”

    I’ve tried to copy over the Lytebox files and I receive the same error. Can anyone tell me what im doing wrong?

  2. iJason 19 July, 2010 at 12:16 Reply

    Jaza, it’s possible that your server doesn’t have the correct read/write permissions. If you connect to your server in something like Transmit, you can press command + i and you can see the read/write permissions. I’d put your read/write permssions to something like Octal: 755.

    If your not familiar with all this you may want to contact your hosting company to make your server have the appropriate read/write permissions.

  3. Jaza 19 July, 2010 at 16:58 Reply

    Hi iJason,

    I’m trying to copy over to my mobile me account, so I dont see why I would have a permissions problem. Furthermore, the graphics folder and highslide-full.js file come across no problem. Many thanks in advance… i’d really like to get this feature working on my site!

  4. Chris 28 July, 2010 at 07:59 Reply

    Hi there, firstly, thanks for this! This is brilliant… but… how do I add the gallery feature to this too? Is it possible at all?

    Thanks

    Chris

  5. Neeltarni 28 July, 2010 at 23:44 Reply

    In Highslide for images. What page tag are we editing. I assumed it was the page I wanted to put this on but it wont open like HTML with text edit. Any suggestions??

    Thanks

  6. Apolloclipse 25 August, 2010 at 18:53 Reply

    Hi, I am having trouble with the iFrame steps. When you instruct us to open the html file and replace , which HTML file are you referring to? After that step, you instruct us to find title=”http://www.yourlinkyouadded.com”>. Where is that code located? I could not find it in any of my index files. I publish my site to a GoDaddy server, so I am accessing the files through Fetch. I am using iWeb 09. Thanks for your help. I can’t wait to see the results,
    Apolloclipse

    • iWebUnlimited 26 August, 2010 at 09:02 Reply

      The code your looking for is in the iFrame code itself, not your index file. This is not a post publish tip. You just replace the link in the iframe code that you want to iframe.

      • Apolloclipse 26 August, 2010 at 14:19 Reply

        Ok, I’m still missing something:

        “Open html file with html editor and find and replace the following code:”
        Which specific HTML file are you referring to?

        “Find title=”http://www.yourlinkyouadded.com”>”
        Where is the iFrame code located? I searched the .js highslide files, the page html file, and the code written above.

        Thanks.

  7. Dan 3 September, 2010 at 12:32 Reply

    This is great! How can I do multiple images? I want the user to be able to click on one image then advance through them instead of opening and closing images individually. Is that possible?

    • rob 27 September, 2010 at 06:41 Reply

      Hi Dan.

      I’ve tried this and it will work on the following ;

      All pages shown within the highslide window should be the same size

      Links can be added directly within the pages you make –

      or –

      you could give individual image links to each page on the main page and give all the [group tag] –

      have a main link which launches the first page in the highslide sequence and all links with a [group tag] should follow in sequence and navigation can be done with the controls on the highslide window.

  8. Apolloclipse 7 September, 2010 at 06:34 Reply

    Successful! Sometimes…In iWeb 09, using Snow Leopard, I am unable to assign a hyperlink to a text box or a shape using any style of Highslide. I am only able to assign a hyperlink to a picture. Any idea why? The only pattern i found is that there is no > after title=”pagename_files/flashfile.swf”> in the HTML file when I have assigned a hyperlink to a shape or text box.

  9. Danny 26 September, 2010 at 19:32 Reply

    just a quick question, when I add the Highslide folder, or any other such folder like Shadow box to my site folder, every time i update my page and republish it, the folders disappear from my site folder and all the old code that i did to make the Highslide or Showbox effects work disappears as well. Is that normal?? do I have to re-do all the code every time i republish the site??

    • Filipe 31 October, 2010 at 19:04 Reply

      Hi. I tried this tutorial today and I got it working. But now I’m thinking exactly the same thing as you.
      Does this mean that every time we update our site thru iweb, we have to redo all the replacements again, since it overwrites our .html page file?

      Any help would be great.
      Thanks.

      • UI Guy 22 May, 2011 at 19:38 Reply

        Hey, guys,

        Not sure whether you every figured this out, but I just answered your question in a later comment (currently on page 3 of the comments). Basically when you re-publish, iWeb completely rewrites anything that you’ve edited in iWeb and removes anything that it didn’t put there. See my answer to “Aver” for a solution to part of this hassle…

  10. purvs 1 October, 2010 at 09:09 Reply

    Hi,
    this is a great website. is there anyway in which I could change the rounded white border/frame to a square one?
    Thanks again for a very helpful website.

  11. Cassandra Hearn 23 November, 2010 at 12:00 Reply

    Hello,
    I’ve been trying to implement this function for about 3 hours now, and I’m not sure why it doesn’t work. I’m a very elementary level HTML user, so maybe I’m just missing the obvious. I’m trying to use a shape to expand out to a photo. I have successfully completed steps 1-6, but when I add the last bit of code, I seem to fail. I know what my file is named (, and I know what the page root is… but am I supposed to put the image name where (this) goes in the last step? I want my image called “Holiday Text DUI Image.jpg” to open when a user clicks on my shape that says “Click here to save $300.” Instead, all I get when I click on the shape is a link to the image, not an enlarged image. See: http://www.cassandrahearn.com

    Here’s what my code looks like:
    alt=”Click here to save $300″ title=”” />

    Please help if you can. :)
    Thanks!
    Cassandra Hearn

  12. m mosher 30 November, 2010 at 14:03 Reply

    I have followed the instructions many times and I can not get the iframes to work. I am trying to get a vimeo video as an iframe into the highslide. I also dont see a place to paste in my embed code from vimeo as well ? Any help would be grerat.

    Iweb latest version on 10.6.4 and highslide downloaded from your site.

  13. Emma 17 December, 2010 at 12:23 Reply

    Can someone help me please??

    I am designing my website on iweb. I have a collection of images that I want to display as thumbnails, and then when you click on the thumbnails, they appear as larger versions on the SAME page. Without popping up in different windows. I don’t want any fancy zooms and shade boxes and high slide or any of that. Just simple and plain.

    The gallery and photos template in iweb are not the templates I want.

    Does anyone know how to do this?

  14. Eric Chen 6 January, 2011 at 10:01 Reply

    Hi iJason, brilliant job there.. does it mean that I need to copy and paste the highslight folder back to idisk after each time we click on “publish site”?

  15. Katya 13 January, 2011 at 08:32 Reply

    Hi Jason. Thanks very much for your videos, has totally opened my mind to all the different things you can do in iWeb. I am however a complete novice at code and am having trouble locating the highslide.html file as it does not seem to be contained within the download file. Can you please give me a hint as to where I can find it so I can then edit it in textedit as I have created a contact form for my website with jotform and want to use highslide with iframe
    Thanks again. Katya

  16. Aly 24 January, 2011 at 15:27 Reply

    I’m a bit confused…. I am trying to add highslide with images on my Photos page, but it seems that it says to replace 1 thing with 2 different things… that being the title…. it says to first replace it with:

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

    then it says to replace with the page name/image name……

    neither seems to be working…..

    Help!

  17. Dhouglas 15 February, 2011 at 19:11 Reply

    Hey Jason,

    You are great, man! But as I don’t use Idisk or mobile me, it’s been impossible to do some of the things you’ve taught. : S

    I don’t know where to find the HTML code to sub and my server won’t let me upload the highslide file completely I have to archive by archive. which I don’t wether will work.

    Please gimme a help, I am dummy in HTML codes and webdesign sites and I really need to pimp up my website.

    Thanks

  18. Israel 18 February, 2011 at 00:08 Reply

    Anyone know a code to make iframe with option to resize (for users on the internet)? I plan on having multiple iframes on my site, some small to collect data such as name and email and others with much more info such as a “employment” iframe and so on

    Thanks in advance!

  19. Israel 27 February, 2011 at 04:18 Reply

    Nevermind on that last comment (above from this one)… But on a different note, on the highslide with image code that you provide at the vert top of this page, how do we insert the “Mac style” close button to it? I haven’t been able to figure it out……. Thanks in advance!

  20. Michael Lam 3 April, 2011 at 17:03 Reply

    Have just tried for so many times… still fail…

    I want to do iFrame.

    I hyperlinked it, published it, uploaded the HS file to iDisk, open the html with coda, but, I just couldn’t find the title as taught.

    Instead, it appears as :

  21. Michael Lam 3 April, 2011 at 17:04 Reply

    title=”http://www.jotform.com/form/10910818574″ alt=”http://www.jotform.com/form/10910818574″ coords=”4, 4, 174, 80″ />

    I cannot find a title=”thewebsitelink” finished with a >

  22. Lorenzo Ferner 13 April, 2011 at 07:55 Reply

    I would like to thnkx for the efforts you have put in writing this site. I am hoping the same high-grade site post from you in the upcoming also. Actually your creative writing abilities has inspired me to get my own site now. Really the blogging is spreading its wings fast. Your write up is a good example of it.

Leave a reply

Facebook
Twitter
YouTube