Guide on displaying gallery images when clicking on a specific class

Question

Guide on displaying gallery images when clicking on a specific class

I am in the process of developing a gallery tab for a website, initially displaying three thumbnails. The goal is to reveal the remaining thumbnails when a class named show-all is clicked. I have successfully animated the gallery's height to show the hidden content. However, I am encountering an issue where even after hiding the excess thumbnails using overflow:hidden, parts of the second row are still visible. I want them completely hidden. Below is my code block:

HTML

<div class="gallery">
     <h3>Photos</h3>
 <a class="see-all" href="javascript:void(0)">See All</a>
    <div class="clear"></div>
    <div class="row">
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        (remaining thumbnail divs here)
    </div>
</div>

Jquery

$('.see-all').click(function(){
    $(this).parents('.gallery').animate({height: $(".gallery").get(0).scrollHeight}, 1000);
});

Any assistance would be greatly appreciated.

DEMO

NOTE: I am unable to change the height of the gallery due to variations in image sizes.

javascript jquery html css

Answer 1

Answer №1

Instead of depending on manipulating the gallery height, you can opt to display only the first 3 images and hide the rest... This way, you won't have to worry about maintaining image heights.

Clicking on see all will then reveal the remaining images.

Check out the JS BIN example: http://jsbin.com/qoliqukoye/1/edit?html,js,output

        $(document).ready(function(){
            var x = 0;
            $('.row').children().each(function () {
                if (x >= 3) {
                    $(this).hide();
                }
                x++;
            });
            $(".see-all").click(function(){
                $('.row').children().fadeIn('slow');
            });
        });

Answer 2

Instead of depending on manipulating the gallery height, you can opt to display only the first 3 images and hide the rest... This way, you won't have to worry about maintaining image heights.

Clicking on see all will then reveal the remaining images.

Check out the JS BIN example: http://jsbin.com/qoliqukoye/1/edit?html,js,output

        $(document).ready(function(){
            var x = 0;
            $('.row').children().each(function () {
                if (x >= 3) {
                    $(this).hide();
                }
                x++;
            });
            $(".see-all").click(function(){
                $('.row').children().fadeIn('slow');
            });
        });

Answer 3

Answer №2

To achieve this effect, simply assign a class to the first three visible elements and hide all other thumbnails except those. Update the JavaScript code as shown below:

$('.see-all').click(function(){
  $(this).parents('.gallery').animate({height:'810px'});
  $('.thumbnail').show();
});

For a demonstration, refer to the following example: http://jsfiddle.net/wvzyzLo1/1/

Answer 4

To achieve this effect, simply assign a class to the first three visible elements and hide all other thumbnails except those. Update the JavaScript code as shown below:

$('.see-all').click(function(){
  $(this).parents('.gallery').animate({height:'810px'});
  $('.thumbnail').show();
});

For a demonstration, refer to the following example: http://jsfiddle.net/wvzyzLo1/1/

Guide on displaying gallery images when clicking on a specific class

Answer №1

Answer №2

Similar questions

Problem with AWS Lambda function handler failing to insert data into Athena

Unable to link JSON response to input field using jQuery AJAX (MVC 4)

Sorting through a list post a retrieval action

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

What is the most effective method for developing HTML with PHP or Jquery?

A guide to building a versatile dropdown component with Material UI or MUI in a React application

What is the best way to extract user input and pass it to an AJAX request URL?

The process of sharing information between JavaScript classes

Transform nested JSON objects into a JSON array using JavaScript

MUI Input component does not support the use of the oninput attribute

404 error occurs when attempting to load SVG files in Webpack 2

What are the steps to installing and utilizing the Chart.js package on your local machine?

Encountering an error with an unknown variable while attempting to access a value from a JSON object

Why is Vue Router Navigation Guard throwing an error about exceeding the maximum call stack size?

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Adjust the x-axis on the Vue.js bar chart

Transition one background image into another using background positioning

What are the potential drawbacks of utilizing <div> spacers in web design?

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS