CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
user6738171
user6738171

Reputation: 1007

view more button is not working

In my posts I am trying to add a gallery of images. I want to have a load more button show up after 4 images. Then you would press the load more button and 4 more appear, and so on. I have created the html, css, and js, but for some reason it is not working. Can anyone help me find a solution? Thanks in advance. Here is the fiddle https://jsfiddle.net/8zfz6hap/

html

<div class="shop-gallery">  
<div class="product"> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product"> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product"> 
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product"> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product"> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product"> 
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'> 
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> 
</div>
<button id="load-more-comments">Load More</button>

js

var $parent = $("#shop-gallery"),
    $items = $parent.find("#product"),
    $loadMoreBtn = $("#load-more-comments"),
    maxItems = 4,
    hiddenClass = "visually-hidden";

		// add visually hidden class to items beyond maxItems
		$.each($items, function(idx,item){
      if(idx > maxItems - 1){
        $(this).addClass(hiddenClass);
      }
    });

		// onclick of show more button show more = maxItems
		// if there are none left to show kill show more button
		$loadMoreBtn.on("click", function(e){
      $("."+hiddenClass).each(function(idx,item){
        if(idx < maxItems - 1){
          $(this).removeClass(hiddenClass);
        }
        // kill button if no more to show
        if($("."+hiddenClass).size() === 0){
          $loadMoreBtn.hide();
        }
      });
    });

css

.product img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: auto;
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);

}
.product {
    width: 21%;
    height: 0;
    padding-top: 30%;
    display: inline-block;
    position: relative;
    margin-bottom: 3.5%;
    cursor: pointer;
}
.visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

Upvotes: 1

Views: 505

Answers (1)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

shop-gallery and product both are classes.

Need to use :

var $parent = $(".shop-gallery"),
    $items = $parent.find(".product")

To select and actions on them. . instead of #

Example Fiddle

Update:

In order to hide load more button use condition - $("." + hiddenClass).length === 0 and to show 4 images, your code is correct just update the condition to idx < maxItems so that it true for idx - 0,1,2,3 which will be four images.

Example Fiddle

Upvotes: 3

Related Questions