larger image

[Guest]

Hello

 

Just a quick one

 

I am having trouble with this

 

I want a image enlarged when a user clicks on the thumbnail image in product listings

 

I altered a bit of code in product_info but it did nothing

 

Can someone help me please

 

Thank you

 

Ian

[strub]

Hi,

 

I have used Highslide for this. But there needs to be done quite a few things to work.

[Guest]

Hi

 

thank you for the reply

 

can you tell me how i can get Highslide to work and what i need to do for it to work properly

 

Thank you

 

Ian

[strub]

1. just download the highslide files on highslide.com and add them to the catalog/ext/highslide

 

2. in product_info.php

 

replace the original code with that:

<div id="product_moreimg_box">
<?php echo '<h4>' . TEXT_MORE_IMG . '</h4>'; ?>

     <ul id="product_images_area">

<?php
       $pi_counter = 0;
       while ($pi = tep_db_fetch_array($pi_query)) {
         $pi_counter++;

         $pi_entry = '        <li class="product_images"><a href="';

         if (tep_not_null($pi['htmlcontent'])) {
          // $pi_entry .= '' . $pi_counter;
         } else {
           $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);


         $pi_entry .= '" class="highslide" onclick="return hs.expand(this, { slideshowGroup: \'group1\'})">' . tep_image(DIR_WS_IMAGES . $pi['image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>';
}


         if (tep_not_null($pi['htmlcontent'])) {

	  $pi_entry .= 'http://' . $pi['htmlcontent'];

	  $pi_entry .= '" onclick="return hs.htmlExpand(this, {objectType: \'iframe\', width: 480, height: 385, allowSizeReduction: false, wrapperClassName: \'draggable-header no-footer\', 		preserveContent: false, objectLoadTime: \'after\'})" class="highslide">' . tep_image(DIR_WS_IMAGES . $pi['image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>';

           //$pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
         }

         $pi_entry .= '</li>';

         echo $pi_entry;
       }
?>

     </ul>
</div><!-- div end product_moreimg_box -->

 

3. in includes/template_top.php:

 

add

<!-- ********************************************** Start Highslide *****************************-->
<script type="text/javascript" src="ext/highslide/highslide-full.js"></script>
<script type="text/javascript" src="ext/highslide/swfobject.js"></script>

<link rel="stylesheet" type="text/css" href="ext/highslide/highslide.css"/>

<script type="text/javascript">
hs.graphicsDir = 'ext/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = false;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;


// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 2000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .75,
		position: 'top left',
		hideOnMouseOut: true
	}
});
if (hs.addSlideshow) hs.addSlideshow({
	slideshowGroup: 'group2',
	interval: 2000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .75,
		position: 'top left',
		hideOnMouseOut: true
	}
});
</script>

 

Hope I didn't forget sth.

[Guest]

Hi thank you that is perfect I will give that a go

 

What is sth when you said hope i didnt forget sth

 

Thank you so much

 

Ian