As shown here and referenced here, here is a little pano trick you can try.

I do not support this. You are on your own, I can try to help you but only if I have time. Other posters will take precedence, as this is advanced stuff. Use the Firefox Web Dev tool and you'll be GOLDEN!.

/* CSS Play, Pano Viewer */
#picture {border:1px solid #000; width:640px; height:480px; background:#fff url(http://williams.smugmug.com/photos/55458237-L.jpg); margin:0 auto;}
#picture img {display:none;}
#picture ul {margin:0; padding:0; width:640px; height:30px; list-style-type:none; background:#7a8998 url(/img/spacer.gif) no-repeat 0 200px; margin-top:480px;}
#picture ul li {display:block; width:10px; height:30px; float:left; position:relative;}
#picture ul li a, #picture ul li a:visited {display:block; width:10px; height:30px; text-decoration:none; cursor:default;}
#picture ul li a em {display:none;}
#picture ul li a:hover {background:#FFF;}
#picture ul li a:hover em {display:block; position:absolute; left:0; top:-480px; width:640px; height:480px; background:#eee url(http://williams.smugmug.com/photos/55458251-O.jpg) 0 0;}
#picture ul li a:hover em#a2 {left:-10px; background-position: -18px 0;}
#picture ul li a:hover em#a3 {left:-20px; background-position: -36px 0;}
#picture ul li a:hover em#a4 {left:-30px; background-position: -54px 0;}
#picture ul li a:hover em#a5 {left:-40px; background-position: -72px 0;}
#picture ul li a:hover em#a6 {left:-50px; background-position: -90px 0;}
#picture ul li a:hover em#a7 {left:-60px; background-position: -108px 0}
#picture ul li a:hover em#a8 {left:-70px; background-position: -126px 0;}
#picture ul li a:hover em#a9 {left:-80px; background-position: -144px 0;}
#picture ul li a:hover em#a10 {left:-90px; background-position: -162px 0;}

#picture ul li a:hover em#b1 {left:-100px; background-position: -180px 0;}
#picture ul li a:hover em#b2 {left:-110px; background-position: -198px 0;}
#picture ul li a:hover em#b3 {left:-120px; background-position: -216px 0;}
#picture ul li a:hover em#b4 {left:-130px; background-position: -234px 0;}
#picture ul li a:hover em#b5 {left:-140px; background-position: -252px 0;}
#picture ul li a:hover em#b6 {left:-150px; background-position: -270px 0;}
#picture ul li a:hover em#b7 {left:-160px; background-position: -288px 0}
#picture ul li a:hover em#b8 {left:-170px; background-position: -306px 0;}
#picture ul li a:hover em#b9 {left:-180px; background-position: -324px 0;}
#picture ul li a:hover em#b10 {left:-190px; background-position: -342px 0;}

#picture ul li a:hover em#c1 {left:-200px; background-position: -360px 0;}
#picture ul li a:hover em#c2 {left:-210px; background-position: -378px 0;}
#picture ul li a:hover em#c3 {left:-220px; background-position: -396px 0;}
#picture ul li a:hover em#c4 {left:-230px; background-position: -414px 0;}
#picture ul li a:hover em#c5 {left:-240px; background-position: -432px 0;}
#picture ul li a:hover em#c6 {left:-250px; background-position: -450px 0;}
#picture ul li a:hover em#c7 {left:-260px; background-position: -468px 0}
#picture ul li a:hover em#c8 {left:-270px; background-position: -486px 0;}
#picture ul li a:hover em#c9 {left:-280px; background-position: -504px 0;}
#picture ul li a:hover em#c10 {left:-290px; background-position: -522px 0;}

#picture ul li a:hover em#d1 {left:-300px; background-position: -540px 0;}
#picture ul li a:hover em#d2 {left:-310px; background-position: -558px 0;}
#picture ul li a:hover em#d3 {left:-320px; background-position: -576px 0;}
#picture ul li a:hover em#d4 {left:-330px; background-position: -594px 0;}
#picture ul li a:hover em#d5 {left:-340px; background-position: -612px 0;}
#picture ul li a:hover em#d6 {left:-350px; background-position: -630px 0;}
#picture ul li a:hover em#d7 {left:-360px; background-position: -648px 0;}
#picture ul li a:hover em#d8 {left:-370px; background-position: -666px 0;}
#picture ul li a:hover em#d9 {left:-380px; background-position: -684px 0;}
#picture ul li a:hover em#d10 {left:-390px; background-position: -702px 0;}

