drop down menu - Zurb Orbit Slider data-orbit-link on Ipad -
i using zurb foundation , orbit slider display product images on clients website. has requested when select package dropdown list should change image 1 relevant package. can link image package id in database , works fine using desktop. when using ipad, changing dropdown box has no effect on image whatsoever.
can tell me why? , how fix this? of our customers come tablet , mobile rather desktop, real issue @ moment.
many thanks
example: http://www.bitandpiecesvape.co.uk/shop/atomisers-and-tanks/aspire-nautilus/
<!-- [orbit slider] --> <ul data-orbit data-options="navigation_arrows: false; timer: false"> <?php $pricelinkarray = array(); for($i=0;$i<count($imagearray);$i++) { if($imagearray[$i]["spp_id"] > 0) { $pricelinkarray[$imagearray[$i]["spp_id"]] = $i+1; } echo '<li data-orbit-slide="headline-'.($imagearray[$i]["spp_id"]).'">'; echo '<a href="'.url_root.'img/uploads/products/'.$imagearray[$i]["pdi_path"].'" target="_new"><img src="'.url_root.'img/uploads/products/'.$imagearray[$i]["pdi_path"].'" style="margin: auto; max-height: 500px !important"></a>'; echo '</li>'; } ?> </ul> <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 product-img-thumb-slider"> <?php for($i=0;$i<count($imagearray);$i++) { echo '<li> <a data-orbit-link="headline-'.($imagearray[$i]["spp_id"]).'"> <img src="'.url_root.'img/uploads/products/'.$imagearray[$i]["pdi_path_thumb"].'" style="height: 50px; border: 1px solid #eee; margin: auto !important"> </a> </li>'; } ?> </ul> <label><small>product package:</small> <select id="productpriceoption" name="productpriceoption" onchange="updateprice()"> <?php for($i=0;$i<count($pricesarray);$i++) { if($i==0) $currentprice = $pricesarray[$i]['spp_price']; if(isset($pricelinkarray[$pricesarray[$i]["spp_id"]])) { $linkpriceid = $pricesarray[$i]["spp_id"]; } else { $linkpriceid = 1; } echo "<a data-orbit-link='headline-".$pricesarray[$i]['spp_id']."'> <option data-orbit-link='headline-".$pricesarray[$i]['spp_id']."' value='".$pricesarray[$i]['spp_id']."'> ".$pricesarray[$i]['spp_name']." </option> </a>"; } ?> </select> </label> edit::: have checked page using google chrome , can see same problem. working me far on windows 10 internet explorer. can me find alternative data-options-link it's not on select boxes...
i have fixed issue using jquery. changed following:
<a data-orbit-link="headline-'.($imagearray[$i]["spp_id"]).'"> to:
<a data-orbit-link="headline-'.($imagearray[$i]["spp_id"]).'" id="headline-'.($imagearray[$i]["spp_id"]).'"> and used following jquery, , applied method select onchange (which worked fine select option value sending spp_id also).
function changeproductimage(value) { if($('#headline-'+value).length > 0) { $('#headline-'+value).click(); }} i hope helps else. leave post open if possible, in case can provide solution zurb's built in data-orbit-link function on drop down menus.
Comments
Post a Comment