Cloud Zoom Lite in show_block_img

  • Chuck
  • Topic Author
11 years 11 months ago #78302

Hello Hikashop Team,

first of all - thank you for your work. I´m new with hikashop but until now everything is just fine! :)

Except a little problem I hope you can help me with. I´m no pro coder but I´ think I chose the right direction on this matter:

1. I want to integrate Cloud Zoom Lite in den Product View.

2. My way led me to Views->Product->tmpl->show_block_img.php

3. To use Cloud Zoom Lite you have to do it this way:

{cloudzoom }
<a href="/images/stories/big_image.jpg">
<img title="Sample Image" src="/images/stories/thumbnail.jpg" />
</a>
{/cloudzoom }

4. I tried in a normal joomla article and it works. So my plan was to integrate the cloudzoom-tag in the show_block_img.php

5. The image will be display by following code, if I´m not wrong:

<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height);
if(!empty($this->element->badges)) $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0');
?>


6. Problem is that this code produce an a-tag with onclick-SqueezeBox on itself. To integrate cloudzoom I need the detailed code for this section, but I don´t know where it is generated. I think I just need code for the current path to put it in my own a- and img-tags.

I hope I described the problem good enough to understand. I would be happy for any help!

Best regards from freezy Berlin :)

Chuck

Last edit: 11 years 11 months ago by Chuck.

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

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

Hi,

The detailed code is in the file "administrator/components/com_hikashop/helpers/image.php", in the function "display()".

If you have only on image per product, I think that you can replace the line:

echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height);
By your plugin code.

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

  • Chuck
  • Topic Author
11 years 11 months ago #78360

Hello Xavier,

thank you for your help. You gave me a perfect hint because I failed to see that "com_hikashop->helper" is under "administrator".

The problem is that I have more than one image. There is still the normal function with the thumbs. But I´ve done a good step forward. The Cloud Zoom Function is working - unfortunately just with the first big image.

Code from com_hikashop->helper->image.php (line: 141)

if($this->override && function_exists('hikashop_small_image_link_render')){
					$html = hikashop_small_image_link_render($this,$path,$addpopup,$optionslink,$html,$alt);
				}else{
					$html = '<a title="'.$alt.'" class="hikashop_image_small_link" href="'.$this->uploadFolder_url.$path.'" onclick="return hikashopChangeImage(\''.$addpopup.'\',\''.$this->uploadFolder_url_thumb.'\',\''.$this->thumbnail_x.'\',\''.$this->thumbnail_y.'\',this);" onmouseover="return hikashopChangeImage(\''.$addpopup.'\',\''.$this->uploadFolder_url_thumb.'\',\''.$this->thumbnail_x.'\',\''.$this->thumbnail_y.'\',this);" '.$optionslink.'>'.$html.'</a>';
				}
			}else{
				JHTML::_('behavior.modal');
				if($this->override && function_exists('hikashop_image_link_render')){
					$html = hikashop_image_link_render($this,$path,$addpopup,$optionslink,$html,$alt);
				}else{
					$html = '<a title="'.$alt.'" target="_blank" href="'.$this->uploadFolder_url.$path.'" '.$optionslink.''.$html.'</a>';
				}


Code from show_block_img.php (line: 56)
<div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_main_image_subdiv">		
						<p>{cloudzoom}</p>
						<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link" <p>{/cloudzoom}</p>', $width,  $height);
						if(!empty($this->element->badges)) $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0');
						?> 
						</div>

I´m not fit enough in coding to see the perfect solution. The question in my head is if it is possible to give a path so the main image and the thumbimages (after onmousehover) paths are equal so Cloud Zoom will use the currant big picture. Actually Cloud Zoom use the first picture all the same if thumbs become the big image or not.

Or is after-mouse-over the path the same and Cloud Zoom has to be refreshed in any way? For that I have to ask the developer but I want to wait if I oversee something in the image.php or show_block_img.



(By the way: is it possible to donate for the project?

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

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

I think that you can pass out the image display function, you can try somethink like:

						<div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_main_image_subdiv">
						<?php
						$mainPath = "media/com_hikashop/upload/";
						?>
						<p>{cloudzoom}</p>
						<img id="main_pict" src="<?php echo $mainPath.$image->file_path;?>" alt="<?php echo $image->file_name;?>" class="hikashop_child_image"/>
						<p>{/cloudzoom}</p>
						<?php
						if(!empty($this->element->badges)) $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0');
						?>
						</div>
					</div>
				</div>
			<?php
			}
			?>
			</div>
			<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
			<?php
			if (!empty ($this->element->images) && count($this->element->images) > 1) {
				foreach ($this->element->images as $image) {
					$path = "media/com_hikashop/upload/thumbnail_".$width."x".$height."/".$image->file_path;
					?>
						<img src="<?php echo $path;?>" onMouseOver="document.getElementById('main_pict').src='<?php echo $mainPath.$image->file_path; ?>'" alt="<?php echo $image->file_name;?>" class="hikashop_child_image" style="width: <?php echo $width;?>px; height: <?php echo $height;?>px;"/>
					<?php
				}
			}

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

Time to create page: 0.070 seconds
Powered by Kunena Forum