Create image gallery Modal with ajax in Laravel

Question

I'm Trying to Create image galley that when image Clicked modal opens,But When I loaded My page for a moment The contents of the medal are shown,I do not want it How I Can fixed it? My Code in view.blade.php is:

<script>
   $(".li-img").click(function () {
    $.ajax({
        method: 'GET',
        url: './comment?media_id=' + this.id,
        success: function (data) {
            /*$("#comments").html(data);**/
            $("#getCodeModal").modal("toggle");
            $("#getCode").html(data);

        }
    });
   });
 </script>
  <body>
    @foreach($array as $img)
     <div class=" portfolio-container text-center">
    <ul class="portfolio-list" style="margin:0 auto">
         <li id = "{{$img['id']}}" class="li li-img" style="margin:0 
             auto">
            <img id="{{$img['id']}}" src="{{$img['image']}}">
         </li>
    </ul>
   </div>
   @endforeach
   <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" 
    aria-
    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <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"> API CODE </h4>
        </div>
        <div class="modal-body" id="getCode" style="overflow-x: scroll;">
        //ajax success content here.
       </div>
    </div>
</div>

Also I Want send json information from Controller in modal My Controller Have this Code:

   public function comment(Request $request)
  {
    $media_id = $request->get('media_id');
    if ($request->session()->has("access_token")) {
    $access_token = $request->session()->get("access_token");
    $client = new Client();
    $res = $client->request('GET', 'https://api.instagram.com/v1/media/' 
        . $media_id . '/comments?access_token=' . $access_token);
    /*echo /*$res->getBody();*/
    } else {
       echo "there is no access token in session";
    }
 }

I Want Send $res->getbody() to modal in view.blade.php

Answer 1

Because you did not add bootstrap as dependency.

Add it to the head tag:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

And i found that you lost a close tag </div> which div has a class modal

Create image gallery Modal with ajax in Laravel

Question

1 answers

solution1
0 2017-08-04 09:35:09

Create image gallery Modal with ajax in Laravel

Question

1 answers

solution1 0 2017-08-04 09:35:09

solution1
0 2017-08-04 09:35:09