www.webdeveloper.com
Results 1 to 13 of 13

Thread: Change Background Color with a photo slideshow

  1. #1
    Join Date
    Feb 2007
    Posts
    6

    Change Background Color with a photo slideshow

    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

  2. #2
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by 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
    Have it execute this line whenever it changes the image:
    Code:
    document.body.style.backgroundColor='#'+Math.floor(Math.random()*0xFFFFFF).toString(16);
    Scripterlative.com

    PM = 'PayPal Mode'

  3. #3
    Join Date
    Feb 2007
    Posts
    6
    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---

  4. #4
    Join Date
    Feb 2007
    Posts
    6
    With that statement, how do I assign each predetermined color to the particular image in the slideshow?

  5. #5
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by PH[O]TO
    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.

  6. #6
    Join Date
    Dec 2006
    Location
    Brazil
    Posts
    80
    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
    lotuzwine

  7. #7
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by 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
    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.
    Scripterlative.com

    PM = 'PayPal Mode'

  8. #8
    Join Date
    Feb 2007
    Posts
    6
    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

  9. #9
    Join Date
    Feb 2007
    Posts
    6
    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.

  10. #10
    Join Date
    Dec 2006
    Location
    Brazil
    Posts
    80
    these things are best made in flash
    lotuzwine

  11. #11
    Join Date
    Feb 2007
    Posts
    6
    Can you recommend a good starting point for me to learn flash programming?

  12. #12
    Join Date
    Dec 2006
    Location
    Brazil
    Posts
    80
    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.
    lotuzwine

  13. #13
    Join Date
    May 2013
    Location
    New York,United States
    Posts
    6
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles