How to change images at the same time using JQuery?

akohan
akohan used Ask the Experts™
on

Hello,

my client wants to show 6 images on his home page (each in a DIV) and using JQuery we have to change images at the same time(simultaneously). However, I have not been able to to make this work.

Is such a thing possible using JQuery?

Thanks,
ak
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Change the images how exactly?

Do you mean just change the src of the images all at once?
Multitechnician
Top Expert 2014
Commented:
var imgLoadedCounter = 0;

$(document).ready(function() {

$("img", "#containerID").hide();
$("img", "#containerID").load(function() { if(++imgLoadedCounter==6) $("img", "#containerID").show() });
$("img:eq(0)", "#containerID").attr("src", "/path/to/image1.ext"); // you may use the image id instead $("img:eq(x)", "#containerID")
$("img:eq(1)", "#containerID").attr("src", "/path/to/image1.ext");
$("img:eq(2)", "#containerID").attr("src", "/path/to/image1.ext");
$("img:eq(3)", "#containerID").attr("src", "/path/to/image1.ext");
$("img:eq(4)", "#containerID").attr("src", "/path/to/image1.ext");
$("img:eq(5)", "#containerID").attr("src", "/path/to/image1.ext");

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
containerID is not the div around each image but an other container (for example a div or a cell, a table,...)
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
..around all the div and their image inside

The image readyState is the key, check out the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27042390.html</title>
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("#display").click( loadImages );

});

var loaded = 0;
function loadImages() {
  loaded = 0;
  var srcList = [
    "http://officeimg.vo.msecnd.net/en-us/images/MB900389194.jpg",
    "http://officeimg.vo.msecnd.net/en-us/images/MB900389230.jpg",
    "http://officeimg.vo.msecnd.net/en-us/images/MB900389198.jpg",
    "http://officeimg.vo.msecnd.net/en-us/images/MB900389234.jpg",
    "http://officeimg.vo.msecnd.net/en-us/images/MB900078627.jpg",
    "http://officeimg.vo.msecnd.net/en-us/images/MB900389204.jpg"
  ];

  $(srcList).each( function( index ) {
    $(".display-together").eq(index)
    .attr( { src: this } )
    .ready( eventReady );
  });

  function eventReady() {
    if ( ++loaded == 6 ) $(".display-together").removeClass( "display-together" )
  }
}

</script>
<style>
.display-together { display: none; }
</style>
</head> 
<body> 

<input id="display" type="button" value="Display" /> <br />

<img class="display-together" />
<img class="display-together" />
<img class="display-together" />
<img class="display-together" />
<img class="display-together" />
<img class="display-together" />

</body> 
</html> 

Open in new window

Author

Commented:

Thanks to all.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial