J
J
John Gault2015-06-20 19:00:21
css
John Gault, 2015-06-20 19:00:21

A drop down gallery of pictures?

Good afternoon. There is a small gallery with n-th number of images, some of which are hidden. 3b676c19da264a8ba4e6f49e06c93f60.png
How to implement the element of revealing the rest of the pictures on button click? For this to happen, obviously, without reloading the page. (Like, for example, on this site seo-ok.com , section - "Our clients")

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maksim Zverev, 2015-06-20
@Fargal_1

A bad option, but simpler, a static height block with overflow: hidden and the height changes on button click.
Good option: AJAX and loading additional elements. In the example you provided, it is implemented like this:

$('#ow-carousel > div > .button a').on('click',function () {
    $.ajax({
      url: "ajax/more"+scount+".html",
      cache: false,
      beforeSend: function() {
        $(this).hide().before('<img src="image/load.gif" alt="load" />');
      },
      success: function(html){
        $('#ow-carousel > div > .button').before(html);
        $('#ow-carousel > div > .button > img').remove();
        $('#ow-carousel div.portion:hidden').fadeIn();
        scount -= 1;
        if(scount) {
          $(this).show();
        } else {
          $('#ow-carousel > div > .button').remove();
        }
      }
    });
  });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question