Как увеличить изображение в атрибутах? - Joomla 3.x: Шаблоны, разметка и макеты вывода

Добрый день друзья. использую шаблон http://joomla.vinagecko.com/templates/?template=vina_shoeshop

подскажите как  правильно увеличить цветные  картинки в атрибуте при нажатии?  нашел код прописал но немного криво отображается.

добавил  перед <img src=

<a ' class='lightbox' href='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='".$v2->value_name."' />


картинки во весь размер отображаются. При изменении размера изменяется еще размер основной фотографии. Как это все грамотно сделать?

прикрепляю код который отвечает за атрибутов



             // attribut type select
                
                    if ($jshopConfig->attr_display_addprice){
                        foreach($options as $k2=>$v2){
                            if (($v2->price_mod=="+" || $v2->price_mod=="-") && $v2->addprice>0){ 
                                $ext_price_info = " (".$v2->price_mod.formatprice($v2->addprice).")";
                                $options[$k2]->value_name .=$ext_price_info;
                            }
                        }
                    }

                    if ($jshopConfig->product_attribut_first_value_empty){
                        $first = array();
                        $first[] = JHTML::_('select.option', '0', _JSHOP_SELECT, 'val_id','value_name');
                        $options = array_merge($first, $options);
                    }
                    
                    if (isset($attributeActive[$attr_id]) && isset($attrimage[$attributeActive[$attr_id]])){
                        $_active_image = $attrimage[$attributeActive[$attr_id]];
                    }else{
                        $_active_image = '';
                    }
                    if (isset($attributeActive[$attr_id])){
                        $_select_active = $attributeActive[$attr_id];
                    }else{
                        $_select_active = '';
                    }
                    $selects[$attr_id]->selects = JHTML::_('select.genericlist', $options, 'jshop_attr_id['.$attr_id.']','class = "inputbox" size = "1" onchange="setAttrValue(\''.$attr_id.'\', this.value);"','val_id','value_name', $_select_active)."<span class='prod_attr_img'>".$this->getHtmlDisplayProdAttrImg($attr_id, $_active_image)."</span>";
                    $selects[$attr_id]->selects = str_replace(array("\n","\r","\t"), "", $selects[$attr_id]->selects);
                }else{
                // attribut type radio
                
                    foreach($options as $k2=>$v2){
                        if ($v2->image) $options[$k2]->value_name = "<img src='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='' /> ".$v2->value_name;
                    }

                    if ($jshopConfig->attr_display_addprice){
                        foreach($options as $k2=>$v2){
                            if (($v2->price_mod=="+" || $v2->price_mod=="-") && $v2->addprice>0){ 
                                $ext_price_info = " (".$v2->price_mod.formatprice($v2->addprice).")";
                                $options[$k2]->value_name .=$ext_price_info;
                            }
                        }
                    }

                    $radioseparator = '';
                    if ($jshopConfig->radio_attr_value_vertical) $radioseparator = "<br/>"; 
                    foreach($options as $k2=>$v2){
                        $options[$k2]->value_name = "<span class='radio_attr_label'>".$v2->value_name."</span>";
                    }

                    $selects[$attr_id]->selects = sprintRadioList($options, 'jshop_attr_id['.$attr_id.']','onclick="setAttrValue(\''.$attr_id.'\', this.value);"','val_id','value_name', $attributeActive[$attr_id], $radioseparator);
                    $selects[$attr_id]->selects = str_replace(array("\n","\r","\t"), "", $selects[$attr_id]->selects);
                }
                $dispatcher->trigger('onBuildSelectAttribute', array(&$attributeValues, &$attributeActive, &$selects, &$options, &$attr_id, &$v));
            }
        }
    return $selects;
    }

    function getHtmlDisplayProdAttrImg($attr_id, $img){
        $jshopConfig = JSFactory::getConfig();
        if ($img){
            $path = $jshopConfig->image_attributes_live_path;
        }else{
            $path = $jshopConfig->live_path."images";
            $img = "blank.gif";
        }
        $urlimg = $path."/".$img;
        
        $html = '<img id="prod_attr_img_'.$attr_id.'" src="'.$urlimg.'" alt="" />';
        return $html;
    }

}
?>

Попробуйте закрыть тэг a  после <img /></a> .
Вообще у вас что-то странное и удивительное: <a ' class='lightbox' href='".$jshopConfig-> такое вообще не может быть.

когда закрывал  тег а выходила ошибка, может не так делал не знаю(

данный код я просто скопировал с img превратил в а  методом тыка. по этому сюда написал чтобы узнать как правильно сделать

получился такой код

 if ($v2->image) $options[$k2]->value_name = "<a  class='lightbox' href='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='".$v2->value_name."' /><img src='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='".$v2->value_name."' /></a><span>".$v2->value_name;

Единственное при нажатии на основные картинки слева, исчезают атрибуты из-за style="display: none;"  думаю класс lightbox отвечает за данный тег, но как то можно сделать так чтобы не исчез? Пытался вручную прописать display: block; чтобы не удалялся, но принудительно меняет на none как с этим бороться скажите пожалуйста?:

через CSS или через тег <style> прописать для элемента display: block !important; (по селектору).

получился спасибо) Единственное второй класс прописал, а то не получился через стайл сделать удалял так же.