How To Rewrite Code For Fading In An Image

Todd_Temple · October 21, 2013, 6:40pm

I have a carousel or slideshow seen here (div class=“banner”):

LINK-
http://www.tocdocs.com/index.102113.php

And currently the images do not fade in. They just automatically appear. How can I make the next image in the sequence fade in on top of the current image shown?

I am assuming it would have something to do with rewriting this portion of code. Am I correct?

ps_banner.select=function(a){var b=$("#banner"+[a]);
if(typeof b.attr("data-lazy-load")!="undefined"&&typeof b.attr("src")=="undefined"){b.attr("src",b.attr("data-lazy-load"))
}$(".active").css({opacity:1,visibility:"hidden"}).removeClass("active");
b.css({opacity:1,visibility:"visible"}).addClass("active").stop().animate({opacity:1},1500,function(){});
$(".bannerControls .selected").removeClass("selected").addClass("selector");
$("#ctrl"+a).removeClass("selector").addClass("selected")
};

James_Hibbard · October 21, 2013, 8:33pm

Hi there,

I got this working for you, but had to make the following changes:

Remove the visibility:hidden and opacity:0; inline CSS delarations from the images.
Same thing with the CSS declarations at the top of the page for “.banner img” and “.banner img.active”.
I had to rewrite parts of components.min.js - you can just copy the code from below.

That said, here’s the code:

