Show second image on rollover

condorazul
Topic Author
Offline

12 years 4 months ago #158270 by condorazul

Show secon imege on rollover was created by condorazul

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.

lousyfool
Offline

12 years 4 months ago #158296 by lousyfool

Replied by lousyfool on topic Show secon imege on rollover

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.

condorazul
Topic Author
Offline

12 years 4 months ago #158301 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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.

lousyfool
Offline

12 years 4 months ago #158304 by lousyfool

Replied by lousyfool on topic Show secon imege on rollover

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.

nicolas
Offline

12 years 4 months ago #158341 by nicolas

Replied by nicolas on topic Show secon imege on rollover

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.

condorazul
Topic Author
Offline

12 years 4 months ago #158495 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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.

Xavier
Offline

12 years 4 months ago #158541 by Xavier

Replied by Xavier on topic Show secon imege on rollover

Hi,

You cna add the code:

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:

Code:

	<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.

condorazul
Topic Author
Offline

12 years 4 months ago #158582 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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.

condorazul
Topic Author
Offline

12 years 4 months ago - 12 years 4 months ago #158626 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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: 12 years 4 months ago by condorazul.

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

Xavier
Offline

12 years 4 months ago #158640 by Xavier

Replied by Xavier on topic Show secon imege on rollover

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:

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.

condorazul
Topic Author
Offline

12 years 4 months ago #158706 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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.

Xavier
Offline

12 years 4 months ago #158708 by Xavier

Replied by Xavier on topic Show secon imege on rollover

Thanks to try that code instead of the previous one:

Code:

	<?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.

condorazul
Topic Author
Offline

12 years 4 months ago - 12 years 4 months ago #158777 by condorazul

Replied by condorazul on topic Show secon imege on rollover

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: 12 years 4 months ago by condorazul.

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

Xavier
Offline

12 years 4 months ago #158781 by Xavier

Replied by Xavier on topic Show secon imege on rollover

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.

condorazul
Topic Author
Offline

12 years 3 weeks ago #170502 by condorazul

Replied by condorazul on topic Show second image on rollover

Can we retry to achive this question?

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

nicolas
Offline

12 years 3 weeks ago #170535 by nicolas

Replied by nicolas on topic Show second image on rollover

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.350 seconds