WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Problem with photoshuffler on Fri Nov 30, 2012 8:33 am


Registered Member
Registered Member

I'm not sure if this is best room of the forum for this question, so my apologies in advance if it needs to be moved.

I'm putting together a site for a business I've created. I'm trying to use the photoshuffler below in one of the site's pages:

h t t p : / / i a m a c a m e r a . o r g /s a n d b o x / p h o t o s h u f f l e r /

I like this shuffler since it's clean looking, with no ornamentation, buttons, etc. However, I'm having the following issue with it. It is somewhat browser specific:

  • In Chrome and Firefox, the new image "pops" instead, with the image it is replacing reappearing for a brief, split second. The only variant to this is where the rotator initially appears to "work" as it replaces the image placed in a div - the pop is

    still there then, but the brief re-occurrence of the previous image is not. This only happens once since - even though I've set the rotator to run infinitely - it only uses the image in the div when the page initially loads. This is why, when I've replaced my filenames in the code below with image numbers, I started with image 2 (as image 1 is initially seen on the page from the div).
  • In IE7 the fade up/down is working BUT while the fade is occurring, a portion of the left side of the new image is cut off and appears on the right edge of the picture. Within a second (if that), the current picture appears normally. This repeats with each new picture up in the rotation. It's almost like you can see the shuffle happening, but it's not completed in time to make the change transparent.

I've repasted the script code for the shuffler below. Hopefully someone could make some sense of these issues as they relate to the code, and can tell what needs to be adjusted (if anything), if something needs to be added, removed, etc. If you need to see all the code from this page (related to the shuffler or not), please advise and I'll post it (with any content specific to my project replaced with generic). Note there is some browser specific code in there from its designer:


<script type="text/javascript">

  // CSS Photo Shuffler v1.0 by
  //  Carl Camera
  //  h t t p : / / i a m a c a m  e ra  . o r g
  // SetOpacity Function and inpiration from Photo Fade by
  //  Richard Rutter
  //  h t t p : / / c l a g n u t . c o m
  // License: Creative Commons Attribution 2.5  License
  //  h t t p : / / c  r e at i  v e c o m m o n s . o r g / l i c e n se s / b y / 2 . 5 /

  // Customize your photo shuffle settings
  // * Surround the target < img /> with a < div >. specify id= in both
  // * The first and final photo displayed is in the html <img> 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.

var gblPhotoShufflerDivId = "photodiv";
  var gblPhotoShufflerImgId = "photoimg";
  var gblImg = new Array(
        "IMAGE 2.jpg",
  "IMAGE 3.jpg",
  "IMAGE 4.jpg",
  "IMAGE 5.jpg",
  "IMAGE 6.jpg",
  "IMAGE 7.jpg",
  "IMAGE 8.jpg",
  "IMAGE 1.jpg"
  var gblPauseSeconds = 7.25;
  var gblFadeSeconds = .85;
  var gblRotations = 1;

  // End Customization section

var gblDeckSize = gblImg.length;
  var gblOpacity = 100;
  var gblOnDeck = 0;
  var gblStartImg;
  var gblImageRotations = gblDeckSize * (gblRotations+1);

  window.onload = photoShufflerLaunch;

  function photoShufflerLaunch()
var theimg = document.getElementById(gblPhotoShufflerImgId);
        gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

  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;
// pause before next fade
gblOpacity -= fadeDelta;
setTimeout("photoShufflerFade()",30);  // 1/30th of a second

  function photoShufflerShuffle()
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100

        // shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (gblImageRotations < 1)
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;

// 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;


var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array-->

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum