Zurb Orbit Slider data-orbit-link on Ipad - ipad

Question

I am using Zurb Foundation and Orbit slider to display product images on my clients website. He has requested that when you select a package from the dropdown list that it should change the image to the one that is relevant to that package. So he can now link the image to the package ID in the database and actually this all works fine now using my desktop. But when using my Ipad, changing the dropdown box has no effect on the image whatsoever.
Can anyone tell me why? And how I could fix this? As most of our customers actually come from Tablet and Mobile rather than Desktop, this is a real issue at the 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 '<img src="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path"].'" style="margin: auto; max-height: 500px !important">';
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:::
I have just checked this page using Google Chrome and can see the same problem. It actually is only working for me so far on Windows 10 Internet Explorer. Can anyone help me find an alternative to data-options-link as it's obviously not very good on select boxes...

Answer 1

I have fixed the issue using some Jquery.
I changed the 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 then used the following Jquery, and applied the method to the Select OnChange (which worked fine as the select option value was sending the spp_id also).
function changeProductImage(value) {
if($('#headline-'+value).length > 0) {
$('#headline-'+value).click();
}}
I hope this helps anyone else. But I would like to leave this post open if possible, in case anyone can provide an solution to Zurb's built in data-orbit-link function on drop down menus.