<!doctype html>
<html>
  <head>
    <base href="http://www.tocdocs.com/" />
    <meta charset="UTF-8">
    <title>Tennessee Orthopaedic Clinics</title>
    <link href="c/style.css" rel="stylesheet" type="text/css" media="screen">
    <style type="text/css">
      #banner {background:transparent url(i/gfx_slide_staff.jpg) no-repeat 0 0;height:265px;width:645px;margin:0;}
      html{}
      body{margin:0;padding:0;}
      .banner{position:relative;width:609px;padding:0;float:left;height:265px;margin:0 31px 28px 36px;}
      .banner:before {content:'';background: url(i/gfx_slide_bkg.png) no-repeat 0 0;display:block;height:265px;position:absolute;left:-36px;top:0;width:36px;}
      .banner ul.bannerControls{bottom:-22px;left:230px;visibility:visible;}
      .visibile{visibility:visible;}
      .hidden{visibility:hidden;display:none;}
      a img{border:none;}
      .banner{position:relative;}
      .banner img{position:absolute;top:0;left:0;}
      .banner .bannerControls{margin:0;}
      .bannerControls{position:absolute;}
      .bannerControls .control{height:20px;width:21px;border-spacing:0;background:url(i/gfx_controls.png) no-repeat;float:left;}
      #previous{background-position:-1px -58px;}
      #next{background-position:-51px -58px;}
      .bannerControls .selector{background-position:-26px -58px;}
      .bannerControls .selected{background-position:-26px -1px;cursor:default;}
      #previous:hover{background-position:-1px -29px;cursor:pointer;}
      #previous:active{background-position:-1px -1px;}
      #next:hover{background-position:-51px -29px;cursor:pointer;}
      #next:active{background-position:-51px -1px;}
      .selector:hover{background-position:-26px -29px;cursor:pointer;}
      .banner li{list-style:none;padding-bottom:0;}
      a{outline:none;}
      .hidden{display:none;}
    </style>
  </head>
  
  <body>
    <div id="wrap">
      <div id="inner">
        <div class="banner">
          <p data-disable-auto-rotate="false" data-disable-controls="false">
            <a href="/blog/halloween-a-night-of-fun-freaks-and-falls/"><img id="banner0" class="bannerImg" alt="Helpful tips to ensure a safe and Happy Halloween!" title="Helpful tips to ensure a safe and Happy Halloween!" src="i/gfx_slide_halloween_rev.jpg"></a> 
            <a href="/doctors/daniel-g-branham-md/"><img id="banner1" class="bannerImg" alt="TOC Welcomes Daniel G. Branham, M.D. to our team!" title="TOC Welcomes Daniel G. Branham, M.D. to our team!" src="i/gfx_slide_branham_rev.jpg"></a> 
            <a href="doctors/david-k-tutor-md/"><img id="banner2" class="bannerImg" alt="TOC Welcomes Samuel Yoakum D.O. to our team!" title="TOC Welcomes Samuel Yoakum D.O. to our team!" src="i/gfx_slide_tutor_rev.jpg"></a> 
            <a href="blog/get-to-know-our-staff/"><img id="banner3" class="bannerImg" alt="Get To Know Our Staff" title="Get To Know Our Staff" src="i/gfx_slide_staff_rev.jpg"></a> 
            <a href="specialties/"><img id="banner4" class="bannerImg" alt="Tell Us What Hurts" title="Tell Us What Hurts" src="i/gfx_slide_hurts_rev.jpg"></a> 
            <a href="blog/total-joint-replacement/"><img id="banner5" class="bannerImg" alt="Considering Total Joint Replacement?" title="Considering Total Joint Replacement?" src="i/gfx_slide_joint_rev.jpg"></a> 
          </p>
        </div>
      </div>
    </div>
  
    <script type="text/javascript" src="j/jquery-1.2.3.min.js"></script>
    <script>
      // components.min.js
      var ps = {defineStructure: function(b, e) {
              var d = e.split(".");
              var a = b;
              for (var c = 0; 
              c < d.length; 
              c++) {
                  if (typeof a[d[c]] === "undefined") {
                      a[d[c]] = {}
                  }
                  a = a[d[c]]
              }
              return a
          },declarePackage: function(a) {
              return ps.defineStructure(window, a)
          },exists: function(d) {
              var c = d.split(".");
              var a = window;
              for (var b = 0; 
              b < c.length; 
              b++) {
                  if (typeof a[c[b]] === "undefined") {
                      return false
                  }
                  a = a[c[b]]
              }
              return true
          },get: function(b, a) {
              if (ps.exists(b)) {
                  return ps.declarePackage(b)
              } else {
                  return a
              }
          }};
      var ps_banner = {};
      ps_banner.bannerInterval = setInterval("ps_banner.next()", 8000);
      ps_banner.next = function() {
          var a = jQuery.inArray($(".active")[0], $(".bannerImg"));
          ps_banner.select(a === $(".bannerImg").length - 1 ? 0 : a + 1)
      };
      
      ps_banner.select = function(a) {
          var b = $("#banner" + [a]);
          if (typeof b.attr("data-lazy-load") != "undefined" && typeof b.attr("src") == "undefined") {
              b.attr("src", b.attr("data-lazy-load"))
          }
        
          $(".active").fadeOut(1000, function(){ $(this).removeClass("active") });
          b.fadeIn(1000, function(){ $(this).addClass("active") });
          
          $(".bannerControls .selected").removeClass("selected").addClass("selector");
          $("#ctrl" + a).removeClass("selector").addClass("selected")
      };
      
      $(document).ready(function() {
          //$(".bannerImg").css({visibility: "hidden"});
          $(".bannerImg").hide();
          
          if (typeof $("#banner0").attr("data-lazy-load") != "undefined") {
              $("#banner0").attr("src", $("#banner0").attr("data-lazy-load"))
          }
          
          //$("#banner0").addClass("active").css({opacity: 1,visibility: "visible"});
          $("#banner0").addClass("active").show();
          
          if (typeof $(".banner> p").attr("data-disable-auto-rotate") !== "undefined" && $(".banner> p").attr("data-disable-auto-rotate") === "true") {
              clearInterval(ps_banner.bannerInterval)
          }
          
          if (typeof $(".banner> p").attr("data-disable-controls") === "undefined" || $(".banner> p").attr("data-disable-controls") === "false") {
              $(".banner").append('<ul class="bannerControls"></ul>');
              $(".bannerControls").append('<li id="previous" class="control previous"></li>');
              $(".bannerImg").each(function(a) {
                  $(".bannerControls").append('<li id="ctrl' + a + '" class="control selector"></li>')
              });
              $("#ctrl0").removeClass("selector");
              $("#ctrl0").addClass("selected");
              $(".bannerControls").append('<li id="next" class="control next"></li>')
          }
          $("#previous").click(function() {
              var a = jQuery.inArray($(".active")[0], $(".bannerImg"));
              ps_banner.select(a == 0 ? $(".bannerImg").length - 1 : a - 1);
              clearInterval(ps_banner.bannerInterval)
          });
          $("#next").click(function() {
              ps_banner.next();
              clearInterval(ps_banner.bannerInterval)
          });
          $(".bannerControls .selector,.bannerControls .selected").click(function() {
              ps_banner.select($(this).attr("id").substring(4));
              clearInterval(ps_banner.bannerInterval)
          })
      });
      function positionBannerControls() {
          if (typeof $(".banner").attr("data-fixed-position-controls") === "undefined" || $(".banner").attr("data-fixed-position-controls") !== "true") {
              var a = $(".banner").outerHeight() / 10;
              var b = $(".banner").outerWidth() / 2 - $(".bannerControls").outerWidth() / 2;
              $(".bannerControls").css({bottom: a,left: b})
          }
      };
    </script>
  </body>
</html>

And a demo.

Might I also point out that there appears to be a lot of redundant code in that page.
For example, you include all of the JS and CSS files for the Nvidio slider, then call .slider() on an element that doesn’t exist!
You are also including jQuery twice, which at best is superfluous and at worst will cause unexpected behaviour.

Please don’t interpret that as criticism, I’m just trying to point out a couple of ways you could make your code more manageable and increase your page loading times (unless of course this is a stripped down page for the purposes of the forum).

Todd_Temple · October 21, 2013, 8:53pm

Pullo,

Thank you so much for fixing my issue! I had not noticed the redundant code and I will go and clean up that page next. I can’t thank you enough! You are awesome!

Todd