Change large image with thumbnail

you will need to create a custom theme override for whatever content that you are wanting to display, something like so (this is a mish mash of stuff i've copied & modified from other posts around the interweb).

This is an example of using the cloudzoom to theme an ubercart product display as a custom themed node-product.tpl.php

it's pretty liberally commented and hopefully 'should' be somewhat straightforward to customize for your own purposes. for example, copy this and save it as node-product.tpl.php and upload it to your theme's directory - it should work 'out of the box' in theory assuming you have the imagecache, cloudzoom & ubercart modules installed.

note: You do NOT need an 'image handler' setup in ubercart to use cloudzoom for image handling in ubercart.

	<?php

	// Grabs the firsts image path and sets $imagePath.
	$imagePath = $node->field_image_cache['0']['filepath'];
	?>
	<div id="node">
	<?php // product title  ?>
	<h2><?php //print $title ?></h2>
	
	<?php 
         /*
           default image display - need to make sure that you have the imagecache presets created for this 
           i'm sure there's probably a cleaner way of doing this, but i'm a drupal noob so it's a hack at best
         */
        ?>
	<div id="image">
	<?php // this is your main 'default' large image & the zoomed image  ?>
		<a href='/sites/default/files/imagecache/product_full/<? print $node->field_image_cache[0]['filepath']; ?>' class = 'cloud-zoom' id='zoom1' rel='position: "inside"'>
            <img src="/sites/default/files/imagecache/product_big/<? print $node->field_image_cache[0]['filepath']; ?>" alt='<? print $node->field_image_cache[0]['data']['alt']; ?>' title="<? print $node->field_image_cache[0]['data']['title']; ?>" />
        </a>
	</div>
	
	<?php // all image display - ie the thumbnail gallery loop ?>
	<div class="other_imgs">
	   <?php
			   // get all images
				foreach ($node->field_image_cache as $images) {
			?>
	<? // output the small / thumbnail image display ?>        
		<a href="/sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>" title="<? print $images['data']['title']; ?>" class='cloud-zoom-gallery' 
        	rel="useZoom: 'zoom1', smallImage: '/sites/default/files/imagecache/product_big/<? print $images['filepath']; ?>' ">
		 <img src="/sites/default/files/imagecache/product_thumb/<?php print $images['filepath']; ?>" alt="<? print $images['data']['alt']; ?>">
		 </a>
		<?php   
			}
			?>
	</div>
	
	<?php //  the rest of the product description / add to cart button etc - probably would want to theme this and do the layout differently...  ?>
	<?php print $node->content['body']['#value'];  ?>
	
	<?php  // list price and sell price display  ?>
	<div id="price">
		<p>List Price: <?php print uc_currency_format($node->list_price); ?></p>
		<p>Sell Price: <?php print uc_currency_format($node->sell_price); ?></p>
	</div>
	
	<div id="cartButtons">
	<?php // add to cart buttons ?>
	<?php print $node->content['add_to_cart']["#value"]; ?>
	</div>
	</div>
	
	<pre>
	<?php // this will print the $node array at the bottom of each node take it out when finished ?>
	<?php var_dump($node); ?>
	</pre>

any improvements or comments that anyone can provide to clean this up and/or make it more generic is greatly appreciated.

Hey I tired your method and i cant get it working for me does anyone know how i can get thumbnails that swap the main image?

I got your code working its amazing thank you! Only one thing have been racking my brain for hours as it does not display a intial image when you first arrive at the page..it just has the loading symbol until you click a thumb nail..help??

I got your code working its amazing thank you! Only one thing have been racking my brain for hours as it does not display a intial image when you first arrive at the page..it just has the loading symbol until you click a thumb nail..help??

Many thanks for your code, works perfect!

Quick followup in case it wasn't obvious.

In the places where I'm writing the image tags above, I have (currently) hard-coded the actual imagecache preset into the link (for lack of finding a way to do this properly).

So where I have:

<? // output the small / thumbnail image display ?>        
		<a href="/sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>" title="<? print $images['data']['title']; ?>" class='cloud-zoom-gallery' 
        	rel="useZoom: 'zoom1', smallImage: '/sites/default/files/imagecache/product_big/<? print $images['filepath']; ?>' ">
		 <img src="/sites/default/files/imagecache/product_thumb/<?php print $images['filepath']; ?>" alt="<? print $images['data']['alt']; ?>">
		 </a>

Where it has:

'imagecache/product_full'  

and

'imagecache/product_thumb'

You will need / want to specify the actual imagecache presets that you want to use for your display. This way you can customize / add whatever imagecache presets that you want to your system (with whatever names you want) and it will display properly.

Hope this helps clear up some confusion about the process (maybe?).

Also note that the above template isn't doing any proper error checking and does currently have 'issues' (ie displays an error) if the product display does not have any images associated with it. I'm going to have to (for the site I'm working on) update / fix this but haven't gotten around to doing so yet.

Enjoy!

Works for me, thanks for posting.

I'm having a problem and I hope you can help. Have a look at: http://www.ohkaty.com/oh-katy-one-size-pocket-diapers notice when you change images (by clicking the thumbnail) then active cloud zoom how the image title displays the old image title? Here is my code:

<div class="product-image" style="float:left;">
              
              <?php

    // Grabs the firsts image path and sets $imagePath.
    $imagePath = $node->field_image_cache['0']['filepath'];
    ?>
    <div id="main-image" style="float:left;">
	<?php // this is your main 'default' large image & the zoomed image  ?>
		<a href='/sites/default/files/imagecache/product_full/<? print $node->field_image_cache[0]['filepath']; ?>' class='cloud-zoom' id='zoom1' rel='tint: "#002b54", tintOpacity:0.5, smoothMove:5, adjustX:10, zoomWidth:300, zoomHeight:250'>
            <img src="/sites/default/files/imagecache/product/<? print $node->field_image_cache[0]['filepath']; ?>" alt='<?php print $node->field_image_cache[0]['data']['alt']; ?>' title='<?php print $node->field_image_cache[0]['data']['title']; ?>' />
        </a>
        </div>
	<?php // all image display - ie the thumbnail gallery loop ?>
	<div class="other_imgs" style="float:left; width:110px; margin-left:10px;">
	   <?php
               // get all images
                foreach ($node->field_image_cache as $images) {
            ?>
	<? // output the small / thumbnail image display ?>        
		<a href="/sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/sites/default/files/imagecache/product/<? print $images['filepath']; ?>' ">
		 <img src="/sites/default/files/imagecache/uc_thumbnail/<?php print $images['filepath']; ?>" title="<? print $node->field_image_cache[0]['data']['title']; ?>" alt="<? print $images['data']['alt']; ?>">
		 </a>
		<?php   
            }
            ?>
            </div>
            </div>

Yeah I've noticed the same thing on my dev site as well. The problem is this chunk of code for the 'main image display':

Notice how it's grabbing the alt & title text from the image, index of [0]? That's the problem. Basically need to update the alt & title text with the active image's text instead of simply hard-coding the text.

Having said that I don't have a fix for the code at the moment, haven't worked on this much since my original post unfortunately. When I have time and get back to working on my product templates again I'll post whatever I figure out.

Hope this helps

Solution:

A a new line after line 365 in the cloud-zoom.js file:

// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
$('#' + data.useZoom + ' img').attr('title', event.data.attr('title'));

Then add the title to the image link not the image src.

<a href="/sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>" title="<? print $images['data']['title']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/sites/default/files/imagecache/product/<? print $images['filepath']; ?>' ">

Works here: http://www.ohkaty.com/oh-katy-one-size-pocket-diapers

nice - good to see that it's working for you!

I am having problem hope you can help me. I have followed your instruction and big image zooming is fine. Problem is when I click the thumb images; big image disappear and message keep displaying “Loading...” I am newbie to drupal. I haven’t changed any line in cloud_zoom.module or cloud-zoom.1.0.2.min.js files.

Do I have to include the “cloud-zoom.1.0.2.js” file to “cloud_zoom.module.php” file?
If so please kindly enlighten me how it done.

Here is my code:

 
		<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
		
  				
					
		
		<?php // this is your main 'default' large image & the zoomed image  ?>
		<a href="<?php print base_path(). $imagePath ?>" class='cloud-zoom' id='zoom1' rel='tint: "#002b54", tintOpacity:0.5, smoothMove:5, adjustX:10, zoomWidth:300, zoomHeight:250'>
            <img src="<?php print base_path() . "sites/default/files/imagecache/product/" . $imagePath ?>" alt='<?php print $node->field_image_cache[0]['data']['alt']; ?>' title='<?php print $node->field_image_cache[0]['data']['title']; ?>' />
        </a>
      		

		<?php
               // get all images
                foreach ($node->field_image_cache as $images) {
            ?>
			<? // output the small / thumbnail image display ?>       
			<a href="<?php print base_path() . $images['filepath']; ?>"  class='cloud-zoom-gallery' title="<?php print $images['data']['title']; ?>" rel="useZoom: 'zoom1', smallImage: 'sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>' ">

			<img src="<?php print base_path() . "sites/default/files/imagecache/product/" . $images['filename'];?>" alt="<?php print $images['data']['title'];?>"></a>
		<?php   }?>
            

This is my version, posted here to help others.

<div id="product-img">
            <?php 
            // this is your main 'default' large image & the zoomed image 
            $small = theme('imagecache', 'product_full', $node->field_image_cache[0]['filepath'], $node->field_image_cache[0]['data']['alt'], $node->field_image_cache[0]['data']['title']); 
            print l($small, imagecache_create_path('product_zoom', $node->field_image_cache[0]['filepath']), array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom','id' => 'zoom1')));
            ?>
        </div>
        <div class="zoom_img">
        <?php 
        // all image display - ie the thumbnail gallery loop
        foreach ($node->field_image_cache as $images) {
           $full = url(imagecache_create_path('product_full', $images['filepath']));
           $zoom = url(imagecache_create_path('product_zoom', $images['filepath']));          
           ?>
          
           <a href="<?php print $zoom; ?>" title="<? print $images['data']['title']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '<? print $full; ?>' ">
           <?php print theme('imagecache', 'uc_thumbnail', $images['filepath'], $images['data']['alt'], $images['data']['title']);?>
           </a><?php 
           
        }
        ?>
        </div>

Hello,
I am a complete non-programmer and really just trying to pull this together quickly. I have it started with the first large image working, but I can't seem to get the thumbnails to work. When I click on a thumbnail, it redirects to a new page. I have some javascript making the thumbnail process work and I'm wondering if I need to delete it. Any help would b appreciated!

<?php $uri = drupal_get_path_alias($_GET['q']);
$uri_part = explode('/', $uri); ?>
      
      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/JavaScript" src="http://www.jensenmartin.com/sites/all/themes/italia_castle/js/cloud-zoom.1.0.2.js"></script>

      
<script type="text/javascript">
$(document).ready(function () {  
    $(".more-product-images img.imagecache-uc_thumbnail").click(function() {
	var url = $(this).attr("src").replace("uc_thumbnail", "product");
	var wrap = $(".main-product-image").fadeTo("medium", 0.5);
	var img = new Image();
	img.onload = function() {
		wrap.fadeTo("fast", 1);
		wrap.find("img").attr("src", url);
	};
	img.src = url;
    });
    $(".color-swatches img").click(function() {
	var url = $(this).attr("src").replace("swatches", "product");
	var wrap = $(".main-product-image").fadeTo("medium", 0.5);
	var img = new Image();
	img.onload = function() {
		wrap.fadeTo("fast", 1);
		wrap.find("img").attr("src", url);
	};
	img.src = url;
    });
});
</script>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?> node-<?php 
print $node->type; ?> node-product-tpl">

  <div class="content">    
  <div class="product-image">      
  <div class="main-product-image">          


  <a href="<?php print base_path();?>sites/default/files/<?php print $node->field_image_cache['0']['filename']; ?>" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4" alt="<?php print $node->title; ?>" title="<?php print $node->title; ?>" >           
  <img src="<?php print base_path();?>sites/default/files/imagecache/product/<?php print $node->field_image_cache['0']['filename']; ?>" class="imagecache imagecache-product" alt="<?php print $node->title; ?>" title="<?php print $node->title; ?>" /> </a>
  </div>
  
  <div class="more-product-images">        <h6 class="label">Click to View Larger </h6>        
   

<?php $i = 0; foreach ($node->field_image_cache as $thumbnails) { ?>          
<?php if ($i > 0) { ?>            

<a href="<?php print base_path();?>sites/default/files/<?php print $thumbnails['filename']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage:<?php print base_path();?>sites/default/files/imagecache/product/<?php print $thum['filename']; ?>" >

<img src="<?php print base_path();?>sites/default/files/imagecache/uc_thumbnail/<?php print $thumbnails['filepath']; ?>" class="imagecache imagecache-uc_thumbnail <?php if ($i == 1) { print 'first'; } ?>" alt="<?php print $node->title; ?>" title="<?php print $node->title; ?>" />  </a>

  
<?php } $i++; ?>        <? } ?>          

<img src="<?php print base_path();?>sites/default/files/imagecache/uc_thumbnail/<?php print $node->field_image_cache['0']['filename']; ?>"               class="imagecache imagecache-uc_thumbnail last original" alt="<?php print $node->title; ?>" title="<?php print $node->title; ?>" />      </div>          </div>    

I've posted my solution here. I'd link to the live example, but it's still in development.
http://www.wardontheweb.com/how-to-enable-ubercart-product-image-zoom-wi...

Stephen...Your solution worked perfectly for me! Thank you. Can you tell me where to add css to add padding to the thumbnails?
Thank you so much

Sure thing, Lisa. Each of the thumbnails has the "cloud-zoom-gallery" class, which is used by Cloud Zoom but can be used just as easily for CSS. Something like the following in your theme stylesheet should do the trick:

.cloud-zoom-gallery { padding:5px; }

Hey, guys! Can u help me with displaying Large image on hover. U can see this in attached image at the end of my comment. I want the picture in #cloud-zoom-big larger like on the site http://www.ohkaty.com/oh-katy-one-size-pocket-diapers

I've used this code in node-product.tpl.php:

<div class="product-image" style="float:left; margin-right:10px;">
             
<?php
    // Grabs the firsts image path and sets $imagePath.
    $imagePath = $node->field_image_cache['0']['filepath'];
?>
    
<div id="main-image" style="float:left; margin-bottom:10px;">
<?php // this is your main 'default' large image & the zoomed image  ?>
<a href='/sites/default/files/imagecache/product_full/<? print $node->field_image_cache[0]['filepath']; ?>' class='cloud-zoom' id='zoom1' rel='tint: "#002b54", tintOpacity:0.5, smoothMove:5, adjustX:10, zoomWidth:100, zoomHeight:75'>
<img src="/sites/default/files/imagecache/product/<? print $node->field_image_cache[0]['filepath']; ?>" alt='<?php print $node->field_image_cache[0]['data']['alt']; ?>' title='<?php print $node->field_image_cache[0]['data']['title']; ?>' />
</a>
</div>

<?php // all image display - ie the thumbnail gallery loop ?>
<div class="other_imgs" style="width:300px;">

<?php
   // get all images
   foreach ($node->field_image_cache as $images) {
?>

<? // output the small / thumbnail image display ?>       
<a href="/sites/default/files/imagecache/product_full/<?php print $images['filepath']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/sites/default/files/imagecache/product/<? print $images['filepath']; ?>' ">
<img src="/sites/default/files/imagecache/uc_thumbnail/<?php print $images['filepath']; ?>" title="<? print $node->field_image_cache[0]['data']['title']; ?>" alt="<? print $images['data']['alt']; ?>">
</a>
<?php  
	}
?>
</div><!--/other_imgs-->
</div><!--product-image-->

and in display fields of field_image_cache i've set Cloud Zoom: Product Full → Product Full. When i change the display type its kinda doesnt work.

node-product.tpl.php in that file comment your image div tag.
after that use this code it will work perfectly.

use this attached file code

Which code and which file?

thank you sittard

i dont get any errors from your code and its showing the gallery the right way

but the zoom is not working..a click on the default image shows the zoom image in a new page

same if i click on a thumbnail..

whats the issue?

edit: solved the problem

the field view on the content type was set to hidden

Ive got the same problem with the title of the zoomed images not changing

here is my code:

<div id="product-img">
            <?php
            // this is your main 'default' large image & the zoomed image
            $small = theme('imagecache', 'Zoom_Small', $node->field_image_cache[0]['filepath'], $node->field_image_cache[0]['data']['alt'], $node->field_image_cache[0]['data']['title']);
            print l($small, imagecache_create_path('Zoom_Large', $node->field_image_cache[0]['filepath']), array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom','id' => 'zoom1')));
            ?>
        </div>
      
      
      
        <div class="zoom_img">
          <?php
        // all image display - ie the thumbnail gallery loop
        foreach ($node->field_image_cache as $images) {
           $full = url(imagecache_create_path('Zoom_Small', $images['filepath']));
           $zoom = url(imagecache_create_path('Zoom_Large', $images['filepath']));         
           ?>
         
           <a href="<?php print $zoom; ?>" title="<? print $images['data']['title']; ?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '<? print $full; ?>' ">
           <?php print theme('imagecache', 'uc_thumbnail', $images['filepath'], $images['data']['alt'], $images['data']['title']);?>
           </a><?php
          
        }
        ?>
        </div>

Also - does anyone know how I would get the titles of the images below each thumbnail?

hi StephenWard,
sorry, the link you have posted is not working "http://www.wardontheweb.com/how-to-enable-ubercart-product-image-zoom-wi...",
can you please give an alternate to the same, thank you

My site was down for a bit last week, diwakar. The post is back up now if you still care to read it.

Hi Stephen, Great, Thank you very much, it was very helpful and it worked perfectly

HI,

have used the below code (by StephenWard - great help) to display the products, it was working great for some time and then..., the second image does not load,

the url for the image shows "/sites/default/files/imagecache/product_full/sites/default/files/600.jpg" instead of

"/sites/default/files/imagecache/product_full/600.jpg"

drupal_add_js(drupal_get_path('module', 'cloud_zoom') . '/cloud-zoom/cloud-zoom.1.0.2.min.js');
drupal_add_css(drupal_get_path('module', 'cloud_zoom') . '/cloud-zoom/cloud-zoom.css');
if (is_array($node->field_image_cache) && count($node->field_image_cache) > 0 && strlen($node->field_image_cache[0]) > 0){

	// Display the primary image.
	echo l(theme('imagecache', 'product_full', $node->field_image_cache[0]['filepath'], $node->field_image_cache[0]['data']['alt'], $node->field_image_cache[0]['data']['title']), imagecache_create_path('product_zoom', $node->field_image_cache[0]['filepath']), array('attributes' => array('class' => 'cloud-zoom', 'id' => 'zoom1'), 'html' => TRUE));

	// Display the gallery thumbnails.
	$num_images = count($node->field_image_cache);
	if ($num_images > 1){
		for ($i = 0; $i < $num_images; $i++){
			echo '<a class="cloud-zoom-gallery" href="' . base_path() . imagecache_create_path('product_zoom', $node->field_image_cache[$i]['filepath']) . '" rel="useZoom:\'zoom1\', smallImage:\'' . base_path() . imagecache_create_path('product_full', base_path() . $node->field_image_cache[$i]['filepath']) . '\'">' . theme('imagecache', 'product_thumbnail', $node->field_image_cache[$i]['filepath']) . '</a>';
		}
	}
}

pl suggest, thank you

this looks very useful;
I'm trying to integrate cloud zoom w. an ubercart product on drupal 7 ( d7) Any help/thoughts with this
thanks..

Post #13 @sittard's example worked for me with a bit of added styling for my site. Thanks!

This is based on sittard's code, but should do the job for D7. Replace image styles where needed.

<?php
print '<div id="product-img">';
$small = theme('image_style', array('style_name' => 'zoom_medium', 'path' => $content['field_product_image'][0]['#item']['uri'], 'alt' => $content['field_product_image'][0]['#item']['alt'], 'title' => $content['field_product_image'][0]['#item']['title']));
print l($small, image_style_url('zoom_large', $content['field_product_image'][0]['#item']['uri']), array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom','id' => 'zoom1')));
print '</div>';
print '<div class="zoom_img">';
foreach ($content['field_product_image']['#items'] as $images) {
	$full = url(image_style_url('zoom_medium', $images['uri']));
	$zoom = url(image_style_url('zoom_large', $images['uri'])); 
	print '<a href="' . $zoom . '" title="' . $images['title'] . '" class=\'cloud-zoom-gallery\' rel="useZoom: \'zoom1\', smallImage: \'' . $full . '\'">';
	print theme('image_style', array('style_name' => 'zoom_thumbnail', 'path' => $images['uri'], 'alt' => $images['alt'], 'title' => $images['title']));
	print '</a>';
}
print '</div>';
?>

in mytheme template.php

/**
* Formats a product's images.
*
* @ingroup themeable
*/
function mytheme_uc_product_image($images, $teaser = 0, $page = 0) {
static $rel_count = 0;

// Get the current product image widget.
$image_widget = uc_product_get_image_widget();

$first = array_shift($images);

$output = '

';
$rel_count++;

return $output;
}
/**
* Theme handler for the cloud_zoom effect
*/
function mytheme_cloud_zoom_formatter_imagefield($element,$attributes = array('class' => 'cloud-zoom')) {
if (!_cloud_zoom_files_present()) return;

// Add the cloud zoom JS and CSS
drupal_add_js(drupal_get_path('module', 'cloud_zoom') .'/cloud-zoom/cloud-zoom.1.0.2.js');
drupal_add_css(drupal_get_path('module', 'cloud_zoom') .'/cloud-zoom/cloud-zoom.css');

// Get the view and zoom presets from the formatter ID.
list($tmp, $cloud_zoom_type, $view_preset, $zoom_preset) = explode('__', $element['#formatter'], 4);

// Theme the preview image using imagecache
$small = theme('imagecache', $view_preset, $element['#item']['filepath']);

// Return the preview image as a link to the larger image with a cloud-zoom CSS class
return l($small, imagecache_create_path($zoom_preset, $element['#item']['filepath']),
array('html' => TRUE, 'attributes' => $attributes));
}

I have no clue why, but i could only get this to work if I added the first line from JHuxley (for D7):

<?php
render($content['field_product_image']); //THIS ONE
print '<div id="product-img">';
$small = theme('image_style', array('style_name' => 'zoom_medium', 'path' => $content['field_product_image'][0]['#item']['uri'], 'alt' => $content['field_product_image'][0]['#item']['alt'], 'title' => $content['field_product_image'][0]['#item']['title']));
print l($small, image_style_url('zoom_large', $content['field_product_image'][0]['#item']['uri']), array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom','id' => 'zoom1')));
print '</div>';
print '<div class="zoom_img">';
foreach ($content['field_product_image']['#items'] as $images) {
    $full = url(image_style_url('zoom_medium', $images['uri']));
    $zoom = url(image_style_url('zoom_large', $images['uri'])); 
    print '<a href="' . $zoom . '" title="' . $images['title'] . '" class=\'cloud-zoom-gallery\' rel="useZoom: \'zoom1\', smallImage: \'' . $full . '\'">';
    print theme('image_style', array('style_name' => 'thumbnail', 'path' => $images['uri'], 'alt' => $images['alt'], 'title' => $images['title']));
    print '</a>';
}
print '</div>';
?>

Thanks ideal2545. You are good. You saved my time.. :)