Jump to content

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 ?

Share this post


Link to post
Share on other sites

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 by Kurre

Share this post


Link to post
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.

 

 

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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

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

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

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


 

Share this post


Link to post
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..

Share this post


Link to post
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


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

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
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 by Kurre

Share this post


Link to post
Share on other sites

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


 

Share this post


Link to post
Share on other sites

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 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
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 ;)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×