Support the ongoing development of Laravel.io →
6 years ago
Views
Last updated 2 months ago.
0

There's actually a similar issue with how the google maps API map initialization works.

For some odd reason, if the element that gets initialized starts out as a hidden element, the map wouldn't render until you resized the page.

To go about fixing this, we simply "re-initialized" the map on display of the element.

So, to adapt this to your situation, let's see if this works:

$('.category_items').click(function() {
    $('.items_links').hide();
    var target_category = $(this).attr('data-category');
    $('.items_links[data-item=' + target_category + ']').show();

    $('.flexslider').flexslider({
       animation: "slide",
       controlNav: "thumbnails"
    });

    return false;
});

Let me know if this method works for you.

I notice that you are using bootstrap to show this modal. If I remember correctly, they have closures for that model initializations for when the modal is opened and closed. Perhaps you can extract your slider logic from here to inside the closure that signifies it was open?

-- EDIT --

I can confirm you can access a hook for when it is opened like so:

$('#myModal').on('show.bs.modal', function (e) {
  // do something...
});
Last updated 6 years ago.
0

I tried this

function initFlexModal() {
    $('.flexslider').flexslider({
	    animation: "slide",
	    controlNav: "thumbnails"
	  });
};

$(document).ready(function () {

	$('#myModal').on('shown.bs.modal', function() {
		console.log('shown.bs.modal');
	      initFlexModal();

	});

});

and it worked for the html version that I used, but when I tried to make it dynamic it didn't work check out this link http://www.webkrunch.co.za/clients/bellamage-cakes/gallery/3

If I click on the 2nd or 3rd image nothing is displayed and when I clicked on the first one it shows up the way it should and if I close and open either the 2nd or 3rd image only the nav images are displayed.

Here is my code for the dynamic version

@extends('templates::public')
@section('content')
    {{ $category->title }}

    <ul class="grid">
        @foreach($galleries as $gallery)
            <?php
                $galImage = getImagesArray($gallery->image);
                $galImage2 = getImagesArray($gallery->image2);
            ?>

            <?php
                $slug = getSlug($gallery->title);
            ?>

            <li>
                @if(!empty($galImage))
                    @foreach($galImage as $galImg)
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".{{ $slug }}">
                            {{ HTML::image('gallery_images/'.$galImg) }}
                        </button>
                    @endforeach
                @endif
            </li>

            <!-- BEGIN MODAL -->
            <div class="modal fade {{ $slug }} test-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <div class="flexslider">
                                <ul class="slides">
                                    @if(!empty($galImage2))
                                        @foreach($galImage2 as $testImg)
                                            <?php
                                                $imgTest = 'gallery_images/'.$testImg;
                                                $baseUrl = URL::to('/');
                                            ?>
                                            <li data-thumb="{{ $baseUrl }}/{{ $imgTest }}">
                                                {{ HTML::image('gallery_images/'.$testImg)}}
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END MODAL -->
        @endforeach
    </ul>
@stop
Last updated 6 years ago.
0

Try using 'show.bs.modal' instead of 'shown.bs.modal'

When you use show.bs.modal, this hooks into the click event of showing a modal.

The shown.bs.modal event only fires once, which is after the first modal is loaded.

Last updated 6 years ago.
0

I've tried that and I now have the problem I has originally where only the nav image is shown and if I go to one tab and go back then the main image is shown, also if I hard refresh the page and I go to one of the other images first and not the first image I get a blank modal and then if I click on the first image the nav image is shown and then if I click on the other images then the nav images is shown also

0

Sign in to participate in this thread!

Full Stack Europe

Your banner here too?

shiva shiva shiva Joined 24 Jul 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

The Laravel portal for problem solving, knowledge sharing and community building.

© 2022 Laravel.io - All rights reserved.