adding CDN links for javascript in laravel blade

Question

i tested some javascript code without any variables and loops and it worked fine. it only used `

<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
<script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>

which i got from cdn and the html only had this

html for pop image

<div class="gallery">
    <a href="img/bigboy.jpg" data-lightbox='lo'> <img src="img/bigboy.jpg" alt=""> </a>
    <a href="img/smallboy.jpg" data-lightbox='lo' > <img src="img/smallboy.jpg" alt=""> </a>
    <a href="img/crazyboy.jpg" data-lightbox='lo'> <img src="img/crazyboy.jpg" alt=""> </a>
    <a href="img/crazyboy.jpg" data-lightbox='lo'> <img src="img/crazyboy.jpg" alt=""> </a>
    <a href="img/smallboy.jpg" data-lightbox='lo'> <img src="img/smallboy.jpg" alt=""> </a>
    <a href="img/bigboy.jpg" data-lightbox='lo'> <img src="img/bigboy.jpg" alt=""> </a>
    <a href="img/bigboy.jpg" data-lightbox='lo'> <img src="img/bigboy.jpg" alt=""> </a>
    
    
    
</div>

what i need is to apply it on this code

html in laravel

     @foreach($posts as $post)
      ...................
        <div class="gallery">           
     <a href="/storage/{{$post->image}}"  data-lightbox='lo'> <img src="/storage/{{$post->image}}"  data-lightbox='lo'id = "img-posts" alt=""> </a>
<div>
   .....................
     @endforeach

cam · Accepted Answer · 2020-07-22 04:17:00Z

2

You will want to place the CDN links at the bottom of your body element. This ensures that they wont hold up the rendering of other elements on your page.

  ...
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
  <script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>
</body>

Additionally, you'll want to move the <div class="gallery"> OUTSIDE of the loop otherwise you'll wrap each image up in the gallery wrapper.

Here's how you should do it:

Note I also changed the image id attribute to a class as ids need to be unique.

<div class="gallery">   
  @foreach($posts as $post)
    <a href="/storage/{{$post->image}}" data-lightbox='lo'>
      <img src="/storage/{{$post->image}}" class="img-posts" alt="">
    </a>
  @endforeach
</div>

edited Jul 22, 2020 at 4:17

answered Jul 21, 2020 at 1:50

cam

3,7301 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

logicalrap Over a year ago

it still cant bring the desired output... could it be because of the foreach loop somehow

cam Over a year ago

What output are you getting?

user8034901 Over a year ago

@logicalrap Not sure why there's a data-lightbox='lo' attribute on the <img> element, your "html for pop image" example doesn't have this.

cam Over a year ago

@kerbh0lz good find, I copied it out of the "html in laravel" example

Collectives™ on Stack Overflow

adding CDN links for javascript in laravel blade

html for pop image

html in laravel

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html for pop image

html in laravel

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related