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:
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.
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.
Im trying to figure out the same question you have….
Same question. Wondering how to place thumbs elsewhere such as under the appearing images.
Same question and and how to make image is viewed when we click it, NOT when cursor is put over it
THANKS A LOT!!!!!!!!
Is this the only way that you can upload to your server? by using programs such as transmit?
Is there a way to make a sort of thumbnail index that could be incorporated with the Photo Swapper. I saw one on an artist’s site called Miriam Dema (the url is http://www.miriamdema.com/art3-miriamdema_the%20pressure_2009.html) and it looks like she used iWeb to make hers. If you have the html for that sort of thing with instructions on how to incorporate it into the html above, that’d be great.
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! :)
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.
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!
Rich
RichAdler.com
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. :)
Great Questions from Kansas City Used Auto and Thomasbriker!
Is there any answers?
Is anyone out there?
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?
How to make 2 or 3 column thumbnail and how to make image is viewed when we click it, NOT when cursor is put over it. Thanks
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?
never mind… I just noticed the “resolution” area in photoshop…
THAT didn’t work… suggestions?…
Great tip!
There is another nice way to do it here:
http://iwebfaq.org/site/iWeb_Hover_photos.html
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…
http://norbithejuggler.com/2011/test_files/widget1_markup.html
Thanks,
Norbi
Very cool tutorial. It’s great if you don’t want a constantly moving slideshow. Cheers; great web site.
Thanks, look at my web. I put your code there.thanks,
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?
thanks!
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.
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?