Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 731
  • Last Modified:

Animated Jpeg?

Hi

I've prodced an animated GIF for my website banner but some of the image quallity is distorted.

What I want to do is use the original jpegs and animated them. I have tried


 This css3 but it doesn not work in opera or most versions of IE



<div id="cf">
	<img class="bottom" src="/tests/images/Stones.jpg" />
	<img class="top" src="/tests/images/Summit.jpg" />
</div>

Open in new window



@keyframes cf3FadeInOut {
	0% {
		opacity:1;
	}
	45% {
		opacity:1;
	}
	55% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

#cf3 img.top {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
}

Open in new window



Can anyone suggest a cross browser solution to animate 5 jpegs for a website banner?

Thanks
0
Ed
Asked:
Ed
1 Solution
 
Kyle HamiltonData ScientistCommented:
you'll need javascript if you need cross-browserablity

Would you like a javascript solution?
0
 
EdAuthor Commented:
yes please- it doesn't have to be css
0
 
mizzinessCommented:
jQuery has some really excellent components for doing this.  

http://api.jquery.com/category/effects/

I'd just use this :)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Kiran Paul VJComputer EngineerCommented:
Try the code mentioned here, you can give the file names in an array.

http://www.computing.net/answers/digitalphoto/can-jpg-or-jpeg-be-animated/1314.html
0
 
Kyle HamiltonData ScientistCommented:
If you're going to use jquery, here is one I wrote for a continuous fadein/fadeout effect (I made it into a plugin, but right now the plugin only has a reveal effect : http://www.candpgeneration.com/toys/toys-slideshow-reveal-plg.php).

But there's lots of others out there. jquery cycle is a good one.

For this one, you'll want to adjust the width, height, the names of the images, and the image path.

In the html, just add:

<div class="myslideshow"></div> where you want the slide show to appear.

var sw = 400; // slideshow width
   var sh = 300; // slideshow height
   var slideshow = $(".myslideshow"); // slideshow container element
   
   var images = ["img1.jpg", 
                 "img2.jpg",
                 "img3.jpg",
                 "img4.jpg"];
             
   var imagePath = "../images/";   
   var speed = 500; // how quickly it fades
   var slideInterval = 2500; // time between slide fades
   
// no need to edit below this line

   slideshow.css({width: sw, height: sh, "position":"relative", "overflow":"hidden"});
             
   var numImages = images.length;
   
   var slides = [];
   
   // make a slide object
   function Slide(w, h, img){
        var slide = $("<div>", {
            css:{
                    position : "absolute",
                    width    : w,
                    height   : h,
                    opacity  : 0,
                    background: "url("+imagePath+img+") 0px 0px no-repeat"
                },
            rel: img    
                });
                return slide;
   };
   
   for(var i = 0; i < numImages; i++){
   
    slides.push(new Slide(sw, sh, images[i]));
    
   }
   
   slideshow.html(slides[0]);
   slideshow.prepend(slides[1]);
   
   slides[0].css({opacity : 1});
   
   var dotheslide = function(){
       
       slideshow.children("div").first().animate({opacity : 1}, {queue:false});
       slideshow.children("div").last().animate({opacity : 0}, speed, function(){
           
            slides.push(slides[0]);
            slides.shift();
            slideshow.html(slides[0]);
            slideshow.prepend(slides[1]);

            slideshow.children("div").first().css({opacity : 1});
       });   
       
       
   }
   
   
   var inter;
   
   inter = setInterval (function(){
       dotheslide();
   }, slideInterval);
   

// this will pause the slide show on mouse hover:
   slideshow.on("mouseenter", function(){
       clearInterval(inter);
      
   }).mouseleave(function(){
        inter = setInterval (function(){
        dotheslide();
        }, slideInterval);
   });

Open in new window


preview: http://www.candpgeneration.com/toys/toys-slideshow-fade.php
0
 
EdAuthor Commented:
sorry for the delayed response but I have been ill.

Anyway, back to it now and this solution was perfect, thankyou
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now