Video Tutorial – Photo Swapper


Photo Swapper HTML Image Viewer in iWeb.

This adds a little image swapping viewer in iWeb.  Just follow the steps in the video tutorial.

Here is the snippet code below:

[iWeb-Code=’HTML Image Viewer’]

Then just replace the items as outlined in the video to your images URL’s, and your Titles, and your set.

This was a video answer submitted in by an iWebUnlimited fan. You can submit your own questions in for a video answer under the “Video Tutorials” tab and click Video Answers or just click here.


  1. thomasbricker 30 April, 2010 at 07:38 Reply

    Thanks for the video. (Just got around to watching it this morning)

    Its great and very clear.

    I have 3 questions:
    1. If I want to position the thumbs somewhere else other that along the left, how would I do it?
    Could they be positioned along the bottom or the top or to the right?
    2. Also could the images be made to fade in at all or do they have to just pop on?
    3. Can the overall size of the viewer area be made bigger and where in the code is that specified?

    Thanks again.

  2. Craiglindley 19 June, 2010 at 15:35 Reply

    Hi I love this effect! is really smooth.

    The only problem that Im having is that my images dont appear and have the ? in a box where they should be when I preview the whole thing in Coda.

    Thanks your help! – keep up the good work! :)

  3. John 10 July, 2010 at 11:24 Reply

    Good widget – and it’s non-Flash, so in a iPad world that’s nice. It would be helpful if you added some default code to the code section so we could set the font, font size, font color, etc. I imagine most people will be embedding this within a webpage and have other text elements on the page and would want to make the font style uniform.

    An important note here is – if one of the objectives is Google ranking, do not put critical text within the widget. That text will get google under the widget’s HTML and when (if) found on Google, it won’t reference the web-page, instead it will reference the webpage within the widget.

  4. Rich 8 August, 2010 at 22:42 Reply

    Great tutorial, as always. I have an iweb site to house some work I’ve done as a multimedia producer/editor. And since I do not design websites professionally, I use iweb since its easy to manipulate and inexpensive. Now, thanks to your help, its a bit more professional looking. I used your tutorials for both the html image viewer as well as playing my video reel in flash, from as i had it before- Quicktime.

    I cant thank you enough!


  5. Kansas City Used Auto 20 August, 2010 at 15:12 Reply

    As always, awesome tutorial… extremely helpful, and I’m definitely using it. :) Two questions I have for you or anyone else on the thread who might have this bit of knowledge:

    1. What would I use to reduce the amount of space between the thumbnails? I’d like to be able to fit more in to the allotted space on my website, so that viewers can look at more photos.

    2. What code would I use to have some thumbnails running along the bottom of the larger photo, as well as to the left and possibly even the right? In other words, so that there are thumbnails all the way around the edges of the larger photo, allowing for more photos total.

    Thanks in advance for anyone that is willing to take the time to help me with this, as I’m sure others are curious as well. You guys are so great in all that you do for those of us just learning our way around iWeb. :)

  6. Adam 10 November, 2010 at 13:06 Reply

    I’m looking to have the same effect as the “photo swapper”, but using moving images instead (either quick time movies or flash files). Does anyone have any answers?

  7. Robb 3 April, 2011 at 08:50 Reply

    Love this tutorial! And it’s easy to add more pics/thumbnails!

    Question: I’m not crazy about the quality of the uploads though. I started with a high res version and no matter what, the full image doesn’t look great. Any suggestions?

  8. Norbi 12 April, 2011 at 21:05 Reply

    Great tip!
    There is another nice way to do it here:
    Which shows a way to do top and bottom, and also a lot at the side.

    I played with the positioning a bit in the code and managed to create thumbnails nicely spaced on each side.
    (which was requested by a few people here)
    Feel free to study/take/change the code as you see fit. Here it is…


  9. Shauna 8 August, 2011 at 22:12 Reply

    Hi, I think your tutorials are brill.

    My photo swapper is working great, yeay! But I just have one, maybe two questions similar to above…

    1. Can I move the photos to the right?

    2. Can we reduce the size of the space between the thumbnails?


  10. Jerlene Azebedo 21 August, 2011 at 03:25 Reply

    I have learned many important things by means of your post. I will also like to express that there can be situation that you will obtain a loan and never need a co-signer such as a Fed Student Support Loan. However, if you are getting that loan through a traditional lender then you need to be made ready to have a cosigner ready to allow you to. The lenders will probably base their own decision on the few aspects but the main one will be your credit history. There are some financial institutions that will additionally look at your work history and make up your mind based on this but in many cases it will be based on on your score.

  11. KBed 22 January, 2012 at 14:44 Reply

    Great code! I have been able to manipulate the sizes to get what I want, I had an issue at first as the large photos size seemed to be determined not by the size code after them but by a piece of code earlier on that applied to them all. I am having one MAJOR issue which is preventing me from using this as I need to in this instance. I want to use this for MANY photos, perhaps a hundred or so. I can just copy and paste more code, like you suggested, the only issue is that the large photo always appears at the top of the window, not to the right of the photo you are hovering over. Once you get more than five or six photos the thumbnail and the enlarged photo are too far apart to be viewable. Is there a way to center the enlarged photo in relation to the thumbnail image?

  12. Ric 1 November, 2012 at 01:42 Reply

    Works on dropbox as well. If you have a public folder on it. Upload your files on the public folder then copy and paste the link to your code.

Leave a reply