Pacecode Blog Tips, Scripts and More…

3Dec/081

Problem with transparent image resizing? – PHP

You will get black background if you resize a transparent image. To fix it, You need set alpha channel imagecolorallocatealpha to 127. With imagecolorallocatealpha, it will allocate a color for an image.

Usage:
int imagecolorallocatealpha ( resource image, int red, int green, int blue, int alpha)

From PHP manual:
imagecolorallocatealpha() behaves identically to imagecolorallocate() with the addition of the transparency parameter alpha which may have a value between 0 and 127. 0 indicates completely opaque while 127
indicates completely transparent. Returns FALSE if the allocation failed.

Before using it, you must set to false the blending mode for an image and set true the flag to save full alpha channel information.

Example:

<?

$newImg = imagecreatetruecolor($nWidth, $nHeight);

imagealphablending($newImg, false);

imagesavealpha($newImg,true);

$transparent = imagecolorallocatealpha($newImg, 255, 255, 255, 127);

imagefilledrectangle($newImg, 0, 0, $nWidth, $nHeight, $transparent);

imagecopyresampled($newImg, $im, 0, 0, 0, 0, $nWidth, $nHeight, $imgInfo[0], $imgInfo[1]);

?>

Another way to fix this issue:

phpThumb() - Resize images on the fly

Description: phpThumb() uses the GD library  to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly. The output size is configurable (can be larger or smaller than the source), and the source may be the entire image or only a portion of the original image.

Download: Download

Site: phpThumb()

Demo: Demo

Installation:

1. unzip the folder and upload the content into the server
2. give the correct path of the phpThumb.php and image path as per the following syntax

Resize Syntax:
<img src="../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=png" alt="">
<img src="../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=gif" alt="">
<img src="../phpThumb.php?src=images/watermark.png&bg=FFFFFF&f=jpeg" alt="">

where the bg=FFFFFF represents the bg color of your transparent image.

24Sep/0813

ADDING ADDITIONAL IMAGES IN THE PRODUCT DETAILS PAGES -Virtuemart tips

If you are new to the virtue mart shopping cart software, the following steps will help you to add additional product images in Product details page.

Assumptions:
You are using,

  • Joomla 1.5 or Joomla 1.0.x
  • Virtue Mart 1.1.0 stable.

Steps to add additional images in Product details page:

  1. Go  to  virtue mart  admin panel
  2. Choose “choose extended layout” <helps easy navigation>
  3. List out your products.
  4. Click on media button. A new popup will be opened.
  5. Click the new button to add additional images
  6. Choose additional image s as option, give appropriate height and width for the image
  7. Click on save button. That’s all

I  am not sure about, it will work for lower version of virtue mart also. Please check and gimme a feed back to this post.

The following pictures help you for easy understanding.

ImageShack

ImageShack

ImageShack

ImageShack

ImageShack

ImageShack

21Sep/082

Part of Page refresh using AJAX with timed delay

<head>
<script type="text/javascript">
function makAx() // this function to activate XMLHttpRequest Object
{
try
{
xm = new ActiveXObject("Msxml2.XMLHTTP");
return true;
}
catch (e)
{
try
{
xm = new ActiveXObject("Microsoft.XMLHTTP");
return true;
}
catch (e2)
{
xm = false;
}
}
if (!xm && typeof XMLHttpRequest != ‘undefined’)
{
xm = new XMLHttpRequest();
return true;
}
}
function showImages()
{
if(makAx()) // XMLHttpRequest checked here
{
url = "external-page-for-db-query.php"; // this file will contains your db query
callavail();
}
}
function callavail()
{
xm.open("GET",url,true); // This is ajax functionality. It may have true(for synchronous request) or false(for asynchronous request)
xm.onreadystatechange = cavail;
xm.send(null);
}
function cavail()
{
if(xm.readyState == 4) // If ready state reached
{
var response = xm.responseText;
var str = document.getElementById("showResult"); // result of "external-page-for-db-query.php" will come here
str.innerHTML = response;
setTimeout("showImages()",1000); // here 1000 represents one second for time delay. showImage() function will be called with the specified time delay
}
}
</script>
</head>

<body>
<div id="showResult"></div> <!–page result will be displayed here–>
</body>
</html>