Georld.com Posted September 20, 2015 Share Posted September 20, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 20, 2015 Share Posted September 20, 2015 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. 1 Link to comment Share on other sites More sharing options...
Georld.com Posted September 20, 2015 Author Share Posted September 20, 2015 (edited) 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 September 20, 2015 by Georld.com Link to comment Share on other sites More sharing options...
Georld.com Posted September 20, 2015 Author Share Posted September 20, 2015 (edited) Is this what I need to add ?http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseoverI think thats the property I am looking for!Could you please specify to me where should I add those lines? Edited September 20, 2015 by Georld.com Link to comment Share on other sites More sharing options...
Ingolme Posted September 20, 2015 Share Posted September 20, 2015 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 More sharing options...
Georld.com Posted September 21, 2015 Author Share Posted September 21, 2015 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. * @license GNU/GPLv3 http://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>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 More sharing options...
Ingolme Posted September 21, 2015 Share Posted September 21, 2015 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. Link to comment Share on other sites More sharing options...
Georld.com Posted September 22, 2015 Author Share Posted September 22, 2015 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 More sharing options...
dsonesuk Posted September 22, 2015 Share Posted September 22, 2015 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. 1 Link to comment Share on other sites More sharing options...
Georld.com Posted September 22, 2015 Author Share Posted September 22, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 22, 2015 Share Posted September 22, 2015 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 More sharing options...
Georld.com Posted September 22, 2015 Author Share Posted September 22, 2015 (edited) 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 September 22, 2015 by Georld.com Link to comment Share on other sites More sharing options...
Georld.com Posted September 22, 2015 Author Share Posted September 22, 2015 (edited) . Edited September 22, 2015 by Georld.com Link to comment Share on other sites More sharing options...
dsonesuk Posted September 22, 2015 Share Posted September 22, 2015 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 More sharing options...
Georld.com Posted September 22, 2015 Author Share Posted September 22, 2015 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 More sharing options...
dsonesuk Posted September 22, 2015 Share Posted September 22, 2015 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 More sharing options...
justsomeguy Posted September 23, 2015 Share Posted September 23, 2015 You can also just start with the large image where it initially displays at half size. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2015 Share Posted September 23, 2015 Posr #14 Link to comment Share on other sites More sharing options...
Georld.com Posted September 23, 2015 Author Share Posted September 23, 2015 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 24, 2015 Share Posted September 24, 2015 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%. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 24, 2015 Share Posted September 24, 2015 (edited) 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 September 24, 2015 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Georld.com Posted September 24, 2015 Author Share Posted September 24, 2015 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 More sharing options...
dsonesuk Posted September 24, 2015 Share Posted September 24, 2015 As covered in post#14 and post#9, but instead of using fixed width use percentage AND AGAIN! use a good quality image for larger image, which is used shrunk down to use for the smaller thumbnail image. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now