Jump to content

How to create a small poppup effect


Georld.com

Recommended Posts

Hello.I recently found a nice feature on a commercial website,that once you hover over an item,the image enlarges slightly,without you having to actually click on the product,which is time saving and nice in my opinion.On my website,hovering over products has no result,unless you click on it.You can see the effect im talking about here : http://www.newsnow.co.uk/classifieds/pets-animals/quail.htmlIf you hover over any Animal picture you can see what I mean. How can I apply this on my website?Ps. Girlfriend wants a quail :P

Link to comment
Share on other sites

They've done that with Javascript using mouseover and mouseout events. If you don't know Javascript yet you can read through the W3Schools Javascript tutorial.

 

CSS can also make an expanding animation using the :hover pseudo-class and the transition property. Information about those are in the W3Schools CSS reference.

  • Like 1
Link to comment
Share on other sites

They've done that with Javascript using mouseover and mouseout events. If you don't know Javascript yet you can read through the W3Schools Javascript tutorial.

 

CSS can also make an expanding animation using the :hover pseudo-class and the transition property. Information about those are in the W3Schools CSS reference.

Thank you for your answer.I did take a brief course in Javascript,and I admit I had no idea what it was. Now I do have some idea,but I think its a month's course to learn all the stuff you need to know about it.Anyway,I did took a look at the Javascript events tab,in the tutorial you sent me. Where do I need to add the code? Also I want it to apply in just the products,not in articles. I must admit I am more used to css,so do you think it will be easier by css? Will it have the same result?

Edited by Georld.com
Link to comment
Share on other sites

It's complicated. If you don't have a good understanding of Javascript you're not going to be able to do it.

 

Javascript is put anywhere on your page between <script> tags. The code runs as the page is loading, so if you put it before the HTML element you want to modify then the element won't be accessible, so scripts are generally put at the bottom of the page.

 

What you need to do is access the element using DOM methods such as getElementById() or getElementsByTagName() and assign the event handler.

 

Here are examples of accessing elements in the DOM:

