Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Issues with CSS Photo Shuffler

    (Note - after returning to an existing older thread and noticing the "bumping up very old threads is highly frowned upon" warning, I'm going to delete my new post to it, and start fresh here. I didn't notice this when initially posting in it, as I hit "quote" then to reply and that notice doesn't display when doing so). I don't mean this as a double post in any way...

    -------------------------------------------------------------------------------------

    In reference to this existing post:

    http://www.codingforums.com/showthre...962#post807962


    I'm trying to use this same photo shuffler, also with some issues. They are:

    • The next image in the rotation appears abruptly, without fading up. In the previous thread, a change to the person's HTML code was suggested to fix this. However, I can find no similar language in my code, so I'm not sure how to incorporate such a fix.
    • The other problem occurs when using IE7 (and possibly previous versions of Explorer). Each of the images are 800px wide, and is meant to be centered horizontally. The body of the site is 960px wide. The current image in the rotation displays correctly, but a piece of the next image up is filling the 80px to either side, instead of just my background color. The previous thread suggested adding (unless I'm misunderstanding)
    • In viewing the page of my site with the shuffler in IE7, I get the "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer." That's a big concern, as I don't want people to think there is a safety issue in viewing my site...
      Code:
      #photodiv{
          background-position: 1px 1px;
          background-repeat: no-repeat;
      }
      to the CSS to fix such an issue. Besides trying to figure out the exact place this should go in the context of my code, I'm getting a syntax error in Dreamweaver when trying to insert this code.


    My current code (with my content replaced with generic text/filenames) is below. I'm new to this world, and am designing this site for a business I'm going to launch. Thank you in advance...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    html, body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic";
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    	text-shadow: #A2C8CA 0 0 1px;
    	-webkit-text-stroke: 0.65px
    	-webkit-font-smoothing: antialiased;
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: 11pt;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    	color: #AED6D9;
    	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    }
    a:visited {
    	color: #AED6D9;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    overflow: auto;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
    	height: 200px;
    	width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	position: fixed;
            z-index: 1000;
    }
    .header img {float: left;}
    	.header ul {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 127px;
    			margin: 0px;
    			float: left;
    		}
    			
    			
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    
    .bigger { font-size:85%; }
    
    /* ~~ The footer ~~ */
    .footer {
    	height: 15px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 10px 0;
    	position: fixed;
    	bottom: 0;
    	left: 50%;
    	background: #603B3D;
    }
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style><script type="text/javascript">
     <!--//--><![CDATA[//><!--
     
      //
      // CSS Photo Shuffler v1.0 by
      //   Carl Camera
      //   http://iamacamera.org 
      //
      // SetOpacity Function and inpiration from Photo Fade by
      //   Richard Rutter
      //   http://clagnut.com
      //
      // License: Creative Commons Attribution 2.5  License
      //   http://creativecommons.org/licenses/by/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(
            "photo2.jpg",
      "photo3.jpg",
      "photo4.jpg",
      "photo5.jpg",
      "photo6.jpg",
      "photo7.jpg",
      "photo8.jpg",
      "photo1.jpg"
        );
      var gblPauseSeconds = 7.25;
      var gblFadeSeconds = .85;
      var gblRotations = 100;
    
      // 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] + ')';
    	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);
    	
    	// copy div background-image to img.src
    	theimg.src = gblImg[gblOnDeck];
    	// 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;
    	}
    
    	// 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;
    }
    
    //--><!]]>
    </script>
    
    <!--------------------------------------------------------------------------------
    <!--
    var gblPhotoShufflerDivId = "photodiv";
    var gblPhotoShufflerImgId = "photoimg"; 
    var gblImg = new Array--></head>
    
    <body>
    
    <div class="container">
      <div class="header"><img src="LOGO" width="443" height="186" alt="Logo 443"><ul>
                    	<li><a href="pagelink"><img src="button1" width="127" height="90" alt="button1"></a></li>
                    	<li><a href="pagelink"><img src="button2" width="127" height="90" alt="button2"></a></li>
    		<li><a href="pagelink"><img src="button3" width="127" height="90" alt="button3"></a></li>
    		<li><a href="pagelink"><img src="button4" width="127" height="90" alt="button4"></a></li>
    		<li><a href="pagelinkl"><img src="button5" width="127" height="90" alt="button5"></a></li>
    		<li><a href="pagelink"><img src="button6" width="127" height="90" alt="button6"></a></li>
    		<li><a href="pagelink"><img src="button7" width="127" height="90" alt="button7"></a></li>
                    	<li><a href="pagelink"><img src="button8" width="127" height="90" alt="button8"></a></li>
                    </ul></div>
      <div class="content">
        <p>&nbsp;</p>
        <div id="photodiv"><center>
    <img id="photoimg" src="photo1.jpg" /></center>
    </div>
        <br>
        <p>My first paragraph.</p>
        <p>&nbsp;</p>
        <p>My second paragraph.</p>
        <p>&nbsp;</p>
        <p>My third paragraph.<br>
        </p>
        <p>&nbsp;</p>
        <p></p>
        <h1>&nbsp;</h1>
        <strong>
        <!-- end .content -->
      </strong></div>
      <div class="footer">
        <CENTER><p><span class=bigger><a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a></span></p></CENTER>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>
    Last edited by MMM717; 11-26-2012 at 08:58 AM.

  • #2
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I re-wrote my thread starting post, as I fixed one of my initial problems, and also discovered a new one in the process. Thanks for looking...

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I wanted to update this as I cannot edit my original post any longer. I found that my third issue - the ActiveX warning - is likely due to myself running the site from my computer, instead of actually being hosted online.

    The first two issues remain.

    In addition, the following code in my original post:
    Code:
    #photodiv{
        background-position: 1px 1px;
        background-repeat: no-repeat;
    }
    is something another member suggested using in the previous thread (linked above) to fix someone's alignment issues, which I thought would relate to my issue with the next picture in the rotation spilling over to the sides in IE7. Inserting this coding in Dreamweaver is giving me a syntax error...
    Last edited by MMM717; 11-29-2012 at 05:53 AM.

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I was able to fix my second issue noted above - the image "bleed" to either side. I basically covered this problem up by creating an image that only contains my background color in the exact size needed to cover each side.

    However, I still have the problem with the next image in the rotation not fading up as the current one is fading down. I'm having somewhat browser specific problems here:

    • 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 initally 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. Note

    there is some browser specific code in there from its designer:


    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    
      //
      // CSS Photo Shuffler v1.0 by
      //  Carl Camera
      //  http://iamacamera.org
      //
      // SetOpacity Function and inpiration from Photo Fade by
      //  Richard Rutter
      //  http://clagnut.com
      //
      // License: Creative Commons Attribution 2.5  License
      //  http://creativecommons.org/licenses/by/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] + ')';
    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);
    
    // copy div background-image to img.src
    theimg.src = gblImg[gblOnDeck];
    // 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;
    }
    
    // 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;
    }
    
    //--><!]]>
    </script>
    
    <!--------------------------------------------------------------------------------
    <!--
    var gblPhotoShufflerDivId = "photodiv";
    var gblPhotoShufflerImgId = "photoimg";
    var gblImg = new Array-->


  •  

    Posting Permissions

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