I am pulling my image from the database to display it on my page however it wont show. to confirm that the image is being called from the database i output the image name on the title= when you place the mouse on the unseen image you can see the image name but the image itself does not show at all. the website is this: http://clicktravelnstay.com/desti_list.php?details=19
<div id="imgdisplay">
<div class="pagecontainer">
<div class="galleryCredit">Hotel Photos</div>
<div class="galleryType">Preview</div>
<div class="clear_both"></div>
<div class="galleryContent">
<!--image goes herewidth:650px; height:300px;-->
<!--This is Where the wide image and the caption icon will be placed-->
<div class="galleryThumbnail">
<?php
$query = "SELECT * FROM image WHERE hotel_id = {$hotel['hotel_id']}";
$image_set = mysql_query($query,$connection);
while($image = mysql_fetch_array($image_set)){?>
<a href=\"img/photos/<?php $image['image_url'];?>" title="<?php echo $image['image_url']?>">
<img src="img/photos/<?php echo $image['image_url'];?>" width="75" height="75"/></a>
<?php } ?>
<div class="clear_both"></div>
</div>
<div class="galleryPreview">
</div>
<div class="clear_both"></div>
<div class="clear_both"></div>
<div class="gallery_preload_area"></div>
</div>
<!--image goes herewidth:650px; height:300px;-->
</div>
The following code is the Jquery code for the image gallery.
$(document).ready(function(){
$(".galleryThumbnail a").click(function(e){
e.preventDefault();
//update thumbnail
$(".galleryThumbnail a").removeClass("selected");
$(".galleryThumbnail a").children().css("opacity","1");
$(this).addClass("selected");
$(this).children().css("opacity",".4");
//setup thumbnails
var photoCaption = $(this).attr('title');
var photofullsize =$(this).attr('href');
$(".galleryPreview").fadeOut(500, function(){
$(".gallery_preload_area").html("")
// this is what is going to happen after the fadeout
$(".galleryPreview").html("<a href='"+ photofullsize +"' style=' background-image:url("+photofullsize+");'></a>");
$(".galleryCaption").html("<p><a href='"+photofullsize+"' title='Click to view large'>View Large</a></p><p></p>")
$(".galleryPreview").fadeIn(500);
});
});
});
The path
http://clicktravelnstay.com/img/photos/1344707033.png
returns a 404 (not found).
You're pulling the image name from the database successfully, but the actual image file does not exist on your server.
You should look at the generated HTML:
<a href=\"img/photos/" title="1344707033.png">
^--- bad escape.
You're outputting invalid html, plus the href is just a path, not pointing at an actual image.
That means:
<a href=\"img/photos/<?php $image['image_url'];?>" title="<?php echo $image['image_url']?>">
^---missing 'echo'
<img src="img/photos/<?php echo $image['image_url'];?>" width="75" height="75"/></a>
and $image['image_url']
doesn't contain anything.