.
// specify unique id= in all three
// * The first and final photo displayed is in the html ![]()
tag
// * The image array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The Href array contains the link you want associated with each image
// each image must have a corresponding link.
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
// Photoshuffle grinds to an alomst halt when implemented on a page with compplex structural markup with lots of block level elements
// Sniffed out IE and spend up the fade
var today = new Date();
var beginGU24 = new Date(2008,07,28);
var endGU24 = new Date(2008,11,31);
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblPhotoShufflerAnchorId = "photoanchor";
var gblImg;
var gblHref;
//var glbImgCondition = gup("p");
// tnb hacked to deal with session id in url
var url = 'http://'+location.host+location.pathname;
var dir = url.slice(8,url.length);
dir = dir.slice(dir.indexOf("/")+1,dir.length);
dir = dir.slice(0,dir.lastIndexOf("/"));
var webDir = dir;
var file = url.slice(url.lastIndexOf("/")+1, url.lastIndexOf("."));
//alert(webDir +" || "+file);
//Image and link array for css slide show
//conditionally defined depeneding on dir | can extend to conditionally define based on file
switch(webDir)
{
case "advice_ideas" :
gblImg = new Array(
"/graphics/promos/advice/feb09/lobelia.jpg",
"/graphics/promos/advice/feb09/blairmont.jpg",
"/graphics/promos/advice/feb09/whitaker.jpg",
"/graphics/promos/advice/feb09/burnside.jpg",
"/graphics/promos/advice/feb09/jefferson.jpg");
break;
case "advice_ideas/stories" :
switch(file)
{
case "this_old_house":
gblImg = new Array(
"/graphics/customers/stories/big/toh_entry.jpg",
"/graphics/customers/stories/big/toh_door.jpg",
"/graphics/customers/stories/big/toh_jeffersons.jpg",
"/graphics/customers/stories/big/toh_riverton.jpg",
"/graphics/customers/stories/big/toh_house.jpg"
);
break;
case "mississippi":
gblImg = new Array(
"/graphics/customers/stories/mississippi/2.jpg",
"/graphics/customers/stories/mississippi/3.jpg",
"/graphics/customers/stories/mississippi/4.jpg",
"/graphics/customers/stories/mississippi/5.jpg",
"/graphics/customers/stories/mississippi/1.jpg"
);
break;
}
break;
case "advice_ideas/contest" :
gblImg = new Array(
"/graphics/contest01/slideshow/jantzen.jpg",
"/graphics/contest01/slideshow/altadena.jpg",
"/graphics/contest01/slideshow/bathroom.jpg",
"/graphics/contest01/slideshow/councilcrest.jpg"
);
break;
case "company" :
if(file == "faces")
{
gblImg = new Array(
"/graphics/landing/new_orleans.jpg",
"/graphics/landing/daveMissel.jpg",
"/graphics/landing/assembly.jpg",
"/graphics/landing/channy_walter.jpg");
break;
}
if(file == "index")
{
gblImg = new Array(
"/graphics/people/Z015021_boglis.jpg",
"/graphics/portland/portland_romance.jpg",
"/graphics/people/Z015020_clark.jpg",
"/graphics/seattle/seattle_romance.jpg",
"/graphics/people/Z015025_shahin.jpg");
break;
}
case "company/jobs" :
gblImg = new Array(
"/graphics/landing/jasmin.jpg",
"/graphics/landing/leonice.jpg",
"/graphics/landing/hung.jpg");
gblHref = new Array(
"/company/profile.html?who=jasmink&person=employee"+sessLine2,
"/company/profile.html?who=leonice&person=employee"+sessLine2,
"/company/profile.html?who=hung&person=employee"+sessLine2);
break;
case "company/portland" :
switch(file)
{
case "index" :
gblImg = new Array(
"/graphics/portland/slides/small/slide_0.jpg",
"/graphics/portland/slides/small/slide_1.jpg",
"/graphics/portland/slides/small/slide_2.jpg",
"/graphics/portland/slides/small/slide_3.jpg",
"/graphics/portland/slides/small/slide_4.jpg",
"/graphics/portland/slides/small/slide_5.jpg",
"/graphics/portland/slides/small/slide_6.jpg",
"/graphics/portland/slides/small/slide_7.jpg",
"/graphics/portland/slides/small/slide_8.jpg",
"/graphics/portland/slides/small/slide_9.jpg",
"/graphics/portland/slides/small/slide_10.jpg",
"/graphics/portland/slides/small/slide_11.jpg",
"/graphics/portland/slides/small/slide_12.jpg",
"/graphics/portland/slides/small/slide_13.jpg",
"/graphics/portland/slides/small/slide_14.jpg",
"/graphics/portland/slides/small/slide_15.jpg",
"/graphics/portland/slides/small/slide_16.jpg",
"/graphics/portland/slides/small/slide_17.jpg"
);
break;
case "salvage" :
gblImg = new Array(
"/graphics/our_story/salvage/slideshow/hardware.jpg",
"/graphics/our_story/salvage/slideshow/door_plates.jpg",
"/graphics/our_story/salvage/slideshow/posts.jpg",
"/graphics/our_story/salvage/slideshow/leaded_glass.jpg",
"/graphics/our_story/salvage/slideshow/lighting_counter.jpg",
"/graphics/our_story/salvage/slideshow/architectural.jpg",
"/graphics/our_story/salvage/slideshow/door_knobs.jpg",
"/graphics/our_story/salvage/slideshow/lighting_cloud.jpg",
"/graphics/our_story/salvage/slideshow/long_shot.jpg"
);
break;
}
break;
case "catalog" :
switch(file)
{
case "bath" :
gblImg = new Array(
"/graphics/promos/tubs/martin_back.jpg",
"/graphics/promos/tubs/choffin_closeup.jpg",
"/graphics/promos/tubs/ferrante_tub.jpg",
"/graphics/promos/tubs/ferrante_adjuster.jpg",
"/graphics/promos/tubs/martin_in_tub.jpg",
"/graphics/promos/tubs/choffin_tub.jpg",
"/graphics/promos/tubs/martin_foot.jpg",
"/graphics/promos/tubs/ferrante_in_tub.jpg"
);
break;
case "lighting_and_shades" :
gblImg = new Array(
"/graphics/promos/lighting_landing/altadena.jpg",
"/graphics/promos/lighting_landing/astron.jpg",
"/graphics/promos/lighting_landing/orbis.jpg",
"/graphics/promos/lighting_landing/jamison.jpg",
"/graphics/promos/lighting_landing/dora.jpg"
);
gblHref = new Array(
"/fixshowC906-4/templates/selection.phtml"+sessLine1,
"/fixshowC996/templates/selection.phtml"+sessLine1,
"/fixshowC283/templates/selection.phtml"+sessLine1,
"/fixshowC324-6/templates/selection.phtml"+sessLine1,
"/fixshowC597/templates/selection.phtml"+sessLine1
);
break;
case "new" :
gblImg = new Array(
"/graphics/promos/k_and_b/Z011422_bathgroup2.jpg",
"/graphics/promos/k_and_b/Z011481_tub.jpg",
"/graphics/promos/k_and_b/Z011472_rhone.jpg",
"/graphics/promos/k_and_b/Z011461_bathroom.jpg",
"/graphics/promos/k_and_b/Z011464_pendant.jpg",
"/graphics/promos/k_and_b/Z011458_cupholder.jpg",
"/graphics/promos/k_and_b/Z011477_greenpaint.jpg"
);
break;
case "industrial" :
gblImg = new Array(
"/graphics/promos/industrial/burnside.jpg",
"/graphics/promos/industrial/mccoy2.jpg",
"/graphics/promos/industrial/wiley.jpg",
"/graphics/promos/industrial/mccoy.jpg"
);
break;
case "ls2" :
gblImg = new Array(
"/graphics/nav_pages/ls/altadena.jpg",
"/graphics/nav_pages/ls/astron.jpg",
"/graphics/nav_pages/ls/orbis.jpg",
"/graphics/nav_pages/ls/jamison.jpg",
"/graphics/nav_pages/ls/dora.jpg"
);
gblHref = new Array(
"/fixshowC906-4/templates/selection.phtml"+sessLine1,
"/fixshowC996/templates/selection.phtml"+sessLine1,
"/fixshowC283/templates/selection.phtml"+sessLine1,
"/fixshowC324-6/templates/selection.phtml"+sessLine1,
"/fixshowC597/templates/selection.phtml"+sessLine1
);
break;
}
break;
case "company/seattle" :
gblImg = new Array(
"/graphics/our_story/seattle_light_cloud.jpg",
"/graphics/our_story/seattle_shades.jpg",
"/graphics/our_story/seattle_store_hw.jpg",
"/graphics/our_story/seattle_books.jpg",
"/graphics/our_story/seattle_store_bulb.jpg",
"/graphics/our_story/seattle_interior.jpg"
);
break;
case "antique" :
switch(file)
{
case "antique_lighting" :
gblImg = new Array(
"/graphics/antique/alighting/slideshow/ma.jpg",
"/graphics/antique/alighting/slideshow/hr.jpg",
"/graphics/antique/alighting/slideshow/pb.jpg",
"/graphics/antique/alighting/slideshow/sh.jpg",
"/graphics/antique/alighting/slideshow/ee.jpg",
"/graphics/antique/alighting/slideshow/cr.jpg",
"/graphics/antique/alighting/slideshow/ac.jpg"
);
gblHref = new Array(
"/antique/antique_collection.html?coll=ma"+sessLine2,
"/antique/antique_collection.html?coll=hr"+sessLine2,
"/antique/antique_collection.html?coll=pb"+sessLine2,
"/antique/antique_collection.html?coll=sh"+sessLine2,
"/antique/antique_collection.html?coll=ee"+sessLine2,
"/antique/antique_collection.html?coll=cr"+sessLine2,
"/antique/antique_collection.html?coll=ac"+sessLine2
);
break;
case "antique_hardware" :
gblImg = new Array(
"/graphics/antique/ahardware/slideshow/door.jpg",
"/graphics/antique/ahardware/slideshow/window.jpg",
"/graphics/antique/ahardware/slideshow/misc.jpg",
"/graphics/antique/ahardware/slideshow/latch.jpg",
"/graphics/antique/ahardware/slideshow/hook.jpg",
"/graphics/antique/ahardware/slideshow/porch.jpg",
"/graphics/antique/ahardware/slideshow/hinge.jpg",
"/graphics/antique/ahardware/slideshow/pocket.jpg",
"/graphics/antique/ahardware/slideshow/pull.jpg"
);
gblHref = new Array(
"/antique/hardware_collection.html?coll=dr"+sessLine2,
"/antique/hardware_collection.html?coll=wd"+sessLine2,
"/antique/hardware_collection.html?coll=mc"+sessLine2,
"/antique/hardware_collection.html?coll=lt"+sessLine2,
"/antique/hardware_collection.html?coll=hk"+sessLine2,
"/antique/hardware_collection.html?coll=db"+sessLine2,
"/antique/hardware_collection.html?coll=hn"+sessLine2,
"/antique/hardware_collection.html?coll=pd"+sessLine2,
"/antique/hardware_collection.html?coll=db"+sessLine2
);
break;
}
break;
case "events" :
if(file == "portland")
{
gblImg = new Array(
"/graphics/promos/eames/2.jpg",
"/graphics/promos/eames/3.jpg",
"/graphics/promos/eames/4.jpg",
"/graphics/promos/eames/1.jpg"
);
}
break;
/*better than a case="" and/or matching on index.htm */
default:
gblImg = new Array(
"/graphics/home/color/mcm.jpg",
"/graphics/home/color/shades.jpg",
"/graphics/home/color/industrial.jpg"
);
gblHref = new Array(
"/catalog/colorful.html?page=mcm"+sessLine2,
"/catalog/colorful.html?page=shade"+sessLine2,
"/catalog/colorful.html"+sessLine1
);
break;
}
/*
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 1;
*/
//time conditions
var gblPauseSeconds = 3.25;
var gblFadeSeconds = .75;
var gblRotations = 2;
//browser
if(navigator.appName == "Microsoft Internet Explorer" && webDir == "antique")
{
gblFadeSeconds = .107;
}
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblStartHref;
var gblImageRotations = gblDeckSize * (gblRotations+1);
// window.onload = photoShufflerLaunch;
// this should help with slow connections, etc. - using Prototype's Event.observe method
Event.observe(window,'load',photoShufflerLaunch);
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
if(gblHref)
{
var theanchor = document.getElementById(gblPhotoShufflerAnchorId);
gblStartHref = theimg.href; // save away to show as final image
}
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
if(gblHref)
{
var theanchor = document.getElementById(gblPhotoShufflerAnchorId);
}
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
if(gblHref)
{
theanchor.href = gblHref[gblOnDeck];
window.status = gblHref[gblOnDeck]; // updates status bar (optional)
}
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
if(gblHref)
{
gblHref[gblOnDeck] = gblStartHref;
}
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}