GD Library image creation problem - php

Question

I am having a problem with a gd library issue. When I use the following code
<script type="text/javascript">
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
currentPage = 1,
pages = Math.ceil($items.length / visible);
// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
// 3. Set the left position to the first 'real' item
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
// 5. Bind to the forward and back buttons
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
// create a public interface to move to a specific page
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
$(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
$("a.pictureThumb").fancybox({
'autoScale' : true,
'autoDimension' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 300,
'speedOut' : 200,
'hideOnOverlayClick' : true,
'hideOnContentClick': false
});
});
</script>
With this as the image generator, the only thing that comes out is what looks like programming code instead of an image. This script worked with a different scroller, but since I put this new scroller script (seen above), I am having problems with it generating an image (IE it just shows the loading icon), FireFox actually shows the programming code.
Here is the code that is making the call to the GD function:
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<?php
do { ?>
<li><a class="pictureThumb" href="picture.php?imgID=<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5];; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" title="<a href='addToCart.php?T=Pic?ID=<?php echo $row_rsPictures['PictureID']; ?>' target='_parent' style='color:#fe6d00' >Add This Image To Your Shopping Cart</a><br><?php echo $row_rsPictures['BoatName'];if($row_rsPictures['BoatNumber'] != "") {
echo " #".$row_rsPictures['BoatNumber'];
} ?><br>driven by: <?php echo $row_rsPictures['DriverName']; ?> at the <?php
$AssocName_array = explode('_', $row_rsPictures['Acronym']);
$AssocName = $AssocName_array[0];
if ($AssocName == "Various") {
$AssocName = "";
}
if ($row_rsPictures['DateTo'] != ""){
$EventYear = date("Y", strtotime($row_rsPictures['DateTo']));
}
else { $EventYear = "";
}
echo $EventYear." ".$AssocName." ".$row_rsPictures['EventName'];?><br>Picture Viewed (<?php echo $row_rsPictures['Views']; ?>) since posted on <?php echo date("n-j-Y", strtotime($row_rsPictures['DatePosted'])); ?>" rel="group">
<img src="../images/gallery/<?php $raceYear = explode('_', $row_rsPictures['EventOverlay']); echo $raceYear[0]; ?>/<?php echo $row_rsPictures['EventOverlay']; ?>/thumb/<?php echo $row_rsPictures['PictureFile']; ?>.jpg" alt="FileName: <?php echo $row_rsPictures['PictureFile'];?>"></a></li>
<?php
} while ($row_rsPictures = mysql_fetch_assoc($rsPictures));
mysql_data_seek($rsPictures, 0);
?>
</ul>
</div>
</div>
and the separate php file that generates the image.
<?php
$filename = explode("_", $_GET['imgID']);
$folder = $filename[0];
$subFolder = $filename[0]."_".$filename[1]."_".$filename[2];
if($filename[3] == "NN") {
$subFolder = $subFolder."_NN";
}
$shot = "../images/gallery/".$folder."/".$subFolder."/".$_GET['imgID'].".jpg";
$watermark = "../images/gallery/watermark.png";
header("Content-type: image/jpg");
$photoImage = ImageCreateFromJPEG($shot);
ImageAlphaBlending($photoImage, true);
$logoImage2 = ImageCreateFromPNG($watermark);
$im = imagecreatetruecolor(800, 16);
$im2 = imagecreatetruecolor(800, 10);
$white = imagecolorallocate($im, 255, 255, 255);
//imagefilledrectangle($photoImage, 0, 0, 796, 15, $white);
$grey = imagecolorallocate($im2, 128, 128, 128);
$red = imagecolorallocate($im2, 255, 0, 0);
//$im = imagecreatetruecolor(796, 25);
$text = $_GET['imgID'];
$text2 = 'COPYRIGHT 1997 - 2011 - DRAGBOATS.COM - ALL RIGHTS RESERVED';
$text3 = '^ THIS BAR WILL NOT APPEAR ON PURCHASED PRINTS ^';
//$black = imagecolorallocate($photoImage, 0, 0, 0);
imagestring($im, 2, 10, 1, $text, $white);
imagestring($im, 2, 440, 1, $text2, $white);
imagestring($im2, 1, 290, 1, $text3, $white);
ImageCopy($photoImage, $im, 0, 0, 0, 0, 800, 16);
ImageCopy($photoImage, $im2, 0, 17, 0, 0, 800, 10);
ImageCopy($photoImage, $logoImage2, 0, 0, 0, 0, 800, 525);
ImageJPEG($photoImage); // output to browser
ImageDestroy($photoImage);
ImageDestroy($logoImage2);
?>
Somewhere there is a conflict that is causing the problem and I can't find it.
Any help is appreciated.
The actual page can be found at http://randykrohn.com/gallery/pictures_test.php?BoatID=881

Answer 1

It appears you're outputting the raw image data (the bytes in the .jpg) file into the gallery popup, with an innappropriate header so that the imgae is being interpreted as text and not an image.
If that last chunk of code under "... the call to GD function" is all in one file, that would explain why. You're outputting a chunk of html, followed by the raw image data, which then gets inserted into the gallery popup. The Content-type header cannot take effect as you've already output some html. If you check your error logs (and/or actually enable errors/warnings), you'd no doubt see the usual "cannot modify headers, output started at line XXX" warnings from PHP.

Answer 2

Try to set php memory limit to 96M (128M - recommended) in php.ini file. If you have no access to that file simply add ini_set('memory_limit', '128M'); to your php file. It must help to solve the issue.

Answer 3

Didn't help, but figured it out on my own. Needed to tell FancyBox to open the link explicitly as an image (ie: fancybox({'type' : 'image'}); Alls well now! Thanks for you help guys!