. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html
![]()
tag
// * The 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 rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
// End Customization section
this.shuffleSets = new Array();
setTimeout(this.photoShufflerFade, this.gblPauseSeconds * 1000);
}
Shuffler.prototype = {
photoShufflerLaunch : function(divTarget, imgTarget, images)
{
var shuffleSet = new ShuffleSet(divTarget, imgTarget, images);
this.shuffleSets.push(shuffleSet);
var theimg = document.getElementById(imgTarget);
shuffleSet.gblStartImg = theimg.src;
// save away to show as final image
document.getElementById(divTarget).style.backgroundImage = 'url(' + shuffleSet.gblImg[shuffleSet.gblOnDeck] + ')';
},
photoShufflerFade : function() // setTimeout(EH.shuffler.photoShufflerFade, EH.shuffler.gblPauseSeconds * 1000);
{
var shuffleSets = EH.shuffler.shuffleSets;
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * EH.shuffler.gblFadeSeconds);
// fade top out to reveal bottom image
if (EH.shuffler.gblOpacity < 2 * fadeDelta) {
EH.shuffler.gblOpacity = 100;
// stop the rotation if we're done
// if (shuffleSet.gblImageRotations < 1) return;
EH.shuffler.photoShufflerShuffle();
// pause before next fade
setTimeout(EH.shuffler.photoShufflerFade, EH.shuffler.gblPauseSeconds * 1000);
}
else {
EH.shuffler.gblOpacity -= fadeDelta;
for (var i = 0; i < shuffleSets.length; i++) {
var shuffleSet = shuffleSets[i]
var theimg = document.getElementById(shuffleSet.imgTarget);
EH.shuffler.setOpacity(theimg, EH.shuffler.gblOpacity);
}
setTimeout(EH.shuffler.photoShufflerFade, 30);
//
// 1/30th of a second
}
},
photoShufflerShuffle : function()
{
for (var i = 0; i < this.shuffleSets.length; i++) {
var shuffleSet = this.shuffleSets[i]
var thediv = document.getElementById(shuffleSet.divTarget);
var theimg = document.getElementById(shuffleSet.imgTarget);
// copy div background-image to img.src
theimg.src = shuffleSet.gblImg[shuffleSet.gblOnDeck];
// set img opacity to 100
this.setOpacity(theimg, 100);
// shuffle the deck
shuffleSet.gblOnDeck = ++shuffleSet.gblOnDeck % shuffleSet.gblDeckSize;
// decrement rotation counter
// if (--shuffleSet.gblImageRotations < 1)
// {
// insert start/final image if we're done
// shuffleSet.gblImg[shuffleSet.gblOnDeck] = shuffleSet.gblStartImg;
// }
// slide next image underneath
thediv.style.backgroundImage = 'url(' + shuffleSet.gblImg[shuffleSet.gblOnDeck] + ')';
}
},
setOpacity : function(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;
}
};
(function() {
var etsy = new EtsyNameSpace.Mini(5521518, 'shop', 'gallery', 4, 4);
EH.currentPhoto = 0;
EH.shuffler = new Shuffler();
EH.photoShufflerFade = function()
{
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * this.gblFadeSeconds);
// fade top out to reveal bottom image
if (this.gblOpacity < 2 * fadeDelta)
{
this.gblOpacity = 100;
// stop the rotation if we're done
if (this.gblImageRotations < 1) return;
this.photoShufflerShuffle();
// pause before next fade
setTimeout(this.photoShufflerFade, this.gblPauseSeconds * 1000);
}
else
{
this.gblOpacity -= fadeDelta;
this.setOpacity(theimg, this.gblOpacity);
setTimeout(this.photoShufflerFade, 30);
// 1/30th of a second
}
}
EH.loadFrame = function() {
var config = {
xtype : 'viewport',
layout : 'border',
autoScroll : false,
items : [{
contentEl : 'lady',
region : 'west',
split:false,
border : false,
width : 250
},{
contentEl : 'header-panel',
region : 'north',
split:false,
autoHeight : true,
border : false,
height : 60
},{
xtype : 'tabpanel',
region : 'center',
split:false,
id : 'maintabs',
border : false,
activeTab : 'home',
defaults : {border : false, header : false},
// renderTo : 'tabbar',
items : [ {
xtype : 'panel',
id : 'home',
autoHeight : true,
title : 'Home',
autoScroll : true,
autoLoad : {url : 'home.html', scripts : true}
},
{
xtype : 'panel',
title : 'About',
id : 'about',
autoScroll : true,
autoLoad : 'about.html'
},
{
xtype : 'panel',
title : 'Products',
id : 'products',
autoScroll : false,
autoLoad : 'products.html'
},
{
xtype : 'panel',
id : 'blog',
autoLoad : 'blog.html',
title : 'Blog'
// autoLoad : 'home.html'
},
{
xtype : 'panel',
id : 'process',
title : 'Process',
autoScroll : true,
autoLoad : {url : 'process.html', scripts : true }
},
{
xtype : 'panel',
id : 'patterns',
title : 'Patterns',
autoScroll : true,
autoLoad : 'patterns.html'
},
{
xtype : 'panel',
title : 'Contact',
id : 'contact',
autoLoad : 'contact.html'
},
{
xtype : 'panel',
id : 'green',
title : 'Are you Green?',
autoScroll : true,
autoLoad : 'green.html'
}
]}]
};
EH.tabs = new Ext.Viewport(config);
}
})();