MouseOver Effect For Product Images for2.0hikashop

Start
Prev
1
Next
End

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

12 years 13 hours ago #76851

Dear hikashop support:

I wish can create move over effect on product images in hikashop2.0(we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it), i found this topic but it is for hikashop1.5.6( www.hikashop.com/en/forum/4-how-to/42708...ct-images.html#42708 ) now the code has been changed in2.0,please someone who can help me ?

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

Jerome
Offline
HikaShop core developer

Posts: 26152
Thank you received: 4027
MODERATOR

11 years 11 months ago #77083

Hi,

I checked it and I can tell you that even if the popup management in HikaShop 2.0 has changed, the code from the other thread is still compatible.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77087

ok thank you very much Jerome!
but the the code is different from 1.5.6,did u saw it?

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

Jerome
Offline
HikaShop core developer

Posts: 26152
Thank you received: 4027
MODERATOR

11 years 11 months ago #77107

Hi,

When I said that it's still compatible, I mean that the fix should still work.
You have to add the

onmouseover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;"

in the function parameter

'id="hikashop_main_image_link"'

to add this html into the link.

Regards,

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77163

ok Jerome thank you very much it works ,but can it worked with the category / listing? i mean ,when create a menu link to a hikashop category,can the products image under the category have the same effect? i found the category / listing_img_desc.php, but didn't found a line like 'id="hikashop_main_image_link"'

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77164

maybe is this file?product / listing_.php? add something to here?

<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">
<div style="position:relative;text-align:center;clear:both;width:<?php echo $this->image->main_thumbnail_x;?>px;margin: auto;" class="hikashop_product_image_subdiv">
<?php if($this->params->get('link_to_product_page',1)){ ?>
<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
<?php }
echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , '' , $this->image->main_thumbnail_x, $this->image->main_thumbnail_y);
$main_thumb_x = $this->image->main_thumbnail_x;
$main_thumb_y = $this->image->main_thumbnail_y;
$horizontal = '0';
$vertical = '0';
$this->classbadge->placeBadges($this->image, $this->row->badges, $vertical, $horizontal);
$this->image->main_thumbnail_x = $main_thumb_x;
$this->image->main_thumbnail_y = $main_thumb_y;

if($this->params->get('link_to_product_page',1)){ ?>
</a>
<?php } ?>
</div>
</div>


i wish can MouseOver Effect on Product main_thumbnail

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77178

(index.php?option=com_hikashop&view=category&layout=listing ) i mean open this link product's thumbnail can get that effect?

Last edit: 11 years 11 months ago by ousia2.

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

Jerome
Offline
HikaShop core developer

Posts: 26152
Thank you received: 4027
MODERATOR

11 years 11 months ago #77183

Hi,

The category does not have the same code but the function image->display use same parameters.
So you can put the code in the same argument (last text before width and height parameters).
So replace this :

echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , '' , $this->image->main_thumbnail_x, $this->image->main_thumbnail_y);

By this:

echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , 'onmouseover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;"' , $this->image->main_thumbnail_x, $this->image->main_thumbnail_y);

Regards,

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77188

hi jerome i do as you said but looks like it doesn't work (category / listing_img.php)
www.2yuju.com/themelist.html here is my site

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

Jerome
Offline
HikaShop core developer

Posts: 26152
Thank you received: 4027
MODERATOR

11 years 11 months ago #77194

Hi,

Right, the category listing does not generate a link thanks to the image->display function. The link is just before.
But the link target is the category page, not the full size image. So the modification is a little bit different.
You have to extract the image from the main link, create another link to the fullsize category image and and the onmouseover to this link.

Regards,

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77196

ok i see,but please can you tell me how to do this? extract the image from the main link, create another link to the fullsize category image and and the onmouseover to this link. please,it is hard to me to do this without your help

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

Jerome
Offline
HikaShop core developer

Posts: 26152
Thank you received: 4027
MODERATOR

11 years 11 months ago #77279

Hi,

Here the code for listing_img_title view (for HikaShop 2.0)

<?php $link = hikashop_completeLink('category&task=listing&cid='.$this->row->category_id.'&name='.$this->row->alias.$this->menu_id);?>
<?php if($this->config->get('thumbnail',1)){ ?>
<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_category_image">
  <a href="<?php echo $link;?>" rel="{handler: 'image'}" title="<?php echo $this->escape($this->row->category_name); ?>">
    <?php
    if(!isset($this->uploadFolder_url)) {
      JHtml::_('behavior.modal');
      $config =& hikashop_config();
      $uploadFolder = ltrim(JPath::clean(html_entity_decode($config->get('uploadfolder'))),DS);
      $uploadFolder = rtrim(JURI::base(true),'/').'/'.rtrim($uploadFolder,DS).DS;
      $this->uploadFolder_url = str_replace(DS,'/',$uploadFolder);
    }
    echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), 'onmouseover="window.hikashop.openBox(this.parentNode,\''.$this->uploadFolder_url.@$this->row->file_path.'\');this.parentNode.href=\''.$link.'\';"' , '' , $this->image->main_thumbnail_x,  $this->image->main_thumbnail_y);
    ?>
  </a>
</div>
<?php } ?>
<br/>
<span class="hikashop_category_name">
  <a href="<?php echo $link;?>">
    <?php

    echo $this->row->category_name;
    if($this->params->get('number_of_products',0)){
      echo ' ('.$this->row->number_of_products.')';
    }
    ?>
  </a>
</span>

Regards,

Last edit: 11 years 11 months ago by Jerome.

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

ousia2
Topic Author
Offline

Posts: 10
Thank you received: 0

11 years 11 months ago #77284

ok my lord thanks very much for your code

i have copy and paste it to category / listing_img_title.php

but visit my site front-end still doesn't have the effect
www.2yuju.com/themelist.html