I would first like to say that I'm a noob to PHP. The problem that I am having is with my picture viewer. When you click on the thumbs, they show above in the main image viewer. The problem is that it is displaying the thumbnail instead of resizing the original image to fit the main image spot. When you click on the main image, the original pic is to be displayed in a lightbox. How do I go about fixing this issue? Thanks in advance for those who help!
Code:
http://conceptsinmotion.net/store/store?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=17
PHP Code:
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
<?php echo $buttons_header // The PDF, Email and Print buttons ?>
<?php
if( $this->get_cfg( 'showPathway' )) {
echo "<div class=\"pathway\">$navigation_pathway</div>";
}
if( $this->get_cfg( 'product_navigation', 1 )) {
if( !empty( $previous_product )) {
echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
}
if( !empty( $next_product )) {
echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
}
}
?>
<br style="clear:both;" /><center>
<table border="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr align="right">
<td colspan="3" align="center">
<?php if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
<div id="parent_img"><?php echo $product_image ?></div>
<br/><br/>
<?php if (count($images)): foreach ($images as $image){$curentwidth += $image->file_image_thumb_width;}?>
<script type="text/javascript">
iens6=document.all||document.getElementById
ns4=document.layers
var speed=5
</script>
<div id="scroll" style="margin-left: auto;margin-right: auto;">
<div class="box-left" style="width: 15px; float: left;margin:10px 0px 0px 0px"><a class="mouseover_left" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/prev.png';?>" alt="" border="0" /></a></div>
<span class="box-right" style="float: right;margin:10px 0px 0px 0px"><a class="mouseover_right" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/next.png';?>" alt="" border="0" /></a></span>
<div id="container" style="overflow: hidden; width: 50%; position: relative; height: 55px;float:center">
<div id="child" style="position: absolute; width: <?php echo $curentwidth;?>px; left: 0pt; top: 0pt;"> <ilayer name="nscontainer"> <layer name="nscontent" visibility="hidden"> <?php echo $this->vmlistAdditionalImages( $product_id, $images )?> </layer> </ilayer> </div>
</div>
<div class="box-right" style="float: right;margin:10px 0px 0px 0px"></div>
</div>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("child") : document.all.content
var contentheight=crossobj.offsetWidth
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.width
}
function movedown(){
if (iens6&&parseInt(crossobj.style.left)>=<?php echo 64*count($images)*(-1)/5-32;?>)
crossobj.style.left=parseInt(crossobj.style.left)-speed+"px"
else if (ns4&&crossobj.left>=<?php echo 64*count($images)*(-1)/5-32;?>)
crossobj.left-=speed
movedownvar=setTimeout("movedown()",50)
}
function moveup(){
if (iens6&&parseInt(crossobj.style.left)<=0)
crossobj.style.left=parseInt(crossobj.style.left)+speed+"px"
else if (ns4&&crossobj.left<=0)
crossobj.left+=speed
moveupvar=setTimeout("moveup()",50)
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetWidth
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</td>
<style type="text/css">
ul.box li{float:left;list-style:none;padding-left:0 !important}
ul.box{width:100%;margin:0px;padding:0px;}
li:hover img{opacity:1}
</style>
<script type="text/javascript">
function show_img(url)
{
var output1 = window.document.getElementById('curent').href=url;
var output2 = window.document.getElementById('img_preview').src=url;
return true;
}
</script>
<?php endif;?><br /><br />
</tr>
<tr align="right">
<td rowspan="1" colspan="3" align="right">
<h1 style="margin-left: auto;margin-right: auto;"><?php echo $product_name ?> <?php echo $edit_link ?></h1>
</td>
</tr>
<?php if( $this->get_cfg('showManufacturerLink')) { ?>
<tr align="center">
<td rowspan="1" colspan="3"><?php echo $manufacturer_link ?><br /></td>
</tr>
<tr align="center">
<td colspan="3"> </td>
</tr>
<?php } ?>
<tr align="right">
<td colspan="3" align="center" valign="top">
<?php echo $product_price_lbl ?>
<?php echo $product_price ?><br /></td>
</tr>
<tr align="right">
<td colspan="3" align="center" valign="top"><?php echo $product_packaging ?><br /></td>
</tr>
<tr align="center">
<td colspan="3"><?php echo $ask_seller ?></td>
</tr>
<tr id="browseProductDescription">
<td colspan="3" rowspan="1" align="center"><hr />
<?php echo $product_description ?><br/>
<span style="font-style: italic;"><?php echo $file_list ?></span>
</td>
</tr>
<tr align="left">
<td width="16%" align="left"><?php
if( $this->get_cfg( 'showAvailability' )) {
echo $product_availability;
}
?><br />
</td>
<td width="17%" align="right"><?php echo $addtocart ?></td>
</tr>
<tr align="center">
<td colspan="4"><?php echo $product_type ?></td>
</tr>
<tr align="center">
<td colspan="4"><hr /><?php echo $product_reviews ?></td>
</tr>
<tr align="center">
<td colspan="4"><?php echo $product_reviewform ?><br /></td>
</tr>
<tr align="center">
<td colspan="4"><?php echo $related_products ?><br />
</td>
</tr>
<?php if( $this->get_cfg('showVendorLink')) { ?>
<tr align="center">
<td colspan="4"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
</tr>
<?php } ?>
</tbody>
</table></center>
<?php
if( !empty( $recent_products )) { ?>
<div class="vmRecent">
<?php echo $recent_products; ?>
</div>
<?php
}
if( !empty( $navigation_childlist )) { ?>
<?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
<?php echo $navigation_childlist ?><br style="clear:both"/>
<?php
} ?>
Code:
/**
* Main CSS file for the "black color" theme for VirtueMart
* @copyright 2006-2008 soeren
* @colortheme (C) 2008 gtwillemsen - surpass.nl
* @license GNU/GPL
*
*/
/* General Shop Styles here please */
.addtocart_button, .notify_button {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
border: none;
font-weight:bold;
font-family:inherit;
color: #ffffff;
vertical-align: middle;
overflow:hidden;
}
.addtocart_button {
background: url( 'images/add-to-cart.png' ) no-repeat center transparent;
}
.notify_button {
background: url( 'images/notify.png' ) no-repeat center transparent;
}
.addtocart_button_module {
text-align:center;
background-position:bottom left;
width:160px;height:30px;
cursor:pointer;
color: #ffffff;
border: none;
font-weight:bold;
font-family:inherit;
background: url( 'images/transparent.png' ) no-repeat center transparent;
vertical-align: middle;
overflow:hidden;
}
input.addtocart_button_module:hover {
color: #333333;
}
.addtocart_form {
width: 100%;
display: inline;
white-space: nowrap;
}
/* The quantity box beneath the "add to cart" button */
.quantity_box {
vertical-align: middle;
}
.quantity_box_button {
width:10px;
vertical-align:middle;
height:10px;
background-repeat: no-repeat;
background-position: center;
}
.quantity_box_button_down {
background-image: url(images/down_small.png);
}
.quantity_box_button_up {
background-image: url(images/up_small.png);
}
.continue_link, .checkout_link {
margin: 2px;
padding: 2px 0px 2px 40px;
vertical-align: middle;
font-weight: bold;
font-size: 1.4em;
width: 40%;
}
.checkout_link {
margin-left: 40px;
background: url( 'images/forward.png' ) no-repeat left;
}
.continue_link {
background: url( 'images/back.png' ) no-repeat left;
}
.next_page {
background: url( 'images/next_16x16.png' ) no-repeat right;
padding-right: 30px;
line-height: 20px;
float: right;
width: auto;
}
.previous_page {
background: url( 'images/previous_16x16.png' ) no-repeat left;
padding-left: 30px;
line-height: 20px;
float: left;
width: auto;
}
/* This is the text box informing customers about your returns policy */
.legalinfo {
background: #cccccc;
border: 2px solid gray;
margin: 10px;
padding: 0px 0px 10px 10px;
}
div.pathway {
margin-bottom: 1em;
}
div.pathway img {
padding: 0 2px;
}
/* The PDF, Email and Print buttons */
div.buttons_heading {
margin:10px;
width:10%;
float:right;
}
.productPrice {
font-weight:bold;
white-space: nowrap;
}
.product-Old-Price {
color:red;
text-decoration:line-through;
}
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
width:100%;
padding: 3px 3px 3px 3px;
vertical-align: top;
}
.browseProductTitle {
font-size: 16px;
font-weight: bold;
padding: 3px;
margin-top: 3px;
width: 30%;
float: left;
}
.browseProductImageContainer {
float: left;
width: auto;
margin: 3px;
}
.browseProductImageContainer {
margin: 3px;
float: left;
height:130px;
width:120px;
}
.browseProductDetailsContainer {
float: left;
width: 70%;
}
.browseProductDescription {
margin-top: 40px;
width:40%;
}
.browsePriceContainer {
float: left;
margin: 5px;
width:20%;
}
.browseAddToCartContainer {
width:30%;
text-align:center
}
.browseRatingContainer {
float: left;
width:25%;
margin: 3px;
white-space: nowrap;
}
/** Flypage Styles **/
.thumbnailListContainer {
text-align: center;
width: 200px;
height: 200px;
overflow: auto;
}
/*
General Form Styling
*/
.formLabel {
float:left;
width:30%;
text-align:right;
font-weight: bold;
margin: 2px;
white-space: nowrap;
clear: left;
vertical-align: middle;
margin-top: 8px;
}
#agreed_div {
white-space: normal;
}
.formField {
float:left;
width:60%;
margin: 2px;
vertical-align: middle;
margin-top: 8px;
}
.missing {
color:red;
font-weight:bold;
}
/**
* Administration Styles
*/
.adminListHeader {
float:left; height: 48px; background-repeat: no-repeat;
text-align: left; font-size: 18px; font-weight: bold;
padding-left: 80px;
}
.labelcell {
margin-left: auto;
font-weight: bold;
vertical-align: top;
width: 30%;
}
table.adminform td.labelcell {
text-align: right;
}
.iconcell {
vertical-align: top;
width: 5%;
}
.shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip {
background-color:#FAFAD2;
background-position:left 5px;
background-repeat:no-repeat;
border-color:#AACCAA;
border-style:dotted none;
border-width:1px 0pt;
font-weight: 900;
margin:1pt 1pt 1em 1em;
padding:0.5em 1em 1.5em 48px;
}
.shop_error {
background-image: url( images/error.png );
}
.shop_warning {
background-image: url( images/warning.png );
}
.shop_info, .shop_tip {
background-image: url( images/info.png );
}
.shop_debug {
background-image: url( images/log_debug.png );
}
.shop_critical {
font-weight: bold;
background-image: url( images/log_critical.png );
}
/**
* Addtocart detail Styles
*/
.vmCartContainer { /* Cart Container */
width: auto;
float: right;
background: #cccccc;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes { /* Attributes Div*/
margin-top:8px;
width:100%;
}
.vmAttribChildDetail { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType { /* Product type div*/
width: 100%;
}
.vmClearDetail { /*Clear the divs afer child types*/
clear: both;
}
.vmClearAttribs { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne { /* Odd Row One styling */
background: #cccccc;
}
.vmRowTwo { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail a, .vmChildDetail a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
/* Styling for the form elements to enable correct Line Up */
.inputboxquantity {
margin-top: 3px;
vertical-align: middle;
}
.availabilityHeader {
text-decoration:underline;
font-weight:bold;
}
.inputboxattrib {
float: left;
margin-top: 0px;
vertical-align: middle;
margin-bottom: 2px;
}
.quantitycheckbox {
margin-top: 6px;
vertical-align: middle;
}
/**
* Addtocart detail Styles for placing attributes beside product_types
*/
.vmCartContainer_2up { /* Cart Container */
width: 100%;
float: left;
background: #cccccc;
border: 1px solid #000;
padding: 3px;
}
.vmCartChildHeading_2up { /* Header for the cart */
font-size: 14px;
font-weight: bold;
padding-bottom: 3px;
text-align: left;
}
.vmCartChild_2up { /* Container for the Child Product */
vertical-align: middle;
border: 1px solid #000;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
float:left;
}
.vmChildDetail_2up { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
}
.vmCartChildElement_2up { /* Individual element styling */
width: 100%;
vertical-align: middle ;
height: 25px;
text-align: left;
}
.vmCartAttributes_2up { /* Attributes Div*/
float: left;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
width:50%;
}
.vmAttribChildDetail_2up { /* Product Attributes Styling */
}
.vmMultiple {
height:35px;
}
.vmChildType_2up { /* Product type div*/
background: #cccccc;
padding: 0px 5px 5px 5px;
margin: 0px 5px 5px 5px;
float: left;
width: 40%;
border: 1px solid #000;
}
.vmClearDetail_2up { /*Clear the divs afer child types*/
}
.vmClearAttribs_2up { /*Clear the divs before the attributes*/
clear:both;
}
.vmRowOne_2up { /* Odd Row One styling */
background: #cccccc;
}
.vmRowTwo_2up { /* Even Row Styling */
background: white;
}
/* Link Details for link to child*/
.vmChildDetail_2up a, .vmChildDetail_2up a:link {
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmChildDetail_2up a:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList {
cursor : pointer;
font-size : 11px;
color : #000000;
text-decoration : none;
font-weight : bold;
}
.vmCartModuleList:hover {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
.vmquote {
margin: 4px;
border: 1px solid #cccccc;
background-color: #E9ECEF;
padding: 10px;
font-size: 12px;
color: #254D78;
}
.editable {
background: #ffff33;
cursor: pointer;
}
ul.pagination li {
padding: 2px 1px;
display: inline;
background: none;
}
.hr {
clear:both;
border:1px solid #FFFFFF;
height:1px;
width:100%;
text-align:left;
}
.hr_div {
height:10px;
width:100%;
}
.clr {
clear: both;
overflow:hidden;
}
.box img, #child ul li a img {
height:48px;
margin:0 2px 0 0;
width:64px;
}
#parent_img {width: 325px; height: 221px; margin-left: auto; margin-right: auto;}
#parent_img a {text-decoration: none;}
#parent_img a img {width: 325px; height: 221px}
Before you post, read our: 