#picture ul li a:hover em#e1 {left:-400px; background-position: -720px 0;}
#picture ul li a:hover em#e2 {left:-410px; background-position: -738px 0;}
#picture ul li a:hover em#e3 {left:-420px; background-position: -756px 0;}
#picture ul li a:hover em#e4 {left:-430px; background-position: -774px 0;}
#picture ul li a:hover em#e5 {left:-440px; background-position: -792px 0;}
#picture ul li a:hover em#e6 {left:-450px; background-position: -810px 0;}
#picture ul li a:hover em#e7 {left:-460px; background-position: -828px 0;}
#picture ul li a:hover em#e8 {left:-470px; background-position: -846px 0;}
#picture ul li a:hover em#e9 {left:-480px; background-position: -864px 0;}
#picture ul li a:hover em#e10 {left:-490px; background-position: -882px 0;}


#picture ul li a:hover em#f1 {left:-500px; background-position: -900px 0;}
#picture ul li a:hover em#f2 {left:-510px; background-position: -918px 0;}
#picture ul li a:hover em#f3 {left:-520px; background-position: -936px 0;}
#picture ul li a:hover em#f4 {left:-530px; background-position: -954px 0;}
#picture ul li a:hover em#f5 {left:-540px; background-position: -972px 0;}
#picture ul li a:hover em#f6 {left:-550px; background-position: -990px 0;}
#picture ul li a:hover em#f7 {left:-560px; background-position: -1008px 0;}
#picture ul li a:hover em#f8 {left:-570px; background-position: -1026px 0;}
#picture ul li a:hover em#f9 {left:-580px; background-position: -1044px 0;}
#picture ul li a:hover em#f10 {left:-590px; background-position: -1062px 0;}

#picture ul li a:hover em#g1 {left:-600px; background-position: -1080px 0;}
#picture ul li a:hover em#g2 {left:-610px; background-position: -1098px 0;}
#picture ul li a:hover em#g3 {left:-620px; background-position: -1116px 0;}
#picture ul li a:hover em#g4 {left:-630px; background-position: -1154px 0;}

/* for the above, in Pano Gallery, make no photos appear */
.gallery_XXXXXX #photos {display: none;}

And here's the HTML that goes in the gallery description box:

<html>
<div id="picture">
<img src="/img/spacer.gif"/>
<ul>
<li><a href="#nogo"><em id="a1"></em></a></li><li><a href="#nogo"><em id="a2"></em></a></li><li><a href="#nogo"><em id="a3"></em></a></li><li><a href="#nogo"><em id="a4"></em></a></li><li><a href="#nogo"><em id="a5"></em></a></li><li><a href="#nogo"><em id="a6"></em></a></li><li><a href="#nogo"><em id="a7"></em></a></li><li><a href="#nogo"><em id="a8"></em></a></li><li><a href="#nogo"><em id="a9"></em></a></li><li><a href="#nogo"><em id="a10"></em></a></li>
<li><a href="#nogo"><em id="b1"></em></a></li><li><a href="#nogo"><em id="b2"></em></a></li><li><a href="#nogo"><em id="b3"></em></a></li><li><a href="#nogo"><em id="b4"></em></a></li><li><a href="#nogo"><em id="b5"></em></a></li><li><a href="#nogo"><em id="b6"></em></a></li><li><a href="#nogo"><em id="b7"></em></a></li><li><a href="#nogo"><em id="b8"></em></a></li><li><a href="#nogo"><em id="b9"></em></a></li><li><a href="#nogo"><em id="b10"></em></a></li>
<li><a href="#nogo"><em id="c1"></em></a></li><li><a href="#nogo"><em id="c2"></em></a></li><li><a href="#nogo"><em id="c3"></em></a></li><li><a href="#nogo"><em id="c4"></em></a></li><li><a href="#nogo"><em id="c5"></em></a></li><li><a href="#nogo"><em id="c6"></em></a></li><li><a href="#nogo"><em id="c7"></em></a></li><li><a href="#nogo"><em id="c8"></em></a></li><li><a href="#nogo"><em id="c9"></em></a></li><li><a href="#nogo"><em id="c10"></em></a></li>
<li><a href="#nogo"><em id="d1"></em></a></li><li><a href="#nogo"><em id="d2"></em></a></li><li><a href="#nogo"><em id="d3"></em></a></li><li><a href="#nogo"><em id="d4"></em></a></li><li><a href="#nogo"><em id="d5"></em></a></li><li><a href="#nogo"><em id="d6"></em></a></li><li><a href="#nogo"><em id="d7"></em></a></li><li><a href="#nogo"><em id="d8"></em></a></li><li><a href="#nogo"><em id="d9"></em></a></li><li><a href="#nogo"><em id="d10"></em></a></li><li><a href="#nogo"><em id="e1"></em></a></li><li><a href="#nogo"><em id="e2"></em></a></li><li><a href="#nogo"><em id="e3"></em></a></li><li><a href="#nogo"><em id="e4"></em></a></li><li><a href="#nogo"><em id="e5"></em></a></li><li><a href="#nogo"><em id="e6"></em></a></li><li><a href="#nogo"><em id="e7"></em></a></li><li><a href="#nogo"><em id="e8"></em></a></li><li><a href="#nogo"><em id="e9"></em></a></li><li><a href="#nogo"><em id="e10"></em></a></li><li><a href="#nogo"><em id="f1"></em></a></li><li><a href="#nogo"><em id="f2"></em></a></li><li><a href="#nogo"><em id="f3"></em></a></li><li><a href="#nogo"><em id="f4"></em></a></li><li><a href="#nogo"><em id="f5"></em></a></li><li><a href="#nogo"><em id="f6"></em></a></li><li><a href="#nogo"><em id="f7"></em></a></li><li><a href="#nogo"><em id="f8"></em></a></li><li><a href="#nogo"><em id="f9"></em></a></li><li><a href="#nogo"><em id="f10"></em></a></li><li><a href="#nogo"><em id="g1"></em></a></li><li><a href="#nogo"><em id="g2"></em></a></li><li><a href="#nogo"><em id="g3"></em></a></li><li><a href="#nogo"><em id="g4"></em></a></li>
</ul>
<div align="center"><strong style="color: #7a8998">Hover and move your mouse along the blue bar</strong></div>
</div>
<br>
<br>
<br>
</html>

