Kurre Posted October 29, 2019 Share Posted October 29, 2019 I use 2.3.4.1 CE bootstrap version. Is there any mod that can make the image on New products on index page and product listing to change image on mouse over ? It show the first image first and when you do mouse over it changes to the second images you have inserted to the product ? Link to comment Share on other sites More sharing options...
Kurre Posted October 29, 2019 Author Share Posted October 29, 2019 What I mean is, if there is 2 product images or more it show images number 2 on mouse over, normally it shows images number 1 like it does as standard. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 29, 2019 Share Posted October 29, 2019 CE uses Jack Moore Colorbox - a jQuery lightbox on this you can simply set it to a slide show, see this test site for working example. https://chilleddisplays.co.uk/product_info.php/products_id/28/osCsid/4dd2e4e94324ae8e2c6344961c5a24a1 I did a header tag to give some aditional fuction to color box try it and see if it works on your version. JcM Custom ColorBox header_tags V1.1 Link to comment Share on other sites More sharing options...
LeeFoster Posted October 29, 2019 Share Posted October 29, 2019 41 minutes ago, JcMagpie said: CE uses Jack Moore Colorbox - a jQuery lightbox on this you can simply set it to a slide show, see this test site for working example. https://chilleddisplays.co.uk/product_info.php/products_id/28/osCsid/4dd2e4e94324ae8e2c6344961c5a24a1 I did a header tag to give some aditional fuction to color box try it and see if it works on your version. JcM Custom ColorBox header_tags V1.1 I don't think that's what he's wanting to do. If I understand it right he wants the image on the product listing page to change when you hover over it. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 29, 2019 Share Posted October 29, 2019 21 minutes ago, LeeFoster said: I don't think that's what he's wanting to do. True my mistake sorry, simple image change on hover can be done with css https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 17 hours ago, LeeFoster said: I don't think that's what he's wanting to do. If I understand it right he wants the image on the product listing page to change when you hover over it. That is right. Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 17 hours ago, JcMagpie said: True my mistake sorry, simple image change on hover can be done with css https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html My skill is not that good. I want it to be like when you hover over a images it changes to the images number 2 you have inserted to the product. How can that be done ? Link to comment Share on other sites More sharing options...
kgtee Posted October 30, 2019 Share Posted October 30, 2019 Use this native javascript: <a href="#"> <img src="images/apple-1.jpg" onmouseover="this.src='images/lemon-1.jpg'" onmouseout="this.src='images/apple-1.jpg'" /> </a> Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 1 hour ago, kgtee said: Use this native javascript: <a href="#"> <img src="images/apple-1.jpg" onmouseover="this.src='images/lemon-1.jpg'" onmouseout="this.src='images/apple-1.jpg'" /> </a> I need it to do it automatically for every product.. Link to comment Share on other sites More sharing options...
YePix Posted October 30, 2019 Share Posted October 30, 2019 Maybe that helps you a little bit further https://www.w3schools.com/css/css_tooltip.asp Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 8 minutes ago, YePix said: Maybe that helps you a little bit further https://www.w3schools.com/css/css_tooltip.asp Thanks but no help.. Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 I am not sure I made it so clear what I want to do. I insert 2 images to a product, normally the first image shows up like the thumbnail in the shop everywhere, and then, when someone hovers their mouse over th thumbnail the second images shows there. Link to comment Share on other sites More sharing options...
bonbec Posted October 30, 2019 Share Posted October 30, 2019 Take a look on the html and css code from this page : https://bootsnipp.com/snippets/O5yMd with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 2 minutes ago, bonbec said: Take a look on the html and css code from this page : https://bootsnipp.com/snippets/O5yMd Thanks, that is what i want.. if I only knew how to make it.. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 30, 2019 Share Posted October 30, 2019 You will need to make a new gallery or modifiy existing one. The large images are in a seperate table and stored by products_id and sort-order so you will need to make sure you pick one sortorder as your changed image. I don't think this is posiable without core changes or making a new image gallary but others may know better. If your not able to do this contact a developer in comercial section and see if they can help. Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 12 minutes ago, JcMagpie said: You will need to make a new gallery or modifiy existing one. The large images are in a seperate table and stored by products_id and sort-order so you will need to make sure you pick one sortorder as your changed image. I don't think this is posiable without core changes or making a new image gallary but others may know better. If your not able to do this contact a developer in comercial section and see if they can help. Thanks for the tip.. Link to comment Share on other sites More sharing options...
bonbec Posted October 30, 2019 Share Posted October 30, 2019 I agree with @JcMagpie But if you are able to play with PHP, you just have to look at the html code and the css code used by clicking on the buttons that I indicated with red arrows on the image below. with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 30, 2019 Share Posted October 30, 2019 No sorry got my threads mixed up your only after doing it on index and product listing not product info. Gallary is only used on product info. For the index and product listing your into core code changes in every part that the image is shown. So you will have to change product_listing and any index part you need to show it on. It is however still the same table of images you need to use. Link to comment Share on other sites More sharing options...
Kurre Posted October 30, 2019 Author Share Posted October 30, 2019 3 minutes ago, JcMagpie said: No sorry got my threads mixed up your only after doing it on index and product listing not product info. Gallary is only used on product info. For the index and product listing your into core code changes in every part that the image is shown. So you will have to change product_listing and any index part you need to show it on. It is however still the same table of images you need to use. Yes that is true. If I want to do it in the New product for october menu on the indexpage I guess this is the code that needs to be changed. <a href="<?php echo tep_href_link('product_info.php', 'products_id=' . (int)$new_products['products_id']); ?>"><?php echo tep_image('images/' . $new_products['products_image'], htmlspecialchars($new_products['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'itemprop="image"'); ?></a> That shows the Main image, then if I want to have a mouse over that shows the Large image as the thunmbnail in that place I need to change that code somehow. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 30, 2019 Share Posted October 30, 2019 There is a much simpler way to do what you ask with no code changes at all! You could just use a simple gif file that shows both images. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 30, 2019 Share Posted October 30, 2019 8 minutes ago, Kurre said: That shows the Main image, then if I want to have a mouse over that shows the Large image as the thunmbnail in that place I need to change that code somehow Yes but you will need to pull the second image from the db also and I dont think that class has the code to do that. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 30, 2019 Share Posted October 30, 2019 2 hours ago, YePix said: Maybe that helps you a little bit further https://www.w3schools.com/css/css_tooltip.asp very good @YePix some times the easy answer is hard to see. That could work quite well with only a small change. I'm so use to just using the tool tip for text forgot you can have an image in it. He can just wrap the existing image code in a span with the required id . Link to comment Share on other sites More sharing options...
bonbec Posted October 30, 2019 Share Posted October 30, 2019 Css tooltips don't work the same in a desktop device (mouse over is ok) and a mobile device (tap to open and close). with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
YePix Posted October 30, 2019 Share Posted October 30, 2019 vor 56 Minuten schrieb JcMagpie: very good @YePix some times the easy answer is hard to see. That could work quite well with only a small change. I'm so use to just using the tool tip for text forgot you can have an image in it. He can just wrap the existing image code in a span with the required id . exactly, that's how it is Link to comment Share on other sites More sharing options...
YePix Posted October 30, 2019 Share Posted October 30, 2019 vor 42 Minuten schrieb bonbec: Css tooltips don't work the same in a desktop device (mouse over is ok) and a mobile device (tap to open and close). that's not true. use tooltip on mobile devices and everything works fine Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.