Change Background Colour Dynamically

  • Posts: 10
  • Thank you received: 3
10 years 8 months ago #146869

I am wondering if the user can change the background colour of the image div.

I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car.

EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously).

My images are a transparent png format so you can see the background colour where the transparency is.

If this is possible that would be fantastic.

Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image.

Any help would be great. Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
10 years 8 months ago #146911

Hi,
The best solution will probably be to directly add different images with the good background , because if you want to dynamically change the CSS regarding the selected characteristic, you'll have to do some code customization which will require development skills.

Please Log in or Create an account to join the conversation.

  • Posts: 10
  • Thank you received: 3
10 years 8 months ago #146937

I have some basic skills in PHP and jQuery, slightly more advanced in CSS and HTML but upon investigation I found a nifty little colour picker plug-in, see it in action here on my site.

www.thetrailerbox.com/shop/categories/ca...-stick-figure-family

Please Log in or Create an account to join the conversation.

  • Posts: 2334
  • Thank you received: 403
10 years 8 months ago #146945

Good job!
Thank you for sharing this with us, don't hesitate to post the name of the plugin you used, it might help other people ;)

Please Log in or Create an account to join the conversation.

  • Posts: 10
  • Thank you received: 3
10 years 8 months ago #146963

www.eyecon.ro/colorpicker/

The way I got this to work was with using the following in the <head> part of my index.php

<link href="/css/colorpicker.css" type="text/css" media="screen" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/colorpicker.js"></script>
<script type="text/javascript" src="/js/eye.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/layout.js></script>

and then changing line 48 in the layout.js from
$('#colorSelector div').css('backgroundColor', '#' + hex);

to
$('#hikashop_product_image_main').css('backgroundColor', '#' + hex);

You also have to add in the following code to the product / show.php in hikashop display.

<div id="colorSelector">
<div style="background-color: rgb(255, 0, 43);"></div>
</div>

Ohh and dont forget to create some width and height CSS styling for #colorSelector div otherwise you will be swearing like I was as to why it wasnt working!!

Hope this will help someone in the future, If so wouldn't mind a Thank You :)

Last edit: 10 years 8 months ago by daza110.
The following user(s) said Thank You: Eliot, Xavier, Mohamed Thelji

Please Log in or Create an account to join the conversation.

Time to create page: 0.083 seconds
Powered by Kunena Forum