Does not load images first time user visit the page

[rajjanorkar]

Hi Team,

I have implemented this plugin in my website and i am having issue.

When i visit the page first time images are not loaded, but then go second time images are loaded properly. It works if i hit refresh as well.

I am using NPM & below is the code ( i am using laravel, bootstrap4, lightbox2)

<div class="col-md-12 mt-5">
                <div id="basicExample">
                    @foreach ($user->images as $image) // all images loaded in loop
                        <a href="{{ URL::asset(__IMAGE_ORIGINAL_DIR . $image->image) }}" data-lightbox="user-images" data-title="#{{$loop->iteration . ' ' . $user->name }}">
                            <img src="{{ URL::asset(__IMAGE_ORIGINAL_DIR . $image->image) }}" alt="{{ $user->name }}"/>
                        </a>
                    @endforeach
                </div>
            </div>

<script type="text/javascript">
        $(document).ready(function () {
            $("#basicExample").justifiedGallery({
                rowHeight: 450,
                maxRowHeight: 750,
                margins: 7,
                lastRow: "center",
                waitThumbnailsLoad: false,
                captions: false
            });
        });
    </script>

Anybody know whats going on. Thank you

[brucelin0325]

Same as me. I implemented this plugin to laravel project. I'm not sure but when I refresh the page, sometimes it is working and sometimes not. Laravel: 5.8 jQuery: 3.4.1 (minified)

<div id="gallery-container">
      <a href="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG">
        <img alt="Title 1" src="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG"/>
      </a>
      <a href="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG">
        <img alt="Title 2" src="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG"/>
      </a>
      <a href="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG">
        <img alt="Title 3" src="img/maps/Abu_Dhabi_United_Arab_Emirates_2009/IMG_7436.JPG"/>
      </a>
    </div>

$("#gallery-container").justifiedGallery();

[v-grant]

I'm using laravel 5.8 too. It does seem to me, laravel's app.js conflicts with this library.

[HelloAlberuni]

I'm also experiencing the same issue with WordPress.