Where to add this javascript

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #214765

-- url of the page with the problem -- : georld.com
-- HikaShop version -- : 2.5.0

Hello,

I would like to create the effect on mouseover enlarge the image of the products without you having to actually click them.
This is the javascript I wanna add. www.w3schools.com/jsref/event_onmouseover.asp

My question is,where do I need to add this file ?

Here is what I would like my products to do: mouseover the quail photos www.newsnow.co.uk/classifieds/pets-animals/quail.html

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

  • Posts: 84305
  • Thank you received: 13700
  • MODERATOR
9 years 11 months ago #214766

Hi,

You'll want to edit the file "listing_img_title" of the view "product" via the menu Display>Views.
There you can add your custom javascript to the image display.

The following user(s) said Thank You: Geor

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

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #214824

I've added those lines in the file but nothing happened. Since I am a beginner with Javascript,I do not quite understand where should I add the lines.

In the tutorial,the file that the javascript is placed,is a HTML file if Im correct:
<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}

function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>

</body>
</html>


But where you told me to add the Javascript,it was a Php file and it did not have a <body> tag. In the instructions it says to add this javascript in between the body tag.

Help please.

Here is what I have in the listing img title file:

<?php
/**
* @package HikaShop for Joomla!
* @version 2.3.2
* @author hikashop.com
* @copyright (C) 2010-2014 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');
?><?php $link = $this->getLink($this->row);?>
<?php if($this->config->get('thumbnail',1)){ ?>
<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_category_image">
<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->category_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.'"/>';
}
?>
</a>
</div>
<?php } ?>
<br/>
<span class="hikashop_category_name">
<a href="<?php echo $link;?>">
<?php

echo $this->row->category_name;
if($this->params->get('number_of_products',0)){
echo ' ('.$this->row->number_of_products.')';
}
?>
</a>
</span>

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

  • Posts: 84305
  • Thank you received: 13700
  • MODERATOR
9 years 11 months ago #214826

Hi,

The whole PHP file is inside the body tag. So don't worry about that.

You want to add the code

<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}

function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
at the beginning or the end.
And you want to change the line:
echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';
to:
echo '<img class="hikashop_product_listing_image" onmouseover="bigImg(this)" onmouseout="normalImg(this)" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';
That's just the start as you'll probably want to adapt the javascript code in the bigImg and normalImg functions.

The following user(s) said Thank You: Geor

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

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #214946

Yep found it.

Thank you very much :D

Last edit: 9 years 11 months ago by Geor.

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

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #214955

Hey Nicolas.

What I notice is that when the images get enlarged their quality is lost and you end up with a not so nice picture.

Is there any tweak so that we can go around that ?

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

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

Hi,

The tweak will be to set the "normal" image size to "64px" this way the thumbnails will be generated in 64px, then use this code in the view instead of the previously given one:

echo '<img style="width: 32px; height: 32px;" class="hikashop_product_listing_image" onmouseover="bigImg(this)" onmouseout="normalImg(this)" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';

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

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #215166

The problem is that the thumbnail is set to 153 and 200 pixels. If I go any larger the thumbnail looks too big for the box its contained.

Here is the whole code.

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.3.2
 * @author	hikashop.com
 * @copyright	(C) 2010-2014 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><?php
$link = hikashop_contentLink('product&task=show&cid='.$this->row->product_id.'&name='.$this->row->alias.$this->itemid.$this->category_pathway,$this->row);

if(!empty($this->row->extraData->top)) { echo implode("\r\n",$this->row->extraData->top); }

if($this->config->get('thumbnail',1)){ ?>
<!-- PRODUCT IMG -->
<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">
	<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" onmouseover="bigImg(this)" onmouseout="normalImg(this)" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';
			}
			$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>
</div>
<!-- EO PRODUCT IMG -->

<!-- PRODUCT PRICE -->
<?php
}
if($this->params->get('show_price','-1')=='-1'){
	$config =& hikashop_config();
	$this->params->set('show_price',$config->get('show_price'));
}
if($this->params->get('show_price')){
	$this->setLayout('listing_price');
	echo $this->loadTemplate();
}

?>
<!-- EO PRODUCT PRICE -->

<!-- PRODUCT NAME -->
<span class="hikashop_product_name">
	<?php if($this->params->get('link_to_product_page',1)){ ?>
		<a href="<?php echo $link;?>">
	<?php }
		echo $this->row->product_name;
	if($this->params->get('link_to_product_page',1)){ ?>
		</a>
	<?php } ?>
</span>
<!-- EO PRODUCT NAME -->

<!-- PRODUCT CODE -->
	<span class='hikashop_product_code_list'>
		<?php if ($this->config->get('show_code')) { ?>
			<?php if($this->params->get('link_to_product_page',1)){ ?>
				<a href="<?php echo $link;?>">
			<?php }
			echo $this->row->product_code;
			if($this->params->get('link_to_product_page',1)){ ?>
				</a>
			<?php } ?>
		<?php } ?>
	</span>
<!-- EO PRODUCT CODE -->

<?php if(!empty($this->row->extraData->afterProductName)) { echo implode("\r\n",$this->row->extraData->afterProductName); } ?>

<!-- PRODUCT VOTE -->
<?php
if($this->params->get('show_vote_product')){
	$this->setLayout('listing_vote');
	echo $this->loadTemplate();
}
?>
<!-- EO PRODUCT VOTE -->

<!-- ADD TO CART BUTTON AREA -->
<?php
if($this->params->get('add_to_cart') || $this->params->get('add_to_wishlist')){
	$this->setLayout('add_to_cart_listing');
	echo $this->loadTemplate();
}?>
<!-- EO ADD TO CART BUTTON AREA -->

<!-- COMPARISON AREA -->
<?php
if(JRequest::getVar('hikashop_front_end_main',0) && JRequest::getVar('task')=='listing' && $this->params->get('show_compare')) { ?>
	<br/><?php
	if( $this->params->get('show_compare') == 1 ) {
		$js = 'setToCompareList('.$this->row->product_id.',\''.$this->escape($this->row->product_name).'\',this); return false;';
		echo $this->cart->displayButton(JText::_('ADD_TO_COMPARE_LIST'),'compare',$this->params,$link,$js,'',0,1,'hikashop_compare_button');
?>

<?php } else { ?>
	<input type="checkbox" class="hikashop_compare_checkbox" id="hikashop_listing_chk_<?php echo $this->row->product_id;?>" onchange="setToCompareList(<?php echo $this->row->product_id;?>,'<?php echo $this->escape($this->row->product_name); ?>',this);"><label for="hikashop_listing_chk_<?php echo $this->row->product_id;?>"><?php echo JText::_('ADD_TO_COMPARE_LIST'); ?></label>
<?php }
} ?>
<!-- EO COMPARISON AREA -->
<?php if(!empty($this->row->extraData->bottom)) { echo implode("\r\n",$this->row->extraData->bottom); } ?>
<script>
function bigImg(x) {
x.style.height = "253px";
x.style.width = "300px";
}

function normalImg(x) {
x.style.height = "153px";
x.style.width = "200px";
}
</script>

Last edit: 9 years 11 months ago by nicolas.

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

  • Posts: 84305
  • Thank you received: 13700
  • MODERATOR
9 years 11 months ago #215168

I would recommend to follow the recommendations of Xavier in his previous message and force the width/height of the img tag to the small size you want. Then, increase the size setting of the thumbnails to the big size you want when you hover on them.
That should do what you want without loosing quality.

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

  • Posts: 78
  • Thank you received: 1
9 years 11 months ago #215270

I did exactly as recommended. It ended up with enlarged thumbnails which when you mouse over them get small,and then when you mouseover again they get big.
I put it back where it was .

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

Time to create page: 0.080 seconds
Powered by Kunena Forum