Video Tutorial-Highslide in iWeb
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.
OMG!…. Thank You for this website, I learned more in 30 minuets than I have in 3 months. I didn’t really understand the limitations before I started using iWeb, but i certainly didn’t have the time to learn Dreamweaver either.
Will be sending you a donation…. Thank You!!!
Thanks in advance for the donation Tony. Glad you like my site.
—iJason
I dont see the files that i web make????????
Alejandra, you need to set where the iWeb exports the site (Local Folder, MobileMe, or Server). You set this by clicking on your main site in the sidebar.
I have buttons with a rollover that I made using your rollover tutorial- how do I get them to be interactive to the swf and use your code that you have shown me?
What special considerations would I need to make to prep the button because the images that are represented in them are an HTML snippet…..
Thanks! your site has been a huge help….
he man,
I’m having the same problem, do you already found a solution to link your rolloverimage to highslide?
Dreamweaver has been for a while my goto program for a long time. I really don’t know what I would undoubtedly do without it. There were moments when I initially begun using the application, and I thought it was way too complicated. Now I fly around it, and it has turned into a great asset in my personal tool box. Anyways thanks for the information.
You are incredible sharing all this great information. I watch other site for iweb workarounds but yours is much clearer for someone learning these things.
Thank you and will give something for your work and efforts. When will apple make an iweb pro app? In the meantime we have you, thanks again!
Sonny
why you use capital letters? its like you are screaming!
Great article! I bet a lot of work went into this post.
Remarkable to have all this information available. Thank you so much for this immense help. Unfortunately I am not able to make highslide work on mobileme. Though it works like a dream if I follow your steps and save it as a folder. Something I am doing wrong? Look forward to your reply. Thanks.
Is it possible to do both a rollover and highslide within the same site?
First off…thanks so much for all your tips. They are priceless.
Second…i’m trying to do any of these shadowbox effects on our site. I publish to an FTP folder through GoDaddy.com and I can’t figure out where to drop the downloaded file to. Do i do this into my GoDaddy.com files? Any help would be appreciated!!
Thanks!
M
Thanks for the tips! Your site is great!
I’m new to iWeb, but very serious about learning how to use it. I can’t figure out how to make the iWeb files show up on the desktop (like Alejandra above (can you be more specific with the feedback?)). Can you perhaps tell me step by step how to get the files to be published to the desktop… I just don’t know how.
Thanks!
Update: I figured out how to do it when publishing the site to the desktop. However, I publish my site to an FTP server, Where do I find the same folders now?
Update: I got it to work! I had to use an app called transmit that can be found at http://www.panic.com/transmit/ to actually get into the page files of iweb.
Gracias for the tips!
I’ve tried using this technique on my iweb08 Blog, but the only results I get are a “loading” graphic icon.
Can this be implemented inside an iweb08 Blog?
I thank you for you response
by the way here is the link of my blog so you can see what I mean. (its the second little thumbnail on the site)
http://web.me.com/lafashion/Site/Blog/Entries/2010/6/20_Olivias.html
I got it to work but found the following errors
If you so much rearrange the slightest graphic or any other element and have to Re Publish the site iDisk will not only delete/remove the “highslide” folder from your Site but you’ll have to go back and re-due all the coding on your page’s html file.
Again I got it to work with multiple jpegs but also found that when replacing the tag with your code, all other iweb elements such as background image and menus get taken out.
Please advice.
Please Help me to get this work and as I’m telling everyone about your site and come Paycheck I’ll be dropping some contributions your way. :)
thank you again…it’s 1am and I’ve been at it since 8pm
HELP SOS SOS
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?
Israel,
Every time you republish iweb it will erase and re-upload any page that was altered. If there are non-published iweb elements in those folders, they will be removed automatically. So If you add files to the folder or alter the html code after the page file was created, you will need to redo this every time. The only time you wouldn’t need to is if the code was placed in an HTML snippet. Unfortunately, you cannot do that with Highslide as it requires after edits.
Hi Kerry,
Thanks for the info. Can you recommend a workflow to be able to save your html revisions so if you have to republish with iweb you can restore the code that gets overwritten?
It is cool that you posted about this. I found you on google and I had been looking for info about this. Nice website, thank you for the info. I will come back to check for new info
To anyone having problems with a new page opening, it’s worth checking that your version of Fancyzoom doesn’t have any numbers after it. I had downloaded fancyzoom more than once, so the folder was called ‘Fancyzoom 2’. By deleting the 2 the link worked and I now have the beautiful zoom effect.
LOL!!!
Hi,
Excellent tutorial, however, I have two questions. First of all when I add the codes, my ‘navigation’ disappears from the top of the page… and secondly I want to know how can I use multiple images as I am trying to make a site with different cities I have travelled to and I want to be able to show albums containing 10-12 photos of each city. Can you please advise how would that be possible using Highlight?
where is the html file … i dont see it in your downloaded files?
This is really awesome…
good job! :)
Thanks Utsav, I always appreciate good feedback.
I did this late last night and it worked fine. but then had to edit my site and no matter how many times I retry to do this it will not work for me. I have deleted everything and tried again. So now I have a website that has mistakes on it because I can not reload my site because I can not get it to work at all. VERY FRUSTRATED. I am trying to do this with a jotform and have it linked to font just like you did.
very frustrated:(
hi, i have tried the fancy zoom effect and this highslide over and over. I follow the steps in the tutorial step by step. using text edit (which opens the page as a kind of pdf rather than any text code) and coda.
Each time after doing it exactly as per tutorial. The images just open in a new tab. I have no idea why but god i’d like to have this effect work.
P.s i delete and reset the iweb as before the changes to that page b4 tring again.
ok, after trying again. i now have a image that still opens in a new tab. One i did earlier that now suddenly opens as it it should (so chuffed :) and a new one that opens but smaller!
Everytime I upload to my root server and then go back to iweb it works.. UNTIL I publish it.. then it deletes what I uploaded to my server. What am I doing wrong? I appreciate any help I can get… thanks!
Never mind =) I figured it out!!! It was deleting it every time I republished… Thanks tho awesome tutorials!
Great article. I desire certainly due this article with my friends. Thanks fitting for the info.