[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Jquery run when images withing a div load.

How can i make this bit of jquery happen when the images in the code below load.

 var count = $("#det_cls_images > img").length;
     if  (count > 1){
   $("#det_next_image").show();
	 }
	
   $("#det_cls_images").css('display', 'none');
    $("#det_cls_images img:first-child").css('display', 'block');
	$("#det_cls_images img:first-child").addClass('first');
	$("#det_cls_images img:last-child").addClass('last');

Open in new window



When the images within div id= det_cls_images  load

<div id="det_cls_images" class="grid_12 alpha omega background_grey margin_top_30 margin_bottom_20 border_1_dk_grey  margin_bottom_10">
<?php if ($row_det_item['cls_image1']){ //this must be here to make element empty for jquery if no image ?>
<img name="" src="<?php echo $row_det_item['cls_image1']; ?>" alt="" width="400" border="0"/>
<?php }?>
<?php if ($row_det_item['cls_image2']){ //this must be here to make element empty for jquery if no image ?>
<img name="" src="<?php echo $row_det_item['cls_image2']; ?>" alt="" width="400" border="0"/>
<?php }?>
<?php if ($row_det_item['cls_image3']){ //this must be here to make element empty for jquery if no image ?>
<img name="" src="<?php echo $row_det_item['cls_image3']; ?>" alt="" width="400" border="0"/>
<?php }?>
<?php if ($row_det_item['cls_image4']){ //this must be here to make element empty for jquery if no image ?>
<img name="" src="<?php echo $row_det_item['cls_image4']; ?>" alt="" width="400" border="0"/>
<?php }?>
</div>

Open in new window

0
Luey
Asked:
Luey
1 Solution
 
Chris StanyonCommented:
In jQuery you have a ready function. Most people use $(document).ready() to run functions once the DOM is ready. You can use $(window).load() to run code once everything is ready, so just wrap your code in that:

$(window).load(function() {
    var count = $("#det_cls_images > img").length;
    if  (count > 1){
        $("#det_next_image").show();
    }
	
    $("#det_cls_images").css('display', 'none');
    $("#det_cls_images img:first-child").css('display', 'block');
    $("#det_cls_images img:first-child").addClass('first');
    $("#det_cls_images img:last-child").addClass('last');
});

Open in new window

0
 
LueyAuthor Commented:
thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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