Any ideas?

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...
});

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

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.

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