var element = document.getElementById("elementID");var listOfElements = document.getElementsByTagName("img");for(var i = 0; i < listOfElements.length; i++) {  element = listOfElements[i];  // Do something with element here}

There are multiple ways to assign event handlers such as:

element.addEventListener("mouseover", doSomething, false);element.onmouseover = doSomething;<img onmouseover="doSomething(this);">
Link to comment
Share on other sites

 

It's complicated. If you don't have a good understanding of Javascript you're not going to be able to do it.

 

Javascript is put anywhere on your page between <script> tags. The code runs as the page is loading, so if you put it before the HTML element you want to modify then the element won't be accessible, so scripts are generally put at the bottom of the page.

 

What you need to do is access the element using DOM methods such as getElementById() or getElementsByTagName() and assign the event handler.

 

Here are examples of accessing elements in the DOM:

var element = document.getElementById("elementID");var listOfElements = document.getElementsByTagName("img");for(var i = 0; i < listOfElements.length; i++) {  element = listOfElements[i];  // Do something with element here}

There are multiple ways to assign event handlers such as:

element.addEventListener("mouseover", doSomething, false);element.onmouseover = doSomething;<img onmouseover="doSomething(this);">

I believe I've found what I need to edit.I've found a php file,although in the tutorial I am supposed to edit a HTML file right? Here is what I found:

<?php
/**
* @package HikaShop for Joomla!
* @version 2.3.2
* @author hikashop.com
* @copyright © 2010-2014 HIKARI SOFTWARE. All rights reserved.
*/
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>What exactly do you mean by " access the element using DOM methods" ? Could you guide me step by step please?
Link to comment
Share on other sites

It's in the Javascript tutorial in the HTML DOM section: http://www.w3schools.com/js/js_htmldom.asp

That explains how to access elements on the page so that you can change them with Javascript.

Ok I've found how to change it without having to go through a few days of Javascript learning.All I had to do was change those lines:

 

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

 

and add this code in the end of the php file:

 

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

 

Worked like a glove!

Link to comment
Share on other sites

Which could easily done by

.hikashop_product_listing_image {width: 32px; height: 32px; }.hikashop_product_listing_image:hover {width: 64px; height: 64px;}
Requires no JS, and does not rely on JS being enabled.

 

 

As an amateur my self,I just followed instructions by Ingolme. I couldn't figure out by myself how I could do that. He said JS so I just tried that way.Anyway just for me to know,what type of code is the one you posted?Also I have a small issue with the hovering. The poppup image is low resolution. Is there a way to go around this? Since the only point of the whole hover element is to give a better look on the item without you having to click on it. What I get is low quality potato enlarged photo :crazy:

Link to comment
Share on other sites

I said that the example page you showed me was done in Javascript. I also suggested CSS.

 

You can't improve the quality of a small image, you need to find the source where the small image came from.

Link to comment
Share on other sites

I said that the example page you showed me was done in Javascript. I also suggested CSS.

 

You can't improve the quality of a small image, you need to find the source where the small image came from.

Yes indeed my bad. I don't know why I sticked to JS. Anyway I know know a few things more (JS) than before so I guess it is good.Another question.Have you ever seen on ebay or on amazon product listings that once you hover over the image you get a zoom of that picture?

Edited by Georld.com
Link to comment
Share on other sites

Its basic css using :hover pseudo, since the big image is relatively small and same image used for small, use good quality resolution for large image.If you were using a image of large dimensions and filesize you would need to use js, as you would need to change from a thumbnail image filename to the larger image filename.

Link to comment
Share on other sites

Its basic css using :hover pseudo, since the big image is relatively small and same image used for small, use good quality resolution for large image.If you were using a image of large dimensions and filesize you would need to use js, as you would need to change from a thumbnail image filename to the larger image filename.

I am using JS now and it worked for me so I will leave it as it is. How can I do it ,so that when you hover you won't get a bad quality image? Also on my previous post I ask for mouseover zoom (like ebay or amazon),how can I do that? Is it possible?

Link to comment
Share on other sites

How can I do it ,so that when you hover you won't get a bad quality image?

From original image create thumnail, and good quality larger image to your requirements myimage01_thumb.jpg, myimage01.jpg
<script>function bigImg(x) {x.src=x.src.replace('_thumb','');x.style.height = "64px";x.style.width = "64px";}function normalImg(x) {x.src=x.src.replace('.','_thumb.');x.style.height = "32px";x.style.width = "32px";}</script>
As long as thumbnail image has '_thumb' before '.xxx' where 'xxx' is image extension, and filename without '_thumb' matches exactly between both images, they should now swap from thumbnail image and good quality larger image and back on mouseout and mouseover.The zoom is more complicated where you have to identify position of box to match larger zoomed area on larger image.
Link to comment
Share on other sites

From original image create thumnail, and good quality larger image to your requirements myimage01_thumb.jpg, myimage01.jpg

<script>function bigImg(x) {x.src=x.src.replace('_thumb','');x.style.height = "64px";x.style.width = "64px";}function normalImg(x) {x.src=x.src.replace('.','_thumb.');x.style.height = "32px";x.style.width = "32px";}</script>
As long as thumbnail image has '_thumb' before '.xxx' where 'xxx' is image extension, and filename without '_thumb' matches exactly between both images, they should now swap from thumbnail image and good quality larger image and back on mouseout and mouseover.The zoom is more complicated where you have to identify position of box to match larger zoomed area on larger image.

 

 

 

You can also just start with the large image where it initially displays at half size.

Thank you for your answers. Since my thumbnail is not so small, it actually is 200/253 pixels and the large image is 300/353.I have added the following code:

<script>
function bigImg(x) {
x.src=x.src.replace('_thumb','');
x.style.height = "300px";
x.style.width = "353px";
}
function normalImg(x) {
x.src=x.src.replace('.','_thumb.');
x.style.height = "153px";
x.style.width = "200px";
}
</script>The result was still that the zoomed image was the thumbnail enlarged which leads to poor quality. You can see it here: http://www.georld.com/store/category/minerals-for-saleRegarding Justsomeguy's answer. I don't quite understand what I need to do. Please guys speak to me as if you would speak to your young brother that has no idea what he is doing :happy0046:
Link to comment
Share on other sites

You have original large image 300 x 300 (example dsc04808.jpg that is supposed to be 300 x 300 )

 

dsc04808.jpg WILL be the large image (300 x 300 or whatever you require)

 

create a copy of image and resize to 200 x 200 (or whatever you require) and append '_thumb' to filename example dsc04808_thumb.jpg

 

you now have two images

 

dsc04808.jpg (300 x 300 or whatever you require)

dsc04808_thumb.jpg (200 x 200 or whatever you require)

 

They must be in the exact same folder, the thumbnail must be the default image you see first

 

<img src="/media/com_hikashop/upload/thumbnails/200x200/dsc04808_thumb.jpg" alt="dsc04808_thumb" title="" onmouseout="normalImg(this)" onmouseover="bigImg(this)" class="hikashop_product_listing_image" style="height: 153px; width: 200px;">

 

when you mouseover it strips '_thumb' from the src filename so it retrieves large image dsc04808.jpg (without '_thumb') while mouseout replaces '_thumb' back to dsc04808_thumb.jpg

 

ALSO you CANNOT use multiple functions of same name for different sizes, either unique function name for each size OR send a identifier to the size you require for a single function option.

 

EDIT:

Found large image http://www.georld.com/media/com_hikashop/upload/thumbnails/400x400/dsc04808.jpg (rather big for thumbnail?)

 

It won't change to this because its at a different location, to change to this you would need to swap '/200x200/' path of thumbnail to '/400x400/' and back again, also you may need to preload larger images if they are not done so already by joomla or it may stutter loading image on first mouseover.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Use CSS to specify the initial width and height of the image as 50%. On hover, set them to 100%. The initial "thumbnail" will be the larger image just shrunk down to 50%.

This sounds like a good idea. Could you point me to some links ,or could you show me what css exactly I need to add ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...