I have gotten requests to make code that creates my 'photo crawl' on my page (see http://flyingdutchie.smugmug.com (http://flyingdutchie.smugmug.com/)) available.
This message will discuss how i did this.
The general idea:
I added this HTML fragment to my header:
<div id="my_logo" align="left">
<div id="ml_top">Flying Dutchie's Photo Crawl</div>
<div class="ml_pic ml_separator"><div id="ml_1" class="ml_move"></div></div>
<div class="ml_pic ml_separator"><div id="ml_2" class="ml_move"></div></div>
<div class="ml_pic"><div id="ml_3" class="ml_move"></div></div>
<div class="ml_pic ml_hidden"><div id="ml_4" class="ml_move"></div></div>
</div>
- The #my_logo is the 'container' of the entire logo.
- The #ml_top is the caption above the photo crawl.
- Beneath the photo crawl, there are 4 DIVs of class .ml_pic. Three are visible, one is invisible. The 3 visible ones show three selected images and the invisible one is used to pre-load images so that the viewer get direct feedback when the picture in the invisible one is moved to one of the visible ones. The 3 visible ones are #ml_1, #ml_2 and #ml_3. The invisible one is #ml_4.
The invisible <DIV> is done by visibility: hidden;. This is done to instruct the browser to load the image from the web, although you won't see it. If its style would be display: none;, the browser will not load the image at all.
For correct positioning, this needs to be done:
1 #my_logo: height and width need to be set.
2 #ml_top: float is set to left (floats on the left of #my_logo) and width must be set as well.
3 .ml_pic: width and height are both set to at least 150px, since the thumbnail picture needs to fit. The style float is set to right, so that all pictures will attach themselves to the right of #my_logo. Note however, that because of float: right the first DIV contains #ml_4, then #ml_3, #ml_2 and the most right one contains #ml_1.
4 .ml_move: The position needs to be relative so that JavaScript can move them around. Set width and height to 100%, no padding, no margin, no border, so they'll fit inside a <DIV class="ml_pic"> really snuggly.
Moving the pictures:
Data:
a. You need an array of all your thumbnail images you want to show. Any side of a thumnail has a maximum length of 150px. The array contains at least 5 images...
b. Have a counter that serves as an index into this array, e.g. rotateCntr. It starts at 0.
Every 10 seconds do this:
1. Move the current pic in #ml_4 slowly into #ml_3:
- 1a. Make #ml_4 visible but set its left position to its width (152px) and set its width to 0.
- 1b. Increase the width of #ml_4 in steps from 0 to its original width (152px) until the entire image inside #ml_4 is visible.
- 1c. Hide #ml_4 again, set its left position back to 0px and its width back to 100%.
2. Show image rotateCntr in <DIV id="ml_1">, show image rotateCntr+1 in <DIV id="ml_2">, show image rotateCntr+2 in <DIV id="ml_3"> and show image rotateCntr+3 in <DIV id="ml_4">. This moves all images a spot to the right and loads a new image in the invisible #ml_4.
3. Increase rotateCntr by 1.
Here is sample code (css/javascript). I removed extraneous code from my CSS and JavaScript.
From the JavaScript, code is removed that uses cookies to remember the rotateCntr for the photocrawl.
Common CSS (note that some actual width and height values depend on your specific logo-image and homepage; these are just examples):
#my_logo {
background-image: url(http://you.smugmug.com/photos/yourimg.jpg);
background-repeat: no-repeat;
height: 180px;
width: 756px;
border-width: 0px;
margin-left: 4px;
margin-top: 0px;
pposition: relative;
}
#ml_top {
float: left;
height: 27px;
width: 463px;
margin-left: 292px;
color: white;
text-align: center;
font-size: 16pt;
font-family: Monotype Corsiva, Script, Georgia, Times New Roman, Times, serif;
background-color: #0162A3;
border: 1px solid #0162A3;
}
.ml_pic {
background-color: transparent;
float: right;
height: 151px;
width: 152px;
}
.ml_move {
position: relative;
width: 100%;
height: 100%;
background-color: white;
background-image: none; /* assigned by javascript. */
background-repeat: no-repeat;
background-position: center center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.ml_separator {
border-left: 3px groove #659ACE;
}
.ml_hidden {
background-color: transparent;
visibility: hidden;
}
CSS specific for all Internet Explorer versions:
#ml_top {
position: relative;
left: -292px; /* Same value as margin-left, but negative */
}
CSS specific for Internet Explorer 5.5 (but not for IE6.0!)
.ml_move {
width: 154px;
height: 153px;
}
You can look here http://www.dgrin.com/showpost.php?p=163741&postcount=4 to see how to add CSS for specific browsers/browser-versions without using so-called hacks.
JavaScript,
The 'doOnLoad()' must be executed just after the page has loaded: <body onload="doOnLoad();">
Call 'resetCrawl()' (using menu/onclick event/etc.) to reset the crawl back to the beginning.
var g_rotateCntr = 0;
var g_rotateStopped = false;
function doOnLoad()
{
doRotate();
incrRotateCntr();
window.setInterval("rotateLogoImgs();", 10000);
}
var g_logoImgs = new Array();
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/32754872-Th.jpg"; // Bell Lady
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/5326745-Th.jpg"; // Downtown Statue
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/14910982-Th.jpg"; // Hyannis Boat
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/18672452-Th.jpg"; // Hancock
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/29761507-Th.jpg"; // Girls downtown
//...
//...
//...
g_logoImgs[g_logoImgs.length] = "http://flyingdutchie.smugmug.com/photos/9011140-Th.jpg"; // Cristina Yotham
function incrRotateCntr()
{
// _setCookie("R_CNTR", g_rotateStopped ? "-"+g_rotateCntr : "+"+g_rotateCntr);
g_rotateCntr++;
}
function doRotate()
{
var div1 = document.getElementById("ml_1");
var div2 = document.getElementById("ml_2");
var div3 = document.getElementById("ml_3");
var div4 = document.getElementById("ml_4");
var aLen = g_logoImgs.length;
div1.style.backgroundImage="url("+ g_logoImgs[(0+g_rotateCntr)%aLen] +")";
div2.style.backgroundImage="url("+ g_logoImgs[(1+g_rotateCntr)%aLen] +")";
div3.style.backgroundImage="url("+ g_logoImgs[(2+g_rotateCntr)%aLen] +")";
div4.style.backgroundImage="url("+ g_logoImgs[(3+g_rotateCntr)%aLen] +")";
}
function rotateLogoImgs()
{
if (g_rotateStopped)
return;
var div4 = document.getElementById("ml_4");
var width = div4.scrollWidth;
div4.style.left = width+"px";
div4.style.width = 0+"px";
div4.style.visibility = "visible";
window.setTimeout("rotSmooth(0,15,"+width+");", 100);
}
function rotSmooth(pCntr, pMax, pWidth)
{
var div4 = document.getElementById("ml_4");
if (pCntr < pMax)
{
//div4.style.width = ( (pWidth*Math.pow(pCntr,2))/(Math.pow(pMax,2)) )+"px";
div4.style.width = ( (pWidth*pCntr)/pMax )+"px";
window.setTimeout("rotSmooth("+(pCntr+1)+","+pMax+","+pWidth+");", 100);
return;
}
div4.style.visibility = "hidden";
div4.style.left = 0+"px";
div4.style.width = "100%";
doRotate();
incrRotateCntr();
}
function resetCrawl()
{
g_rotateCntr = 0;
doRotate();
incrRotateCntr();
}
If you have questions, do hestitate to ask.
Notes
Browser compatibility:
Works fine on:
FireFox 1+
IE5.5+
Netscape 7.0+
Opera 7.5+
Mozilla 1.4+
Not tested on:
Safari
Will not work on:
IE5.5 on Mac.
Possible issues/Notes:
My logo is embedded in my page like this:
<body ...>
...
<div id="my_main"> <!-- its width is set to 760px -->
<div id="my_logo"> .. ..
...
</div>
<div id="my_container> <!-- its width is set to 100% -->
THE REST OF THE PAGE
</div>
</div>
...
...
<body>
Successes:
- DigitalDaze has succesfully implemented the crawl as well:
http://digitaldaze.smugmug.com
It looks Great! :thumb
-- Anton.