Picture Swap on Product Page

[danielc1234]

Hi. I was wondering how this site is able to have you click on a little icon on the left and have the picture on the right replace with the larger image of the icon on the left. I was wondering if it was a contribute or if there was a setting that would allow me to do this as well.

Here is the link to the site....

 

http://woofapedic.com/osc/product_info.php?products_id=39

 

Thanks a lot

Daniel

[ComicWisdom]

Read this thread:

 

http://www.oscommerce.com/forums/index.php?showtopic=229952

[danielc1234]

Read this thread:

 

http://www.oscommerce.com/forums/index.php?showtopic=229952

 

Thats close, but I wanted it to already have the big image there and then have them click on the smaller image and it replaces the bigger one. Check out the example link that I put in my post.

Thanks

[pyramids]

here is the code for a modified version of osc

you will need to adjust it to suit

 

 

This contributed work is freely available under the GNU General Public License.
(by stepibou 07/09/2005)

This code is made not to use pop-up window for the product_info image.
Presented two way to do it. Use it either.
one is a Css rollover, the other is a javascricpt clickable area.


################################################################################
##################################

in templates/content/product_info.tpl.php, replace near line 89 :

<script language="javascript"><!--
 document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>

################################################################################
##################################
by(css method):

<?php
/* <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script> */
// no popup image css rollover
if (!empty($product_info['products_image_med']) ) {
  $chemin_med_img = DIR_WS_IMAGES . $product_info['products_image_med'];
  $size_med_img = getimagesize($chemin_med_img);
  if (!empty($product_info['products_image_lrg'])) {
	$charge_image = tep_image(DIR_WS_IMAGES . $product_info['products_image_lrg'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
	$image_to_popup = $product_info['products_image_lrg'];
	$chemin_larg_img = DIR_WS_IMAGES . $image_to_popup;
	$size_larg_img = getimagesize($chemin_larg_img);
	$to_popup_width = $size_larg_img[0];
	$to_popup_height = $size_larg_img[1];
  } else {
	$charge_image = tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $width, $height);
	$image_to_popup = $new_image;
	$to_popup_width = $size_med_img[0];
	$to_popup_height = $size_med_img[1];
  }
  if ( MEDIUM_IMAGE_WIDTH =='' || MEDIUM_IMAGE_WIDTH==0 ) {
	$image_width = $size_med_img[0];
	$image_height = $size_med_img[1];
  } else {
	$image_width = MEDIUM_IMAGE_WIDTH;
	$image_height = MEDIUM_IMAGE_HEIGHT;
  }
} else {
  $chemin_small_img = DIR_WS_IMAGES . $new_image;
  $size_small_img = getimagesize($chemin_small_img);
  $image_to_popup = $new_image;
  $to_popup_width = $size_small_img[0];
  $to_popup_height = $size_small_img[1];
}
$dif_width = $image_width - $to_popup_width+4;
$dif_height = $image_height - $to_popup_height+4;
echo '
<style type="text/css">
<!--
#image {
position: relative;
width : '. $image_width .'px;
height: '. $image_height .'px;
padding: 5px 5px 5px 5px;
}
#zone1 {
position: absolute;
width : '. $image_width .'px;
height: '. $image_height .'px;
right: 0px;
top: 0px;
}

#zone1:hover {
width : '. $to_popup_width .'px;
height: '. $to_popup_height .'px;
left: '. $dif_width .'px;
bottom: '. $dif_height .'px;
border: 1px solid black;
background: url('. DIR_WS_IMAGES . $image_to_popup .') top left no-repeat;
z-index: 200;
}
-->
</style>';
echo '<div style="display: none;">'. $charge_image .'</div>';
echo '<div id="image">
 <div id="zone1"></div>
  <!--[if IE]><a id="zone1" href="'. tep_href_link(FILENAME_PRODUCT_INFO, 'cPath='. $cPath .'&products_id='. $products_id) .'" title="'. addslashes($product_info['products_name']) .'">'. tep_image(DIR_WS_IMAGES.'pixel_trans.gif' , addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="0" vspace="0"') . '</a><![endif]-->'. tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="0" vspace="0"') . '
</div>' . tep_template_image_button('image_enlarge.gif');
// end no popup image css rollover
?>


################################################################################
##################################
or by (javascript method):

<!-- // Modif de popup image //-->
<script language="javascript" type="text/javascript"><!--

function popupWindow(url) {

window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}

function popupXL2(of) {

var xlContStyle = document.getElementById('xlCont').style
xlContStyle.display='block';
if (of && document.getElementById('xlImg').height > 400) {
with (xlContStyle) {
 height='400px';
 width=(parseInt(document.getElementById('xlImg').width) + 20) + 'px';
 overflow='auto'
}
}
}

//--></script>
<style type="text/css">
<!--
#xlCont {
display:none;
top:240px;
right:280px;
position:absolute;
background:white;  
border:1px solid #B9BAC1;
z-index:200
}
-->
</style>

<?php
echo '<a href="java script:popupXL2(false);">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
<div id="xlCont" style="display:none"><a href="java script:void(0)" onclick="document.getElementById('xlCont').style.display='none'">
<?php
  if ($product_info['products_image_lrg'] != '') {
echo tep_image(DIR_WS_IMAGES . $product_info['products_image_lrg'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'class="infoBox_image" id="xlImg"');
  } else {
echo tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $width, $height, 'class="infoBox_image" id="xlImg"');
  }
?>
</a></div>
<?php /* <script language="javascript"><!--
 document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script> */  ?>
<!-- // Fin Modif de popup image //-->

[danielc1234]

Thanks alot!