Images change on mouse over

[Kurre 7]

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 ?

[Kurre 7]

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.

[♥JcMagpie 1,690]

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

 

 

[LeeFoster 216]

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.

[♥JcMagpie 1,690]

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

[Kurre 7]

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.

[Kurre 7]

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 ?

[kgtee 67]

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>

[Kurre 7]

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..

[YePix 17]

Maybe that helps you a little bit further

https://www.w3schools.com/css/css_tooltip.asp

[Kurre 7]

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..

 

 

[Kurre 7]

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.

[bonbec 120]

Take a look on the html and css code from this page : https://bootsnipp.com/snippets/O5yMd

 

[Kurre 7]

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..

[♥JcMagpie 1,690]

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.

[Kurre 7]

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..

[bonbec 120]

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.

[♥JcMagpie 1,690]

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.

[Kurre 7]

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.

[♥JcMagpie 1,690]

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.

 

[♥JcMagpie 1,690]

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.

[♥JcMagpie 1,690]

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 .

 

[bonbec 120]

Css tooltips don't work the same in a desktop device (mouse over is ok) and a mobile device (tap to open and close).

[YePix 17]

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

[YePix 17]

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