Image Rotator - Start Here

Version 3

    Image rotators are an amazing and simple way to 'grab' the attention of users. Here is a simple starter to use moving forward!

     

    How To -

    1. Create an HTML Widget
    2. Select "Edit this Widget"
    3. Upload the following files with "Manage Files" in the HTML Widget:
      • /jquery.js | just the most recent version of jquery (copy this url)
      • /image.js | the code that runs the rotation (copy this url)
    4. Add the code from "Code Time"
    5. Replace what is within the "" on line 17 with the jquery.js URL (by selecting: URL: Copy to Clipboard within "Manage Files")
    6. Replace what is within the "" on line 18 with the image.js URL (by selecting: URL: Copy to Clipboard within "Manage Files")
    7. Finally, select "Save Properties"!

     

    Code Time -

    <style>
      #imgs {
      position: relative;
      margin: 20px auto;
      width: 514px;
      height: 320px;
      }
      #imgs > div {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      }
    </style>
    
    <script src=""></script>
    <script src=""></script>
    
    <div id="imgs">
      <div style="display: block;"><img src="http://randomlyopen.com/demo/01.jpg"></div>
      <div style="display: none;"><img src="http://randomlyopen.com/demo/02.jpg"></div>
      <div style="display: none;"><img src="http://randomlyopen.com/demo/03.jpg"></div>
    </div>
    
    
    

     

    Making it Yours -

    • You can change the speed by opening image.js. If you need more of an explanation, let me know!
    • Edit the CSS to your desire!

     

    Possible Issues -

    1. Some systems do not allow you to upload .js files within the "Manage Files" area. This is great for safety! If this occurs, you can always upload these files within the theme files if you do a custom theme.
    2. Make sure to 'refresh' your page after you've selected "Save Properties"

     

    Let me know any customizations you want and I will try to get them done for you but this is a very simple, starting point!