Вопросы Теги

Jquery и img галерея с атрибутами данных не работает

Это работает как прелесть:)

thanks jQuery. 

function initMultiComplete() {
   jQuery('.maps-complete').each(function(){

    var id = jQuery(this).prop('id');
    var $this = jQuery(this);
    var parent = jQuery(this).parent('div');

    var jautocomplete = new google.maps.places.Autocomplete(document.getElementById(id), {types: ['geocode']});

    jautocomplete.addListener('place_changed', function ()    {

        var place = jautocomplete.getPlace();
        var address = $this.val();
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

        jQuery( '.maps-autocomplete-lat', parent ).val(lat);
        jQuery( '.maps-autocomplete-lng', parent ).val(lng);

    });

});
}

скрипт вызывает initMultiComplete как обратный вызов и загружается w / async defer: 

https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMultiComplete
0
задан TheDonkey2017 15 January 2019 в 21:38
поделиться

2 ответа

Ваша ссылка на значение атрибута data-img-url неверна. Проверьте метод .data() jquery и попробуйте настроить обработчик кликов следующим образом: 

$('a .thumb').click(function (e) {            
  $('#lgImg').attr('src', $(this).parent().data('img-url'));
});
0
ответ дан Brice 15 January 2019 в 21:38
поделиться

Примечание. Возможно, вы захотите стилизовать ваше изображение, или вы можете увидеть, что изображение внутри модального окна может быть увеличено, как у вас сейчас (при условии, что у вас нет CSS, которого вы не включили)

[115 ] 
$('a .thumb').click(function (e) {   
  //You need to reference the clicked thumbnail, then its parent since the a element has the data-img-url you're looking for.
  //An alternative would be to look for the closest a element up the DOM tree using closest.
  //$('#lgImg').attr('src', $(this).closest("a").attr("data-img-url"));  
  $('#lgImg').attr('src', $(this).parent().attr("data-img-url"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="lgImg" class="" src="#"/>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
<a href='#myModal' data-toggle='modal' data-img-url='https://placeimg.com/640/480/any/grayscale.jpg' class='thumb'><img class='img-thumbnail thumb' src='https://placeimg.com/640/480/any/grayscale.jpg' width='20%' height='20%'></a>

0
ответ дан Nathan Champion 15 January 2019 в 21:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: