Kurre 6 Posted October 29 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 ? Share this post Link to post Share on other sites
Kurre 6 Posted October 29 (edited) 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. Edited October 29 by Kurre Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 29 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 Share this post Link to post Share on other sites
LeeFoster 108 Posted October 29 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. Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 29 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 Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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. Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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 ? Share this post Link to post Share on other sites
kgtee 30 Posted October 30 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> Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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.. Share this post Link to post Share on other sites
YePix 14 Posted October 30 Maybe that helps you a little bit further https://www.w3schools.com/css/css_tooltip.asp Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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.. Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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. Share this post Link to post Share on other sites
bonbec 95 Posted October 30 Take a look on the html and css code from this page : https://bootsnipp.com/snippets/O5yMd 1 Kurre reacted to this Get the latest Responsive osCommerce CE (community edition) here . (Live : OsC 2.2, php 5.4 & UTF-8 | Local : Phoenix for future shop) Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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.. Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 30 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. Share this post Link to post Share on other sites
Kurre 6 Posted October 30 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.. Share this post Link to post Share on other sites
bonbec 95 Posted October 30 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. Get the latest Responsive osCommerce CE (community edition) here . (Live : OsC 2.2, php 5.4 & UTF-8 | Local : Phoenix for future shop) Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 30 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. Share this post Link to post Share on other sites
Kurre 6 Posted October 30 (edited) 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. Edited October 30 by Kurre Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 30 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. Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 30 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. Share this post Link to post Share on other sites
♥JcMagpie 1,419 Posted October 30 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 . Share this post Link to post Share on other sites
bonbec 95 Posted October 30 (edited) Css tooltips don't work the same in a desktop device (mouse over is ok) and a mobile device (tap to open and close). Edited October 30 by bonbec Typo tooltops ==> tooltips Get the latest Responsive osCommerce CE (community edition) here . (Live : OsC 2.2, php 5.4 & UTF-8 | Local : Phoenix for future shop) Share this post Link to post Share on other sites
YePix 14 Posted October 30 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 Share this post Link to post Share on other sites
YePix 14 Posted October 30 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 Share this post Link to post Share on other sites