Change Background Color with a photo slideshow

[PH[O]TO]

I have a photo slideshow running on a homepage. I would like to assign a different background color to be used for each photo and change in synch with the slideshow. Can anyone help?

Thanks

[Arty Effem]

I have a photo slideshow running on a homepage. I would like to assign a different background color to be used for each photo and change in synch with the slideshow. Can anyone help?

Thanks

Have it execute this line whenever it changes the image:

document.body.style.backgroundColor='#'+Math.floor(Math.random()*0xFFFFFF).toString(16);

[PH[O]TO]

Forgive me, for I am a beginner. Will that statement allow me to assign a color that I predetermine for each image in the slideshow? Could you give me an example? Below is the slideshow code that is on the host site. How do I incorporate it into the code? Thanks

---START---

/*=========================*/
/*== SLIDE SHOW ==*/
/*== version 0.57 ==*/
/*== Updated 12 Dec 2006 ==*/
/*=========================*/
var SLIDE_SHOW = 0;
var RANDOM_PHOTO = 1;
var slideshowContainer;
var sSlide;
var sCaption;
var ssSlides;
var ssSlideTotal;
var ssSlideTimer;
var ssOldSlide;
var ssFadeTimer;
var ssFade;
var ssTimerId;
var blank;


function PrepSlideEnvironment() {
tmpCookie = getCookie("Template");

blank = new Image();
blank.src = "/img/spacer.gif";

if (typeof(slideshowType) == "undefined" || (slideshowType != SLIDE_SHOW && slideshowType != RANDOM_PHOTO)) {
slideshowType = SLIDE_SHOW;
}

if (slideshowType == RANDOM_PHOTO) {
randomSlides = true;
}

if (typeof(slideshowContainerId) == "undefined") {
return false;
} else if (typeof(slideshowContainerId) == "string") {
slideshowContainer = YD.get(slideshowContainerId);
}

if (!slideshowContainer) {
return false;
}

if (typeof(slideshowUrl) == "undefined" || typeof(slideshowUrl) != "string") {
return false;
} else {
slideshowUrl = /(?:http:\/\/[^\/]+)?(\/\S+)/.exec(slideshowUrl)[1];
}

if (/\/gallery\/[0-9]+/.test(slideshowUrl)) {
slideSourceIsGallery = true;
} else {
slideSourceIsGallery = false;
}

if (typeof(slideHeight) == "undefined" || isNaN(slideHeight)) {
slideHeight = "200";
}

if (typeof(slideWidth) == "undefined" || isNaN(slideWidth)) {
slideWidth = "300";
}

if (typeof(photoHeight) == "undefined" || isNaN(photoHeight)) {
photoHeight = slideHeight;
}

if (typeof(photoWidth) == "undefined" || isNaN(photoWidth)) {
photoWidth = slideWidth;
}

if (typeof(slideDuration) == "undefined" || isNaN(slideDuration)) {
slideDuration = 3;
}

if (typeof(firstSlideUrl) == "undefined" || typeof(firstSlideUrl) != "string") {
firstSlideUrl = blank.src;
}

if (typeof(showSlideTransition) == "undefined" || typeof(showSlideTransition) != "boolean") {
showSlideTransition = true;
}

if (typeof(resizeToPhoto) == "undefined" || typeof(resizeToPhoto) != "boolean") {
resizeToPhoto = true;
}

if (typeof(quickStart) == "undefined" || typeof(quickStart) != "boolean") {
quickStart = true;
}

if (typeof(randomSlides) == "undefined" || typeof(randomSlides) != "boolean") {
randomSlides = false;
}

if (typeof(slideControls) == "undefined" || typeof(slideControls) != "boolean") {
slideControls = false;
}

if (typeof(slideCaptions) == "undefined" || typeof(slideCaptions) != "boolean") {
slideCaptions = false;
}

if (typeof(slidesClickable) == "undefined" || typeof(slidesClickable) != "boolean") {
slidesClickable = false;
}

return true;
}


