Upload image only when you click a button to display

Question

Upload image only when you click a button to display

Navigation

#1 by (1 votes)

0

Personal I made a gallery of photos a little big so I added an effect of slice in it are 64 images in the case when the site loads only appears 12 and when the user clicks on see more is appearing from 12 to 12 it works normally follows the effect script:

$(".images-spaces").slice(0, 12).show();
        $("#loadMore-photos").on('click', function (e) {
            e.preventDefault();
            $(".images-spaces:hidden").slice(0, 12).slideDown();
            if ($(".images-spaces:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
        });

The problem is that all 64 images load together with the site and to optimize this I wanted to load only the first 12 that are the ones I left showing initially and wanted the following images not to be loaded when accessing the site and yes only when I click on the button to see more photos:

<li class="col-md-2 no-padding all deck images-spaces" data-src="assets/images/gallery/deck-05.jpg">
                           <a href="assets/images/gallery/deck-05.jpg">
                               <img class="img-responsive" src="assets/images/gallery/deck-05.jpg" alt="Deck" />
                               <div class="gallery-ecoresort-poster">
                                    <p>Deck</p>
                                </div>
                           </a>
                       </li>

    <a href="#" id="loadMore-photos">Ver mais fotos</a>

ai in case I would be loading from 12 to 12 I would like to know if it is possible to do this with this current gallery that I have.

javascript html jquery

asked by anonymous 10.01.2018 / 16:02

1 answer

How do I leave a required field? Asp .Net Dropdownlist Empty After Form Submit

score 1 · Answer 1

You can add src of image or multiple as an attribute of an element and clicking it creates the <img> element through javascript, follows an example:

function CarregaImagens(divDestino, data){
  var imagens = data.attr('imagens').split(",");
  var html = "";
  for(i=0;i<imagens.length;i++){
    html = html + "<img src='" + imagens[0] + "' width='5%'/>";
  }

  divDestino.html(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><buttontype="button" name="Btn" id="Btn" imagens="https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1, https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1"
 onclick="CarregaImagens($('#imagens1'), $(this))">
    Exibe 12 Primeiras
  </button>
  <button type="button" name="Btn" id="Btn" imagens="https://i.stack.imgur.com/1dy2j.jpg?s=328&g=1, https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1,
https://i.stack.imgur.com/r9NdO.jpg?s=128&g=1" onclick="CarregaImagens($('#imagens2'), $(this))">
    Exibe Próximas 12
  </button>
</div>
<div id="imagens1">

</div>

<div id="imagens2">

</div>