Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Images change on mouse over


Recommended Posts

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

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.

 

 

 

Link to comment
Share on other sites

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.

 

 

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

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

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

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

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.

image.png.53a5a106ebd333c2ab372781ee4b5c1c.png

 

Link to comment
Share on other sites

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.

image.png.53a5a106ebd333c2ab372781ee4b5c1c.png

Thanks for the tip..

Link to comment
Share on other sites

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.

Screenshot_2019-10-30 HTML Snippets for Twitter Boostrap framework Bootsnipp com.png

with OsC 2.2 since 2006 ...

Link to comment
Share on other sites

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

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

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

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 .

 

image.png.b53326df0399fedb3d68bc010fdb9aa4.png

 

Link to comment
Share on other sites

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 . 

 

image.png.b53326df0399fedb3d68bc010fdb9aa4.png

exactly, that's how it is ;)

Link to comment
Share on other sites

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...