You make a gallery all thumbs style. You make a pano that's 1754 x 640 pixels, and the code above will work You have to change my image names to your image names. My colors to your colors, etc.

Any other sizes, and you are ON YOUR own

I got the code from CSSPlay and basically doubled everything that he had. It can be any size, really, but the math gets hard

Originally Posted by Andy As shown here and referenced here, here is a little pano trick you can try. I do not support this. You are on your own, I can try to help you but only if I have time. Other posters will take precedence, as this is advanced stuff. Use the Firefox Web Dev tool and you'll be GOLDEN!.

Thanks a lot! It looks like some work. I'll check this out sometimes.

Sebastian

Very cool Andy! I wanted to try it, but failed. I uploaded a pano shot with the same dimensions. In the The gallery description I dropped in that html - I altered the code with my code editor of choice.

My confusion lies in where to place the code.

I assumed it would go in the Customization Setting page in the CSS block. However, this looks like a global setting for all pages. How does one customize the CSS for just the gallery in question? Sorry if this sounds like a bonehead question. It's probably obvious and I'm just blind!

Thanks!

Originally Posted by macaddict Very cool Andy! I wanted to try it, but failed. I uploaded a pano shot with the same dimensions. In the The gallery description I dropped in that html - I altered the code with my code editor of choice. My confusion lies in where to place the code. I assumed it would go in the Customization Setting page in the CSS block. However, this looks like a global setting for all pages. How does one customize the CSS for just the gallery in question? Sorry if this sounds like a bonehead question. It's probably obvious and I'm just blind! Thanks!

Hi Dave :)

I got it working here. Make sure you have the gallery you have it in set as "all thumbs". You already put the html in the right place and the CSS code goes in the CSS box in customization. It knows where to find the gallery by the html code you placed in that gallery. Make sense?

Thanks - your panorama of Miami is awesome.

I dropped the CSS in my customization settings page and now it works (mostly). Here it is.

The only problem is a sliver of strangeness on the far right. I'll have to do some more tweaking. But, very cool - thanks again.

Originally Posted by macaddict Thanks - your panorama of Miami is awesome. I dropped the CSS in my customization settings page and now it works (mostly). Here it is. The only problem is a sliver of strangeness on the far right. I'll have to do some more tweaking. But, very cool - thanks again.

Hi Dave,

Thank you! And that's quite a shot of yours, too!

I had the same problem with the far right of my pano, so I changed the width to 1794 and it worked fine. You might try that :)

It is hard to see this panorama viewer. It seems not to work well in IE6 or FireFox (1.5)

