Stack two product thumbnails

theguy
Topic Author
Offline

11 years 9 months ago - 11 years 9 months ago #183528 by theguy

Stack two product thumbnails was created by theguy

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

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: 11 years 9 months ago by theguy.

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

Mohamed Thelji
Offline

11 years 9 months ago #183546 by Mohamed Thelji

Replied by Mohamed Thelji on topic Stack two product thumbnails

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.

theguy
Topic Author
Offline

11 years 9 months ago #183636 by theguy

Replied by theguy on topic Stack two product thumbnails

Hi Mohamed,

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

Code:

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.

Jerome
Offline
HikaShop core developer

11 years 9 months ago #183730 by Jerome

Replied by Jerome on topic Stack two product thumbnails

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

Code:

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

Code:

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

Code:

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

The following user(s) said Thank You: theguy

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

theguy
Topic Author
Offline

11 years 9 months ago #184619 by theguy

Replied by theguy on topic Stack two product thumbnails

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