Custom show_block_img.php conflict with chzn selec

  • Posts: 28
  • Thank you received: 1
11 years 4 months ago #154467

:ohmy: sho_-- zink.development.webdesign-toledo.com/zi...ls/atm-green-machine
-- HikaShop version -- : 2.2.3
-- Joomla version -- : 3.3.0
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : n/a

I have a custom show_block_img.php. I disabled the pupups on the thumbnails and main image, and added an image zoom plugin for the main image. This all works fine until a variant is selected from the chosen select box. I think what I need to do is write a trigger for the zoom plugin that i am using based on a change in chosen, however I'm not sure how to specifically target chosen in hikashop as jQuery('.targetdiv').chosen.change() does not seem to work for me. For the record here is my custom display code.

<?php
/**
* @package	HikaShop for Joomla!
* @version	2.2.3
* @author	hikashop.com
* @copyright	(C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
* @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');

$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
$variant_name = $this->variant_name;
if(substr($variant_name, 0, 1) != '_')
$variant_name = '_' . $variant_name;
$variant_main = $variant_name;
$display_mode = 'display:none;';
} 
?>

<div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
    <div class="row-fluid">
        <div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div span8">
            <?php
            if (!empty($this->element->images) && count($this->element->images) > 1):
                $firstThumb = true;
                foreach ($this->element->images as $image) {
                    if($this->image->override) {
                        echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);
                    } else {
                        if(empty($this->popup))
                        $this->popup = hikashop_get('helper.popup');
                        $img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
                        if($img->success) {
                            $id = null;
                            if($firstThunb) {
                                $id = 'hikashop_first_thumbnail';
                                $firstThunb = false;
                            }
                            $attr = 'onclick="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.@$image->file_description.'\', \''.@$image->file_name.'\');"';
                            $html = '<img class="hikashop_child_image" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
                            echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'.$variant_name));
                        }
                    }
                }
            endif;
            ?>
        </div>
        <div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div zoom span4 pull-right">
            <span>Grab Image To</span>
            <?php if(!empty ($this->element->images)){
                $image = reset($this->element->images);
            }
            $height = (int)$this->config->get('product_image_y');
            $width = (int)$this->config->get('product_image_x');
            if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
            if(empty($width)) $width = (int)$this->config->get('thumbnail_x');
            $divWidth = $width;
            $divHeight = $height;
            $this->image->checkSize($divWidth,$divHeight,$image);
            if (true) {
                if(!empty ($this->element->images)){
                    echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image"  />';
                }
            } else {
            $style = '';
            if (!empty ($this->element->images) && count($this->element->images) > 1) {
                if (!empty($height)) {
                    $style = ' style="height:' . ($height + 20) . 'px;"';
                }
            }
            $variant_name='';
            if(isset($this->variant_name)){
                $variant_name=$this->variant_name;
            } ?>
            <div class="hikashop_product_main_image_thumb zoom" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" >
                <div class="hikashop_product_main_image">
                    <div class="hikashop_product_main_image_subdiv">
                    <?php
                    if($this->image->override) {
                        echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" ','id="hikashop_main_image_link"', $width,  $height);
                    } else {
                        if(empty($this->popup))
                        $this->popup = hikashop_get('helper.popup');
                        $image_options = array('default' => true);
                        $img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
                        if($img->success) {
                            $attr = '';
                            
                            $html = '<span><img id="hikashop_main_image'.$variant_name.'"  title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/></span>';
                            if(!empty($this->element->badges))
                            $html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false);
                            echo $this->popup->image($html, $img->origin_url, null, $attr);
                        }
                    } ?>
                    </div>
                </div>
            </div>
        <?php
        } ?>
        </div>
    </div>
</div>
<script>
    jQuery('.hikashop_child_image').click(function(){
        jQuery('.hikashop_main_image_div').trigger('zoom.destroy');
    });
    jQuery('.hikashop_main_image_div').hover(function(){
        jQuery(this).zoom({ 
            on:'grab', 
            magnify: 1.5,
            duration: 0,
        });
    });
    jQuery('.hikashop_main_image_div').mousedown(function(){
        jQuery('#hikashop_main_image').css('opacity', '0');
    });
    jQuery('.hikashop_main_image_div').mouseup(function(){
        jQuery('#hikashop_main_image').css('opacity', '100')
    });
    jQuery('.hikashop_main_image_div').mouseout(function(){
        jQuery('#hikashop_main_image').css('opacity', '100');
    });
</script>

<script type="text/javascript">
if(!window.localPage)
window.localPage = {};
if(!window.localPage.images)
window.localPage.images = {};
window.localPage.changeImage = function(el, id, url, width, height, title, alt) {
var d = document, target = d.getElementById(id);
if(!target) return false;
target.src = url;
target.width = width;
target.height = height;
target.title = title;
target.alt = alt;
window.localPage.images[id] = el;
return false;
};
window.localPage.openImage = function(id) {
if(!window.localPage.images[id])
window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail');
window.localPage.images[id].click();
return false;
};
</script>

I also just noticed that when a variant is selected in the chosen box, it disable the ability to change the main image by clicking/hovering on the thumbnails.

Last edit: 11 years 4 months ago by TheBeacon.

Please Log in or Create an account to join the conversation.

  • Posts: 84293
  • Thank you received: 13693
  • MODERATOR
11 years 4 months ago #154492

Hi,

I believe that you want to look at the javascript code in the file administrator/components/com_hikashop/types/characteristic.php
There, you see the javascript which is run when a characteristic dropdown value is changed. It will actually make a copy of the variant image HTML and place it on the image area of the product page. So it's at that point that you need to trigger again the magiczoom stuff to display the image like you want.

Please Log in or Create an account to join the conversation.

Time to create page: 0.056 seconds
Powered by Kunena Forum