CODEWITHSUNDEEP
javascriptjquerylayer
Obmerk Kronen
Obmerk Kronen

Reputation: 15949

Jquery adding and removing multiple Image layers on div

I have a problem of finding the right function , or logic to resolve this problem for adding layers to a div (transperant png).

This is a part of a "configurator" for potential products.

semi-working demo (shirt example) can be find here :

http://jsfiddle.net/obmerk99/9t4f4/16/

If I will use append() - like you can see it commented out in the code - it will append endlessly - how can i remove the previous option (from the same option group only)

1 - What is the right function to use here ?

2 - How can I make the "groups" division without resort into multiple dedicated divs (i will have 50-60 options..) - or in another scenario, how to create those automatically ?

3 - How to make it work for radio / checkboxes ??

EDIT I

Lame´s word explanation :

I have "groups" of options, all referring to the same product. Each group "option" corresponds to a transparent png with the option´s image or respective part.

Foe example, if i configure a car, I will have a group of "wheels" options with images of different wheels, a Group of "windows" options with different windows , a Group of "color" options etc. etc... In the end , they stack up and make the complete image - configured. It is a bit like those sites making avatars, or cartoonish images where one can choose head, muctache, background, glassess, hair etc.

Upvotes: 3

Views: 3335

Answers (3)

Musa
Musa

Reputation: 97682

Maybe you can have a main image showing what never changes, on top of that have an image for each option, the images could be in the markup or added when the option is first selected.

Here is a mod to the fiddle, I think its what you're trying to achieve fiddle I added an overlay image and span for each option.

EDIT: Automating the switch would be trivial, just give the display and information elements ids ending in the element that affects it
E.g. 

<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">

see fiddle

I think you should use radio buttons(if you don't want to use the select) instead of the check boxes because they can be grouped easily.

see fiddle

Upvotes: 2

rt2800
rt2800

Reputation: 3045

Try following code for JS code commented by you

$('#prod').empty().append('<img id="prod-image" style="z-index:1;" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/>').append('<span id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');

Upvotes: 0

Pastor Bones
Pastor Bones

Reputation: 7361

I've had to do this before while generating an avatar image with data pulled from an MMO game site. I used PHP and the GD library to generate an image on the fly with all of the necessary pieces (including different variations of color) and then cached the generated image so that subsequent calls for that same configuration would not have to be regenerated. Eventually every possible configuration of the avatar was cached and the image generating script became obsolete.

Maybe you could use this same technique or simply generate every possible image up front allowing Jquery to pick and choose based on selected options? The only other option I can think of would be to use Flash or HTML 5's canvas element.

Upvotes: 0

Related Questions