Bootstrap modal gallery

Hi all,

I'm wanting to open a modal window when a button is clicked that will open up and show the corresponding images.

So if I click puppy image it should show one image, where as the clicking the other one should two images.

This is the piece of (messy) code I have at the minute

@foreach($galleries as $image)
                    <button data-toggle="modal" data-target=".galleryModal_{{ strtolower(str_replace(' ', '_', $image->name)) }}" class="btn btn-sm btn-info">{{ $image->name }}</button>
                    <div class="modal fade galleryModal_{{ strtolower(str_replace(' ', '_', $image->name)) }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                                    <!-- Wrapper for gallery slides -->
                                    <div class="carousel-inner" role="listbox">
                                        <?php $i = 1; ?>

                                        @if($image->privacy == 1)
                                            @foreach($image->images as $im)

                                                <div class="{{ ($i == 1) ? 'item active' : 'item'  }}">
                                                    <img src="{{  $im->path}}{{ $im['images']}}" class="img-responsive">
                                                </div>

                                                <?php $i++; ?>
                                            @endforeach
                                        @else
                                            <p>User has kept their gallery private</p>
                                        @endif
                                    </div>

                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach 

Gallery Images table

Gallery Table

Then I have relationships setup in my models, the first one is working, but the second one shows the modal but nothin inside it.

So I just wondered if any of you awesome people could help shed some light on this with me.

Thanks in advance...