function loadSlideshow() {
if (!PrepSlideEnvironment()) {
return false;
}

slideshowContainer.innerHTML = '<img src="http://www.smugmug.com/img/spacer.gif" alt="" id="ssSlide" height="' + slideHeight + '" width="' + slideWidth + '" style="opacity: .99; background-image: url(' + firstSlideUrl + '); background-repeat: no-repeat; background-position: center;" />';

if (slideCaptions) {
slideshowContainer.innerHTML += '<div id="ssCaption"></div>';
}

if (slideControls) {
slideshowContainer.innerHTML += '<div id="ssControl"><a title="Previous Slide" id="ssPrev" class="ssBtn" href="javascript: void(0);" onclick="prevSlide();"><img src="/img/spacer.gif" border="0" /></a><a title="Next Slide" id="ssNext" class="ssBtn" href="javascript: void(0);" onclick="nextSlide();"><img src="/img/spacer.gif" border="0" /></a><a title="Pause Slideshow" id="ssPause" class="ssBtn" href="javascript: void(0);" onclick="pauseSlideshow();"><img src="/img/spacer.gif" border="0" /></a><a title="Resume Slideshow" id="ssPlay" class="ssBtn" href="javascript: void(0);" onclick="resumeSlideshow();"><img src="/img/spacer.gif" border="0" /></a></div>';
}

sSlide = YD.get('ssSlide');
sCaption = YD.get('ssCaption');

if (slidesClickable) {
sSlide.style.cursor = 'pointer';

if (firstSlideUrl != blank.src) {
ssAddSlideClick(slideshowUrl);
}
}

ssSlides = [];
ssSlideTotal = 0;
ssSlideTimer = 0;
ssOldSlide = 0;
ssFadeTimer = 100;
ssFade = "out";

if (slideSourceIsGallery) {
ajax_query(slideshowHandler, '/photos/sspopup.mg?AlbumID=' + /\/gallery\/([0-9]+)/.exec(slideshowUrl)[1], null, true);
} else {
var postArray = [];
postArray['TemplateID'] = '8';
postArray['origin'] = slideshowUrl;
ajax_query(slideshowHandler, '/homepage/templatechange.mg', postArray, true);
}
}


