Stack two product thumbnails

  • Posts: 228
  • Thank you received: 8
9 years 4 months ago #183528

-- HikaShop version -- : latest
-- Joomla version -- : 3.3.6

Hi,

I've got a request from a client of mine to have a transition effect between two product images when hovering a product image in category listing. I've found the source of the image class in listing_img_title.php under this code:

$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.'"/>';
}

Can you help me to find out how to create another image variable, let say $img2 and assign the second thumbnail to it?

Thank you in advance,

Guy.

Last edit: 9 years 4 months ago by theguy.

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

  • Posts: 12953
  • Thank you received: 1778
9 years 4 months ago #183546

Hello Guy,
Can you give us more information about the "$img2" and about what you want to do through some screenshots for example ?
Thanks.

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

  • Posts: 228
  • Thank you received: 8
9 years 4 months ago #183636

Hi Mohamed,

You can see an example of what it is the client wishes to implement:

http://jsfiddle.net/Xm2Be/3/

It's a simple hover effect that switches between two images. The client wishes to add this effect to the category list products so that it will switch between to product images. First will show the main thumbnail then the second one in line.

Thank you,

Guy.

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

  • Posts: 26000
  • Thank you received: 4004
  • MODERATOR
9 years 4 months ago #183730

Hi,

For the product page, I would recommend you to override for the view "product | show_block_img" but for the product listing, it will be a little bit different.
When displaying a product listing (view "product | listing_img_title" or other "listing_img_..." views) ; you just have access to one single image.

In the file "components/com_hikashop/views/product/view.html.php" please replace

foreach($images as $image){
	if($row->product_id==$image->file_ref_id) {
		if(!isset($row->file_ref_id)){
			foreach(get_object_vars($image) as $key => $name){
				$rows[$k]->$key = $name;
			}
		}
		break;
	}
}
into
foreach($images as $image){
	if($row->product_id != $image->file_ref_id)
		continue;

	if(!isset($row->file_ref_id)) {
		foreach(get_object_vars($image) as $key => $name){
			$rows[$k]->$key = $name;
		}
	} else {
		if(empty($row->images))
			$row->images = array();
		$row->images[] = $image;
	}
}
So you will have access to other images in the product listing views and you could retrieve the second image of a product using
$img = null;
if(!empty($this->row->images[0]))
	$img = $this->image->getThumbnail($this->row->images[0]->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
if(!empty($img) && $img->success)
	echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->images[0]->file_description).'" alt="'.$this->escape(@$this->row->images[0]->file_name).'" src="'.$img->url.'"/>';

Note : The view.html.php patch I proposed has vocation to be included in HikaShop if it's good for you.

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.
The following user(s) said Thank You: theguy

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

  • Posts: 228
  • Thank you received: 8
9 years 3 months ago #184619

Hi Jerome,

It was a little tricky to implement but it eventually worked :)
Thank you very much for the detailed code and instructions.

I think it could be a great addition to Hikashop core in the future.

Guy.

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

Time to create page: 0.075 seconds
Powered by Kunena Forum