1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Continuous rotating images using css

Discussion in 'CSS' started by jcjones, Apr 20, 2013.

  1. #1
    I'm trying to create a group of 5 images on a clients homepage that infinitely loops and fades in and out. The fade in and out isn't a requirement but definitely a bonus.

    I found one solution that worked perfect except the client was unhappy with the load time. here is the page.http://newhomeliposuction.com/index-testanimation.asp
    I got the code from here. http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

    I found another solution that works on my HTML site but won't work on his ASP site. At least I think that's the reason.
    this is the ASP page: http://newhomeliposuction.com/index-testanimation5.asp
    this is the HTML page: http://www.jcarterjones.com/animation-script3.html
    SEMrush
    Thanks for the help! I apologize if this is mentioned anywhere on this site. I did a brief search and didn't find anything.
    jcj
     
    Solved! View solution.
    jcjones, Apr 20, 2013 IP
    SEMrush
  2. #2
    The massive images used in image rotators are an inherent part of why they are slow, and part of why I don't beleive in putting that nonsense on websites (the other being forcing yourself into an inaccessible fixed width).... It gets worse when you add the endless pointless jquery bloat to a page, wait for onload to start the functionality, etc, etc...

    I put one together quickly for another user not that long ago:
    http://www.cutcodedown.com/for_others/tksForLife/template.html

    that's only 5k of javascript and a handful of CSS to make it work. The directory:
    http://www.cutcodedown.com/for_others/tksForLife/

    is open so you can extract the bits and pieces to try it if you like.

    As you can see the markup to make it work:
    <div id="homeBanner" class="imageRotate">
    	<img
    		src="images/homepage/everafter_clipped.jpg"
    		width="100%"
    		alt="Married couple on the Beach"
    	/>
    	<img
    		src="images/homepage/burstofcolor_clipped.jpg"
    		width="100%"
    		alt="Colorful Flower"
    	/>
    	<img
    		src="images/homepage/ido_clipped.jpg"
    		width="100%"
    		alt="Couple holding hands during marriage Ceremony"
    	/>
    </div>
    Code (markup):
    Is really simple, the scripting you add right before </body> is simple as well:

    <script type="text/javascript" src="imageRotate.js"></script>
    <script type="text/javascript">
    	imageRotate.add('homeBanner');
    </script>
    Code (markup):
    It's capable of running multiple image rotators on a page as well, just target them with the .add method by ID.

    CSS actually does most of the heavy lifting.

    Still, by their very nature the massive image rotating nonsense is fat, bloated, slow, and accessibility headache and not something I believe in having on websites in the first place. I would seriously consider axing the entire concept; much less that if you have that, dimes to dollars you also have a fixed width layout making it need to be thrown out and started over anyways. (though that's a wild guess)
     
    deathshadow, Apr 20, 2013 IP
    Karen May Jones likes this.
  3. jcjones

    jcjones Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks for the help! Works great!

    Unfortunately the client loves the looping images and he's also unwilling to drop the fix width. He still loves to scroll the page endlessly. It disgusts me.

    One last question. On my test page there is a thin line below the images still.
    http://www.jcarterjones.com/animation-script4.html

    How can I remove this?

    thanks again for your help and quick response. All suggestions are duly noted.
    jcj
     
    jcjones, Apr 20, 2013 IP
  4. jhine

    jhine Active Member

    Messages:
    25
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    53
    #4

    If you're referring to the thin black line, then you'll need to look at
    .imageRotate img { }
    Code (markup):
    and replace 'border' to '0'
     
    jhine, Apr 20, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #5
    It's probably this:
    .imageRotate img {
    display:block;
    border:solid #000;
    border-width:1px 0;
    }

    But I'm not sure, having trouble isolating it in firebug or dragonfly
     
    deathshadow, Apr 20, 2013 IP
  6. jcjones

    jcjones Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    I changed the border width to '0' and that worked.

    Thanks again!
     
    jcjones, Apr 20, 2013 IP
  7. The_Valleyman

    The_Valleyman Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    A question for you deathshadow (forgive me if this is terribly obvious but i've just started playing with css & jquery:

    I've reduced the image size in my code to about 70% and center aligned the div, so there is some white space around the images.
    Now in this case, when the 2nd image replaces the first, a part of the 1st image is still visible, it doesn't overlap the image but is still present(due to the z-index value I presume: Image attached)
    I'd like this to disappear when the 2nd image comes on screen. How do I achieve that?
     

    Attached Files:

    The_Valleyman, Apr 1, 2016 IP
  8. The_Valleyman

    The_Valleyman Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    Update: Figured it out :)

    Setting the z-index value to -1 worked.
     
    The_Valleyman, Apr 1, 2016 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #9
    Whilst playing with z-index will kind-of fix it (as you discovered) the better approach is to keep those images as width:100% and height:auto, and instead resize the DIV around them so the images size to the DIV. Then you won't see those positioning issues.

    Basically, leave the img tags dynamic, adjust the CONTAINER instead. Really that's the rule for all dynamic layouts.
     
    deathshadow, Apr 2, 2016 IP
  10. The_Valleyman

    The_Valleyman Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    Yeah, that makes a lot of sense. I'll do that instead!
    Thanks deathshadow, appreciate the assist.
     
    The_Valleyman, Apr 2, 2016 IP