SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Rewrite Code For Fading In An Image

    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?

    Code:
    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")
    };
    Todd Temple > T2 Design

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    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:

    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).

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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).
    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
    Todd Temple > T2 Design


Bookmarks

Posting Permissions

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