Как передать изображение динамически в модальном - PullRequest
Новая
       23

Как передать изображение динамически в модальном

0 голосов
/ 01 апреля 2020

У меня есть модал, который динамически отображает данные о продукте. Мне удалось заставить это работать через Jquery: 

$(document).on('click', '.show-modal', function() {
    $('#show').modal('show');
    $('#i').text($(this).data('id'));
    $('#ti').text($(this).data('name'));
    $('#by').text($(this).data('description'));
    $('#pr').text($(this).data('price'));
    // $('#im').text($(this).data('image'));

    $('#image').html($(this).data('image') );
    $('.modal-title').text('Show Post');
});

Единственная проблема, я не могу передать изображения, передавая #image id в поле зрения. Это выглядит так: 

  <img class="first_img" src=" " alt=""/>

Если я перейду в src = "", я увижу URL изображения, но изображение не показывается.

Кнопка модальной активации выглядит следующим образом: 

<a href="#" class="show-modal btn btn-info btn-sm"  data-id="{{$product->id}}"
                    data-name="{{$product->name}}" data-description="{{$product->description}}" data-price="{{$product->price}}"

                    data-image="{{ asset('storage/'.$product->images->first()->full) }}"  >
                    <i class="fa fa-eye"></i>
 </a>

Все текстовые данные, такие как $ product-> id, $ product-> name, передаются динамически нормально. Единственная проблема, я не знаю, как передать изображение динамически.

Вот HTML модального: 

<div class="modal fade" title="modal" id="show" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
        <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="modal-body">
            <div class="quickview_body">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-5">
                            <div class="quickview_pro_img">


                                <img class="first_img" src="" id="image" alt=""/>

                                <img class="hover_img" src="{{ asset('storage/'.$product->images->random()->full) }}" alt="">
                                <!-- Product Badge -->
                                <div class="product_badge">
                                    <span class="badge-new">New</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="quickview_pro_des">
                                <h4 class="data"></h4>
                                <b id="ti"/>


                                <div class="top_seller_product_rating mb-15">
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                </div>
                                <h5 class="price">{{config('settings.currency_symbol')}} <b id="pr"/></span></h5>
                                {{--description--}}
                                <p><b id="by"/></p>

                                <a href="{{ route('product.show', $product->name) }}">View Full Product Details</a>
                            </div>
                            <!-- Add to Cart Form -->
                            <form class="cart" method="post">

                                <button type="submit" name="addtocart" value="5" class="cart-submit">Add to
                                    cart</button>
                                <a href="" type="" value="5" class="cart-submit">Product Details</a>

                                <!-- Wishlist -->
                                <div class="modal_pro_wishlist">
                                    <a href="wishlist.html"><i class="icofont-heart"></i></a>
                                </div>
                                <!-- Compare -->
                                <div class="modal_pro_compare">
                                    <a href="compare.html"><i class="icofont-exchange"></i></a>
                                </div>
                            </form>
                            <!-- Share -->
                            <div class="share_wf mt-30">
                                <p>Share with friends</p>
                                <div class="_icon">
                                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Как это сделать?

1 Ответ

1 голос
/ 01 апреля 2020

Я на 99% уверен, что вы не передаете правильную информацию.

Какое значение это: asset('storage/'.$product->images->first()->full)

Скорее всего, это путь к файлу. Если это так, вместо использования 

$('#image').html($(this).data('image') );

используйте 

$('#image').attr("src",$(this).data('image'));

Если asset('storage/'.$product->images->first()->full) возвращает что-то вроде <img src="pathToImage.jpg">, тогда ваш код должен работать.

Кроме того, примечание: если вы используете $(this) более одного раза, сохраните его в переменной, чтобы он стал быстрее вызываться при его вызове. Вы уменьшите накладные расходы на jQuery, преобразовывая this в jQuery объект каждый раз.

Что-то вроде 

$(document).on('click', '.show-modal', function() {
    var t = $(this);
    $('#show').modal('show');
    $('#i').text(t.data('id'));
    $('#ti').text(t.data('name'));
    $('#by').text(t.data('description'));
    $('#pr').text(t.data('price'));

    $('#image').attr("src",$(this).data('image'));
    $('.modal-title').text('Show Post');
});
...