the link you click is
<a href="javascript:void(0);" onclick="getImages(1)">Folder 1</a>
This calls the ajax function below. Excuse if its messy its my first ever call
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
function getImages(id)
{
$.ajax({
type: "POST",
url: 'getImage.php',
data: "id=" + id,
success: function(data) {
$('#scrolimg').html(data);
$("#car1").carouFredSel({
auto : false,
items : 4,
scroll : 4,
circular : false,
infinite : false,
prev : "#foo1_prev",
next : "#foo1_next",
swipe : {
onTouch : true,
onMouse : false
}
});
}
});
}
the getImage.php
<?php do {
$image = $_SERVER['DOCUMENT_ROOT']."/images/uploads/".$row_rs_image['thumbfile'];
list($width, $height)= getimagesize($image);
?>
<img src="/images/uploads/<?php echo $row_rs_image['thumbfile']; ?>" width="<?php echo $width;?>" height="<?php echo $height;?>" />
<?php } while ($row_rs_image = mysql_fetch_assoc($rs_image)); ?>
This images are only outputted if there is a width and height value. This is a must with the carousel the images are displayed in. Which is fine because in chrome it works. When It comes to IE though. If I record the ajax output I can see the error. For the image to be displayed it needs a width and height
The image being outputted in IE is
<img src"/images/uploads/img_thumb.jpg" width="" height="" />
The same image in chrome
<img src"/images/uploads/img_thumb.jpg" width="150" height="160" />
