code.Atomic8Ball.com

tiny Cycle instructions

  1. Confirm that jQuery (1.5+) is present.
  2. Between the <head> & </head> tags add the following: <script type="text/javascript" src="https://code.a8b.co/tcycle/js/jquery-min.tcycle.js" defer="defer"></script>
    If your site has head.js implemented, then your code will look like this: <script type="text/javascript">head.load("https://code.a8b.co/tcycle/js/jquery-min.tcycle.js");></script>
  3. Add the following HTML where you would like your slideshow to appear: <div class="tcycle">
      <img src="img1.png" />
      <img src="img2.png" />
      <img src="img3.png" />
    </div>     You can wrap <a> tags around the <img> tags as normal to have the pictures link somewhere. Whatever the FIRST tag is that's inside of the div, is what's cycled between. So the cycled items should all be the same tag type.

    Optional elements on the container div: data-fx : fade or scroll, fade is the default so doesn't need to be included unless wanting scroll
    data-speed : time in ms that transition takes to process (default 500)
    data-timeout : time in ms between transitions (default 4000)

    example with all three:
    <div class="tcycle" data-fx="scroll" data-speed="2000" data-timeout="9000">
  4. Advanced tcycle

    Want your tcycle to look just like nivo slider, just less resource intensive? Set up your structure something like this:

    <div class="tcycle">
      <a class="slide1" href="" title="">
        <strong></strong>
        <p></p>
        <span></span>
      </a>
    </div>
    • Repeat the <a> for additional slides
    • Set dimensions on .tcycle a
    • Position text with the left:, top:, and bottom: entries, and width on p

    Drop this CSS into your stylesheet, adjusting appropriately for your task at hand:

    .tcycle {box-shadow:0 1px 5px 0 #4a4a4a;width:670px;height:195px;overflow:hidden;}
    .tcycle a {display: block;width:100%;height:100%;text-decoration:none;position:relative;}
    .tcycle strong, .tcycle p, .tcycle span{opacity: 0.8;position:absolute;left:40px;}
    .tcycle strong { color: #191919; font: bold 21px questrial, serif;top:20px; }
    .tcycle p{color:#333;font-size:14px;width:350px;top:80px;}
    .tcycle span{border-radius:5px;color:#fff;background:#002034;padding:5px 10px;bottom:20px;}
    .tcycle a:hover span{text-decoration:underline;}
    .slide1{background:url(/images-design/banner/01.jpg)}
    .slide2{background:url(/images-design/banner/02.jpg)}
    .slide3{background:url(/images-design/banner/03.jpg)}

    This structure also has the advantage that the entire slide is clickable, rather than just the call-to-action.