LeeFoster Posted June 4, 2020 Share Posted June 4, 2020 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 Quote Link to comment Share on other sites More sharing options...
Jack_mcs Posted June 4, 2020 Share Posted June 4, 2020 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. Quote Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. All of My Addons Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
LeeFoster Posted June 4, 2020 Author Share Posted June 4, 2020 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. Quote Link to comment Share on other sites More sharing options...
♥14steve14 Posted June 4, 2020 Share Posted June 4, 2020 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. Quote REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
LeeFoster Posted June 4, 2020 Author Share Posted June 4, 2020 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. Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 4, 2020 Share Posted June 4, 2020 (edited) 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, 2020 by hungryfrank Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
Omar_one Posted June 4, 2020 Share Posted June 4, 2020 (edited) @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, 2020 by Omar_one domiosc 1 Quote Get the latest Responsive osCommerce CE (community edition) here . Link to comment Share on other sites More sharing options...
LeeFoster Posted June 4, 2020 Author Share Posted June 4, 2020 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. Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 4, 2020 Share Posted June 4, 2020 call the query function in your on select function.i guess Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
hungryfrank Posted June 4, 2020 Share Posted June 4, 2020 I would look at the source code, for me it makes it easier Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
♥ecartz Posted June 4, 2020 Share Posted June 4, 2020 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. Quote Always back up before making changes. Link to comment Share on other sites More sharing options...
burt Posted June 4, 2020 Share Posted June 4, 2020 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. Quote Link to comment Share on other sites More sharing options...
LeeFoster Posted June 4, 2020 Author Share Posted June 4, 2020 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/ PiLLaO 1 Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 4, 2020 Share Posted June 4, 2020 (edited) 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, 2020 by hungryfrank Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
kgtee Posted June 5, 2020 Share Posted June 5, 2020 I think the slick gallery can be adapted to do just that. Quote Link to comment Share on other sites More sharing options...
kgtee Posted June 5, 2020 Share Posted June 5, 2020 https://apps.oscommerce.com/6V87X&bs-slick-image-gallery Quote Link to comment Share on other sites More sharing options...
LeeFoster Posted June 5, 2020 Author Share Posted June 5, 2020 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. Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 5, 2020 Share Posted June 5, 2020 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. Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
hungryfrank Posted June 6, 2020 Share Posted June 6, 2020 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? Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
LeeFoster Posted June 6, 2020 Author Share Posted June 6, 2020 (edited) 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, 2020 by LeeFoster Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 6, 2020 Share Posted June 6, 2020 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> Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
hungryfrank Posted June 6, 2020 Share Posted June 6, 2020 (edited) 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, 2020 by hungryfrank Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
hungryfrank Posted June 6, 2020 Share Posted June 6, 2020 (edited) <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, 2020 by hungryfrank Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
LeeFoster Posted June 6, 2020 Author Share Posted June 6, 2020 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? Quote Link to comment Share on other sites More sharing options...
hungryfrank Posted June 6, 2020 Share Posted June 6, 2020 all the way at the end of product_info.php for now after closing bracket ?> Quote you can cut up to 4 pages of your checkout by using my three add_ons login create account in one page Express checkout login pop up modal Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.