The browser keeps loading stuff (images) and the main image stays mostly white:
Sometimes, after a quite a long wait it may work. But then when i move my mouse of the bottom blue bar, the panorama viewer works until my mouse reaches a certain point. Then everything goes white again. Moving my mouse to the beginning does work fine under FireFox but not under IE6.0. All the images are downloaded again (is this maybe part of the infamous 'flicker' bug of IE6?) and the image stays white.

I tried your and Barb's site and it seems to download more than 50 original sized images (or >50 times the same image) ("-O.jpg"). FireFox and IE6.0 don't like this

But the idea is kewl!!! No script, only CSS I wished it worked better, especially under IE6.0

Originally Posted by flyingdutchie It is hard to see this panorama viewer. It seems not to work well in IE6 or FireFox (1.5) The browser keeps loading stuff (images) and the main image stays mostly white: [...] But the idea is kewl!!! No script, only CSS I wished it worked better, especially under IE6.0

Works like a charm here in IE6. The thing you've to keep in mind is to hold the mouse in the panobar until the picture (there's only one big image that gets shifted around!) is completely loaded. Then you can scroll smoothly without any problems.
Also it's noted on the demo homepage that FF before 1.5 had flicker problems. I can confirm this with 1.0.6, but can't say how 1.5 looks though.

Now the big request to the JS guys! Any chance that we can preload the original while the mouse is not yet on the panoscrollbar? From my understanding he original doesn't get loaded until you move the mouse into the panoscrollbar plus you've to keep it there until the image is loaded.

Thanks,
Sebastian

EDIT: Aparently you've to move your mouse into the panoscrollbar only once to trigger the download of the original. But still - could this somehow be triggered when the site is loaded and some kind of processbar be shown so the visitor would see that something is happening?

Originally Posted by rainforest1155 Works like a charm here in IE6. The thing you've to keep in mind is to hold the mouse in the panobar until the picture (there's only one big image that gets shifted around!) is completely loaded. Then you can scroll smoothly without any problems. Also it's noted on the demo homepage that FF before 1.5 had flicker problems. I can confirm this with 1.0.6, but can't say how 1.5 looks though. Now the big request to the JS guys! Any chance that we can preload the original while the mouse is not yet on the panoscrollbar? From my understanding he original doesn't get loaded until you move the mouse into the panoscrollbar plus you've to keep it there until the image is loaded. Thanks, Sebastian EDIT: Aparently you've to move your mouse into the panoscrollbar only once to trigger the download of the original. But still - could this somehow be triggered when the site is loaded and some kind of processbar be shown so the visitor would see that something is happening?

When I set this up last night, it looked and worked great on my Mac at home using FF and Safari. Now, I get to work this morning where I'm forced to use a Windows machine, and the flicker in FF on windows in unbearable. Works without flicker in IE 6 on windows, but I see what Anton is saying ... seems to be downloading 50+ somethings which I don't understand! Ick ... guess I'll leave it for now.

Originally Posted by bygates When I set this up last night, it looked and worked great on my Mac at home using FF and Safari. Now, I get to work this morning where I'm forced to use a Windows machine, and the flicker in FF on windows in unbearable. Works without flicker in IE 6 on windows, but I see what Anton is saying ... seems to be downloading 50+ somethings which I don't understand! Ick ... guess I'll leave it for now.

I checked it a bit more.

The image is loaded through the background-image style-property. IE6.0 has an issue with that, as soon as the geometry of the enlosing element changes (e.g. border change, background-position change, etc). When you move the mouse, the background-position changes and the image is reloaded. Depending on how you set up your browser's properties, the image is either retrieved from the cache or from the server again. Either option is bad, the second one the worst: The image is already there. It does not need to be loaded again, whether it is from the server or from the cache.

Expecting the viewer to wait until the image is loaded does not work. Anyone seeing the empty white space will move on and leave the page.

Preloading could work, but then you need JavaScript.
I have not tried this at all, but my first idea would be:
- Add a hidden (visibility: hidden) IMG to the page (do not use display: none).
- Make this IMG element small, so it'll fit on the page, but not 0. E.g. height: 1px; width: 1px. The src of the IMG element is the same as the panorama image.
- Hide the panorama viewer (or just the blue bar), so that the user can not use it (yet).
- Use the 'onload' or the 'onreadystatechange' (last one is IE only) event on this IMG element to be notified when the image finished loading.
- When the image has finished loading, make the panorama viewer (or the blue bar) visible, so that the user can use it.

I don't know if, and how well, this would fix the IE6.0 flicker problem. But it may be worth a try.