Announcement

Collapse
No announcement yet.

Can't call on Dropdown Image with JQuery?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Can't call on Dropdown Image with JQuery?

    Hi! I'm using a jquery image dropdown script (http://www.marghoobsuleman.com/jquery-image-dropdown), but I can't call on the dropdown image. Basically the jquery adds the attribute data-image to the existing dropdown code.

    It overrides the 3DCart code block though. Any fixes for this?

    Code:
    <!--START: dropdownimage-format-->
            <div class="dropdownimage-format">
              <select name="[oname]" onchange="validateValues(document.add,1);">
                <!--START: option-->
                <option value="[value]" data-image="img_[oname]" [selected]>[feature]</option>
                <!--END: option-->
              </select>
              <div class="dropdown-image"><img name="img_[oname]" width="50" /></div>
            </div>
            <!--END: dropdownimage-format-->
    Live example:
    Create-Your-Own Rainbow Flag
    Last edited by chelseyfireflyaz; 04-01-2014, 02:26 PM. Reason: More info

  • #2
    [oname] doesnt appear to be a valid variable for the options, so the data-image attribute is becoming "/assets/images/img_.jpg" which does not exist.

    Here is the variable documentation on the listing templates: 3dcart Design Docs

    and this is what your html looks like before any javascript is running:
    HTML Code:
            <div class="dropdownimage-format">
              <select name="/assets/images/di_Choose Text-127" onchange="validateValues(document.add,1);">
                <!--START: option-->
                <option value="Arial Black:::500"  data-image="/assets/images/img_.jpg">Arial Black</option>
                
                <option value="Georgia:::499"  data-image="/assets/images/img_.jpg">Georgia</option>
                
                <option value="Impact:::498"  data-image="/assets/images/img_.jpg">Impact</option>
                <!--END: option-->
              </select>
            </div>
    Michael

    JES Restaurant Equipment

    Comment

    Working...
    X