jQuery

Fade .jpg images

Works with:
FF3
Chrome
IE6
IE7
Opera
Safari

Description

Replace those gif images with jpgs with higher quality and smaller filesizes. Use this script to do it. Works with any image format too (.jpg/.gif/.png).

Demo

jpg 1 jpg 2 jpg 3
jpg 1 jpg 2 jpg 3 jpg 4 jpg 5
jpg image 1 jpg image 2 jpg image 3 jpg image 4
gif 1

JavaScript

  1. $(".jpgs img").ready(function() {
  2.     $(".jpgs img").hide();
  3. });
  4.  
  5. $(".jpgs").ready(function() {
  6.     $(".jpgs").each(function(i) {
  7.         var numImages = $(this).children("img").length;
  8.         $(this).children("img").each(function(j) {
  9.             $(this).wait(j*4000);
  10.             fadeImage($(this),((numImages-1)*4000)-3000);
  11.         });
  12.     });
  13. });
  14.  
  15. function fadeImage(obj, total) {
  16.     obj.fadeIn(1000, function() {
  17.         obj.wait(3000);
  18.         obj.fadeOut(1000, function() {
  19.             obj.wait(total);
  20.             fadeImage(obj,total);
  21.         });
  22.     });
  23. }

CSS

  1. #jpg_example1,
  2. #jpg_example2,
  3. #jpg_example3,
  4. #gif_example {
  5.     margin: 10px;
  6. }
  7.  
  8. #jpg_example1,
  9. #jpg_example2 {
  10.     width: 150px;
  11.     height: 150px;
  12. }
  13.  
  14. #jpg_example3,
  15. #gif_example1 {
  16.     width: 400px;
  17.     height: 300px;
  18. }
  19.  
  20. /*Jpg Styling*/
  21. .jpgs img {
  22.     position: absolute;
  23. }

XHTML

  1. <div id="jpg_example1" class="jpgs">
  2.     <img src="jpg1.jpg" alt="jpg 1" title="jpg 1" />
  3.     <img src="jpg2.jpg" alt="jpg 2" title="jpg 2" />
  4.     <img src="jpg3.jpg" alt="jpg 3" title="jpg 3" />
  5. </div>
  6.  
  7. <div id="jpg_example2" class="jpgs">
  8.     <img src="jpg1.jpg" alt="jpg 1" title="jpg 1" />
  9.     <img src="jpg2.jpg" alt="jpg 2" title="jpg 2" />
  10.     <img src="jpg3.jpg" alt="jpg 3" title="jpg 3" />
  11.     <img src="jpg4.jpg" alt="jpg 4" title="jpg 4" />
  12.     <img src="jpg5.jpg" alt="jpg 5" title="jpg 5" />
  13. </div>
  14.  
  15. <div id="jpg_example3" class="jpgs">
  16.     <img src="jpgimage1.jpg" alt="jpg image 1" title="jpg image 1" />
  17.     <img src="jpgimage2.jpg" alt="jpg image 2" title="jpg image 2" />
  18.     <img src="jpgimage3.jpg" alt="jpg image 3" title="jpg image 3" />
  19.     <img src="jpgimage4.jpg" alt="jpg image 4" title="jpg image 4" />
  20. </div>
  21.  
  22. <div id="gif_example">
  23.     <img src="gif1.gif" alt="gif 1" title="gif 1" />
  24. </div>
  25.