Show second image on rollover

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158270

Is it possible to show a the second image of our porduct on rollover in the thumbnail of the listing products view

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

  • Posts: 2143
  • Thank you received: 747
11 years 3 months ago #158296

Yes, it is.

There's actually more than one way. Suggest you google "two images hover", and you'll find plenty of how-to's. There's been a thread on this here on the forum as well, if you search a bit, you'll sure find it.

In any case, it requires some code editing... but you're since so long around here, it will not be a problem for you to figure where and how, no?


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158301

Thanks for the answer i'll be nice you paste the forum link to solution as i've searched and could not find it

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

  • Posts: 2143
  • Thank you received: 747
11 years 3 months ago #158304

Checked quickly but also no find. Remember it was Nicolas. Maybe he'll be back here and post a link, crazy busy man that he is. So, give him time and meanwhile explore elsewhere!


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

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

  • Posts: 84301
  • Thank you received: 13697
  • MODERATOR
11 years 3 months ago #158341

I don't know of such thread. It's actually not that easy as you first need to load the second image data from the database, generate the thumbnail, display the HTML of the thumbnail and add also custom javascript to handle the onhover.
You'll need the help of a developer to do that.

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158495

Hi Nicolas as you know i´m a php fool and dont know how to handle it but perhaps it should not be so difficult i mean
in listing_img_title. the method used to call the thumbnail image refers to the first image in the image list to display the first image in product list.
A simple solution would be
adding 2 divs
div class="image1"
and the php to call the thumbnail from the first image
div class="image2"
and the php to call the thumbnail from the second image.

Then in css it would be very simple to hide the second image and display it on rollover without javascript and hide first image.
if its easy and you can give me the php i would create the css animation and share it.
If it is very difficult or not as i think forget it i canlive without it.
thanks

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

  • Posts: 13201
  • Thank you received: 2322
11 years 3 months ago #158541

Hi,

You cna add the code:

	<?php
	$productClass = hikashop_get('class.product');
	$fullProd = $productClass->getProducts($this->row->product_id);
	$img = $this->image->getThumbnail(@$productClass->products[1]->images[1]->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
	if($img->success) {
		?>
		<div style="position: absolute; top: -<?php echo $this->image->main_thumbnail_y;?>px; position:relative;text-align:center;clear:both;width:<?php echo $this->image->main_thumbnail_x;?>px;margin: auto;" class="hikashop_product_second_image_subdiv">
		<?php
			echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$productClass->products[1]->images[1]->file_description).'" alt="'.$this->escape(@$productClass->products[1]->images[1]->file_name).'" src="'.$img->url.'"/>';
		?>
		</div>
	<?php } ?>
After:
	<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 }
			$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
			$img = $this->image->getThumbnail(@$this->row->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
			if($img->success) {
				echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';
			}
			//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;
			if($this->params->get('display_badges',1)){
				$this->classbadge->placeBadges($this->image, $this->row->badges, -10, 0);
			}
			$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>

In the view "product / listing_img_title". And play with the z-index to put an image over the other one, etc.

The following user(s) said Thank You: condorazul

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158582

Thanks Xavier i´ll try tonight and share the full css to make it work (most of it it´s already done)

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158626

Xavier i dont know why but in this second image nothing is displayed, it should choose the image in the order number two, instead displays it with the barcode image like there where no product at all. Also it has to be included the link to the product before the image.
The css is ready.

Last edit: 11 years 3 months ago by condorazul.

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

  • Posts: 13201
  • Thank you received: 2322
11 years 3 months ago #158640

I tried this code on my end and the second image was well displayed.
Does your products all have many images ? Are the products with variants ?

The code:

$productClass->products[1]->images[1]->file_path
get the second image of the product.

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158706

I only have one product to test and yes it has variants. When i insert the code it displays the code bar. I have 4 images in the product

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

  • Posts: 13201
  • Thank you received: 2322
11 years 3 months ago #158708

Thanks to try that code instead of the previous one:

	<?php
	$productClass = hikashop_get('class.product');
        if($this->row->product_parent_id != 0)
            $fullProd = $productClass->getProducts($this->row->product_parent_id);
        else
	    $fullProd = $productClass->getProducts($this->row->product_id);
	$img = $this->image->getThumbnail(@$productClass->products[1]->images[1]->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
	if($img->success) {
		?>
		<div style="position: absolute; top: -<?php echo $this->image->main_thumbnail_y;?>px; position:relative;text-align:center;clear:both;width:<?php echo $this->image->main_thumbnail_x;?>px;margin: auto;" class="hikashop_product_second_image_subdiv">
		<?php
			echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$productClass->products[1]->images[1]->file_description).'" alt="'.$this->escape(@$productClass->products[1]->images[1]->file_name).'" src="'.$img->url.'"/>';
		?>
		</div>
	<?php } ?>

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

  • Posts: 441
  • Thank you received: 24
11 years 3 months ago #158777

nothing is displayed, even created a new product without characteristics and nothing happens.
Now it does not display the image of barcode even url error displays...
Seems like it cant take the right address to the image thumbnail

Last edit: 11 years 3 months ago by condorazul.

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

  • Posts: 13201
  • Thank you received: 2322
11 years 3 months ago #158781

I just wrote this code quickly, it need to be improved, and some checks needs to be added in your case.
As it is a customization, and you don't have errors in HikaShop, we can't dedicate so much time on this (many requests on the forum this last days ;) )

I will try to get back to this when less users will be waiting for an answer about bug, etc.

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

  • Posts: 441
  • Thank you received: 24
11 years 2 days ago #170502

Can we retry to achive this question?

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

  • Posts: 84301
  • Thank you received: 13697
  • MODERATOR
11 years 1 day ago #170535

Hi,

I would recommend to contact our partners for a quote on that modification:
www.hikashop.com/home/our-partners.html
It shouldn't be much, we already provided some good starting point for the development of that customization.

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

Time to create page: 0.092 seconds
Powered by Kunena Forum