LeeFoster 216 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 Share this post Link to post Share on other sites
Jack_mcs 1,021 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. Support Links: Need Help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC version (the community-supported responsive version) here. How to Upgrade to the latest version Recommended SEO Addons Share this post Link to post Share on other sites
LeeFoster 216 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. Share this post Link to post Share on other sites
♥14steve14 628 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. REMEMBER BACKUP, BACKUP AND BACKUP Get the latest Responsive osCommerce CE (community edition) here It's very easy to over complicate what are simple things in life Share this post Link to post Share on other sites
LeeFoster 216 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. Share this post Link to post Share on other sites
hungryfrank 62 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 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 Share this post Link to post Share on other sites
Omar_one 149 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 1 domiosc reacted to this Get the latest Responsive osCommerce CE (community edition) here . Share this post Link to post Share on other sites
LeeFoster 216 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. Share this post Link to post Share on other sites
hungryfrank 62 Posted June 4, 2020 call the query function in your on select function.i guess 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 Share this post Link to post Share on other sites
hungryfrank 62 Posted June 4, 2020 I would look at the source code, for me it makes it easier 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 Share this post Link to post Share on other sites
♥ecartz 694 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. Always back up before making changes. Share this post Link to post Share on other sites
burt 5,435 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. Help shape the future of Phoenix; join the Phoenix Club Share this post Link to post Share on other sites
LeeFoster 216 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/ 1 PiLLaO reacted to this Share this post Link to post Share on other sites
hungryfrank 62 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 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 Share this post Link to post Share on other sites
kgtee 67 Posted June 5, 2020 I think the slick gallery can be adapted to do just that. Share this post Link to post Share on other sites
kgtee 67 Posted June 5, 2020 https://apps.oscommerce.com/6V87X&bs-slick-image-gallery Share this post Link to post Share on other sites
LeeFoster 216 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. Share this post Link to post Share on other sites
hungryfrank 62 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. 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 Share this post Link to post Share on other sites
hungryfrank 62 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? 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 Share this post Link to post Share on other sites
LeeFoster 216 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 Share this post Link to post Share on other sites
hungryfrank 62 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> 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 Share this post Link to post Share on other sites
hungryfrank 62 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 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 Share this post Link to post Share on other sites
hungryfrank 62 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 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 Share this post Link to post Share on other sites
LeeFoster 216 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? Share this post Link to post Share on other sites
hungryfrank 62 Posted June 6, 2020 all the way at the end of product_info.php for now after closing bracket ?> 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 Share this post Link to post Share on other sites