Attribute Images

[LeeFoster 200]

Morning All,

I am looking for an add-on that allows the image to change based on the attribute selected. Needs to work with Phoenix or at least be recently new so it can be modified. 

Does anyone know of anything?

Thanks

[Jack_mcs 946]

There is this one that may be what you want but it is probably not compatible with Phoenix. But the person that uploaded it is @14steve14and he's active here so maybe he has a newer version.

[LeeFoster 200]

50 minutes ago, Jack_mcs said:

There is this one that may be what you want but it is probably not compatible with Phoenix. But the person that uploaded it is @14steve14and he's active here so maybe he has a newer version.

Not quite what I want but might make a good starting point.

[♥14steve14 567]

1 hour ago, Jack_mcs said:

There is this one that may be what you want but it is probably not compatible with Phoenix. But the person that uploaded it is @14steve14and he's active here so maybe he has a newer version.

Be honest this is something that I am looking into but my coding skills are not high, so we will have to see where it leads.

[LeeFoster 200]

37 minutes ago, 14steve14 said:

Be honest this is something that I am looking into but my coding skills are not high, so we will have to see where it leads.

My idea is rather than have an image with a radio button next to it you change the main image based on the selected option.

eg. I have a display stand that has 2 versions (A & B). Version A shows by default, when the customer selects their option it changes the image to whichever they choose so if it's A the image stays the same if it's B the image changes. 

Both images will be viewable regardless of which option is choosen in the current gallery style.

My guess would be that it could be done with just a new gallery that uses the image name and option name to change the main image.

[hungryfrank 62]

I don't know if it is a good idea or not but maybe u can write a on click function to replace  main product image with the option image.

Edited June 4 by hungryfrank

[Omar_one 137]

@LeeFoster check this oscommerce-Options-as-images it look it has update to Frozen version  but its not uploaded to Apps Marketplace..

and on readme file typed there 
"This is a working version for osC CE Frozen version, and will only work on the community bootstrap versions of oscommerce.."

I installed on phoenix 1.0.7.2 small editing to options_images.php  (admin) I get it working there 
the shop side need to create pi module 
 

Edited June 4 by Omar_one

[LeeFoster 200]

12 minutes ago, hungryfrank said:

I don't know if it is a good idea or not but maybe u can write a on click function to replace  main product image with the option image.

I was just doing some research and found an already written jQuery function that will change the image but the select has a to have an onchange function. If I can work out how to move the onchange to the jQuery (I know nothing about jQuery) I think we can do this with a hook and image naming conventions.

[hungryfrank 62]

call the query function in your on select function.i guess

 

[hungryfrank 62]

I would look at the source code, for me it makes it easier 

[♥ecartz 467]

jQuery has a selector, which looks like

$('SELECT#css_id')

The part inside the quotes can be pretty much anything that could appear in a CSS definition.  But remember that you probably only want it to apply to one menu, so try for something unique, like ID (rather than class or HTML element).  Remember that it is possible to say something like #css_id SELECT to get the select menu inside the #css_id element.  Then you attach an onchange handler like

$('SELECT#css_id').change(function () {/* JS here */});

That would be close to the equivalent of the onchange in

<SELECT id="css_id" onchange="/* JS here */">

assuming that you have

<SELECT id="css_id">

somewhere in the HTML. 

Relevant reference:  https://stackoverflow.com/q/11179406

If you post the HTML for the select menu and the recommended jQuery, someone could probably give more help. 

[burt 4,931]

That's from 10 years ago and seems similar to what you need. 

I imagine (well I *know*) that 10 years ago was the time of 500 lines of core code change to do something that can now be done in none.

Even so, I think you'll struggle with a no core change, as the product_attribute page will need to be changed to allow you to assign image to attribute.

Option = Color
Attributes = blue/pink/red (each of these needs an image)

That is your first task before you start thinking about actual swapping of images.  

 

[LeeFoster 200]

I found this that I managed to get to semi work, outside of osCommerce. It uses the select value as part of the image name. I just need someone to tell me if and how it can be made to work, as a hook without core changes would be preferred.

http://jsfiddle.net/jxhykv0L/1/

[hungryfrank 62]

if i wanted to do this at a minimum I would install one of these contribution's admin side so i would be able to enter the image for the options.  then I would use an Ajax to pull this image when it is selected and display it where the main image is in pi-gallery,

 

 

Edited June 4 by hungryfrank

[kgtee 54]

I think the slick gallery can be adapted to do just that.

[kgtee 54]

https://apps.oscommerce.com/6V87X&bs-slick-image-gallery

[LeeFoster 200]

I don't see why this needs to be a case of installing something else. Using the product id from the URL and the option value from the dropdown as the image name along with a modified version of the jQuery I posted above should be a good starting point.

eg. My product id is 11 and the option values are 1 - 3 so my images would be 11_1.jpg, 11_2.jpg & 11_3.jpg

Smart naming of the images will mean that it doesn't need to be assigned against an option in admin.

 

[hungryfrank 62]

if you store the name of images in the db then you don't have to name the images like that which in the long run it its easier to do. 

[hungryfrank 62]

On 6/5/2020 at 2:32 PM, LeeFoster said:

I don't see why this needs to be a case of installing something else. Using the product id from the URL and the option value from the dropdown as the image name along with a modified version of the jQuery I posted above should be a good starting point.

eg. My product id is 11 and the option values are 1 - 3 so my images would be 11_1.jpg, 11_2.jpg & 11_3.jpg

Smart naming of the images will mean that it doesn't need to be assigned against an option in admin.

 

did u get this to work?

<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $(".pi-gallery").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

try this at the end of product_info.php see how it works.

see if you can pass the images somehow?

 

 

[LeeFoster 200]

16 minutes ago, hungryfrank said:

did u get this to work?

<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $(".pi-gallery").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

try this at the end of product_info.php see how it works.

see if you can pass the images somehow?

 

 

Didn't manage to get it to work yet but spent yesterday in bed ill. I did think about it this morning and thought maybe something similar to @burts price change on the fly could work.

This is what I got to though.

<script>
var imageList = Array();
var id = <?php echo $_GET['products_id'] ?>;
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "images/"+ id + "_" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.getElementById("input_1").options[document.getElementById("input_1").selectedIndex].value;
    document.getElementsById("img").src = imageList[selectedImage].src;
}

document.getElementById("input_1").onchange = switchImage;
</script>

 

Edited June 6 by LeeFoster

[hungryfrank 62]

this one a little better

<script>
$(function() {
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src='images/sample/lime-1.jpg'>");
     
    });
});
</script>

 

[hungryfrank 62]

try this. the main image changes. you just have to pass the image source for the correct image

instead of 

images/sample/lime-1.jpg

Edited June 6 by hungryfrank

[hungryfrank 62]

<script>
$(function() {
    var img_option='images/sample/lime-1.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
     
    });
});
</script>

you have to adjust the   var img_option inside of change function based inn the selected value

other than that it works

Edited June 6 by hungryfrank

[LeeFoster 200]

3 minutes ago, hungryfrank said:

<script>
$(function() {
    var img_option='images/sample/lime-1.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
     
    });
});
</script>

you have to adjust the   var img_option inside of change function based inn the selected value

other than that it works

Where are you placing it as I can't get it to work?

[hungryfrank 62]

all the way at the end of product_info.php for now after closing bracket ?>