function slideshowHandler(response)
{
if (!slideSourceIsGallery) {
if (tmpCookie && tmpCookie != "") {
setCookie('Template', tmpCookie, 30, '/', 'smugmug.com');
} else {
deleteCookie("Template", "/", "smugmug.com");
}
}

var re = /imageID\[\d+\] = "\d+";/g;
var re2 = /width\[\d+\] = "\d+";/g;
var re3 = /height\[\d+\] = "\d+";/g;
var re4 = /caption\[\d+\] = ".*";/g;

s = response.match(re);
w = response.match(re2);
h = response.match(re3);
c = response.match(re4);

var oSlide;

for (i = 0; i < s.length; i++) {
oSlide = {};

temp = s[i].split(/"/);
oSlide.ImageId = temp[1];
oSlide.File = 'http://upload.smugmug.com/photos/toolthumbs.mg?ImageID=' + temp[1] + '&tool=slideshowXL&winHeight=' + photoHeight + '&winWidth=' + photoWidth;
oSlide.Gallery = slideshowUrl + '/1/' + oSlide.ImageId;

temp = h[i].split(/"/);
oSlide.Height = temp[1];

temp = w[i].split(/"/);
oSlide.Width = temp[1];

temp = c[i].split(/"/);
oSlide.Caption = temp[1];

oSlide.Loaded = false;

if ((oSlide.Width > photoWidth) || (oSlide.Height > photoHeight)) {
if (oSlide.Width >= oSlide.Height) {
oSlide.Height = Math.round((oSlide.Height / oSlide.Width) * photoWidth);
oSlide.Width = photoWidth;
} else {
oSlide.Width = Math.round((oSlide.Width / oSlide.Height) * photoHeight);
oSlide.Height = photoHeight;
}
}

ssSlideTotal = ssSlides.push(oSlide);
}

ssSlideTotal -= 1;

if (randomSlides) {
ssSlides.shift();
ssSlides.shuffle();
ssSlides.unshift(0);
}

if (quickStart) {
ssSlideTimer = (slideDuration * 1000);
}

ssPrepSlide(1);
window.setTimeout("ssPrepSlide(2);", 0);
window.setTimeout("ssPrepSlide(ssSlideTotal);", 0);

if (slideshowType == SLIDE_SHOW) {
ssPlaySlideshow();
} else {
ssSlideSwap(1);
}
}


function ssPauseSlideshow()
{
window.clearTimeout(ssTimerId);
ssTimerId = null;
}


function ssResumeSlideshow()
{
if (!ssTimerId) {
ssTimerId = window.setTimeout("ssPlaySlideshow()", 10);
}
}


function ssPrepSlide(prep)
{
if (ssSlides[prep].Loaded == false) {
ssSlides[prep].Image = new Image();
ssSlides[prep].Image.src = ssSlides[prep].File;
ssSlides[prep].Loaded = true;
}
}


function ssMoveSlide(i) {
ssSlideTimer = 0;
ssFadeTimer = 100;
ssTransition(ssFadeTimer);
ssFade = "out";
ssSlideSwap(i);
}


function ssPlaySlideshow()
{
if (ssSlideTimer >= (slideDuration * 1000))
{
if (ssFade == 'out') {
ssTransition(ssFadeTimer -= 10);
}

if (ssFadeTimer == 0) {
ssSlideSwap(1);
ssFade = 'in';
}

---END---

[PH[O]TO]

With that statement, how do I assign each predetermined color to the particular image in the slideshow?

[konithomimo]

With that statement, how do I assign each predetermined color to the particular image in the slideshow?

To do it client side you would have to use an array, preferably a mulitdimensional or associative array.

[lotuzwine]

This script will generate randown colors, so you have no predetermined colors.

If you dont need predetermined colors, all you need to do is run this script as an event, the "onClick" (when you click the next photo button)

If you need predertemined colors, you will need to create an array, each index is a diferent colors. Whenever you click the buttom, you just need to change the index of the array

cya

[Arty Effem]

Forgive me, for I am a beginner. Will that statement allow me to assign a color that I predetermine for each image in the slideshow? Could you give me an example? Below is the slideshow code that is on the host site. How do I incorporate it into the code? Thanks

When you say 'the host site' do you mean that this code is running on a third-party site? If so do they let you modify the code that controls your slideshow? If not then you can forget it, otherwise that code is incomplete with at least one function missing.

[PH[O]TO]

Yes, I want predetermined colors. Looks like I am in over my head and need to study up some for I am very new to html, javascript, css, etc. If using an array for the colors, can this be coded so that the background color changes with the slideshow which runs automatically, or do you need to have the user click slideshow buttons which would generate an event each photo change?

Anyone have a good how-to link for javascript basics and arrays? Thanks

[PH[O]TO]

Yes, the third-party site lets you customize the code. The slideshow is currently working (code provided by support). I just pasted the javascript section.

[lotuzwine]

these things are best made in flash

[PH[O]TO]

Can you recommend a good starting point for me to learn flash programming?

[lotuzwine]

I dont think learning flash from zero would be a good idea. Instead, try searching some ready solution. Sure, you will learn a few things until you reach what you want with your slideshow.

Try this site, http://www.slideroll.com/


att.

[Colton3310]

Wow, the code is so complex. But it is very easy for those who have no flash knowledge to get the slideshow program. I often share my photos by creating photo slideshows with Kvisoft. I think his website will help you: http://www.kvisoft.com/tutorials/ima...-software.html