Social media platform displaying visual content organized by likes and showcasing the number of images

Hey there, I'm in need of a jQuery image gallery plugin that doesn't load all the images at once when the page loads.

Just to give you an idea: If there are 25 images in the menu, I would like to display only four images with a "+21 more" option. This way, when clicked, a slider pops up allowing users to view the remaining images through sliding.

I have included sample images to illustrate my requirement.

https://i.sstatic.net/6eHnD.png

https://i.sstatic.net/OD2xB.png

In the past, I have used Light Gallery.

I provided the link for a demo. Although it works well, it loads all the images initially, while I prefer a plugin that loads a minimal number of images initially and allows users to view individual images with an image viewer.

Could you please recommend a plugin that fits this criteria?

Thank you in advance.

jquerycsshtmlimage-gallery

Answer №1

Your appearance resembles the demonstration found at this link. Here is some sample code to achieve this look:

<div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">

                    <h3 id="hidden-elements">Hidden elements</h3>
                    <p>Facebook style, only show a few images but have a large gallery</p>
                    <div class="row justify-content-center" data-code="example-9">
                        <a href="https://unsplash.it/1200/768.jpg?image=263" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=263" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=264" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=264" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=265" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">
                            <img src="https://unsplash.it/600.jpg?image=265" class="img-fluid">
                        </a>
                        <!-- elements not showing, use data-remote -->
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
                        <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
                    </div>
                    <p class="footer"><span>Crafted by me, <a href="https://ashleyd.ws">ashleydw</a></span></p>
                </div>
            </div>
        </div>

This setup functions similarly to the layout of Facebook, showcasing a small selection of images while holding a larger collection in the background.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a JavaScript variable to fetch a rails URL: A comprehensive guide

One interesting feature I have is an image link that has a unique appearance: <a href="#user-image-modal" data-toggle="modal" data-id="<%= image.id %>"><img class="user-photo" src="<%= image.picture.medium.url %>" alt="" /></a&g ...

javascriptjqueryruby-on-railsajax

Sending a variable to a template in AngularJS

I am looking for a way to pass a variable or text to a template in order to display the value within my template. While browsing through resources, I found an example on jsFiddle that demonstrates this functionality using ng-repeat. However, I am curious ...

javascriptjqueryhtmlangularjs

What is the best method to exclude the <a> tag when displaying content in HTML?

Is there a way to hide the link within an a tag when printing? .p { display: none; } @media print { .p { display: initial; } .np { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ...

htmlcss

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...

htmlcssruby-on-railsruby

Having trouble with syntax highlighting on Node.js Vash view files in Visual Studio 2015 Update 3?

While working on a Node.js application using Vash as the view engine in Visual Studio 2015 Update 3, I encountered an issue with syntax highlighting. When writing HTML in the vash files, the code appears as plain text without any syntax highlighting. For e ...

htmlnode.jsvisual-studio-2015vash

What could possibly be causing my code to execute multiple times?

Within my code, I have the following function that is triggered when the document is ready: $('#file_upload_form').submit(function(){ // show loader [optional line] //if(document.getElementById('upload_frame') == ...

javascriptjqueryajax

Refresh the browser tab's content

How can I reload the specific content of a browser tab? I am looking for a solution that does not rely solely on jQuery (although I prefer it if there are more options available). Here is what I need: I have a page with many links to other pages (the fo ...

javascriptjqueryhtmlbrowser

Why is the dropdown bootstrap component not functioning in the browser?

The dropdown-item in my code, taken from the Bootstrap site, is not working properly. The toggle displays but the item does not. What could be causing the Bootstrap dropdown component to malfunction in the browser? Are there any issues with my CDNs? ...

cssdrop-down-menufrontenddropdownbootstrap-5

Website design with a central vertical alignment and a subtle shadow effect

Yesterday I inquired about a website design featuring a shadow, but I have since created a better example and would like to pose the question again. My requirements are as follows: A vertically centered website; A shadow on the content block which may h ...

htmlcss

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

Enhance your search experience with AJAX-powered search boxes

I need to implement multiple textboxes on my webpage, each with its own search query to retrieve data from the database. While I have successfully implemented this for one textbox, I am facing difficulties getting it to work for two or more textboxes. He ...

phphtmlajax

issue with a non-functional sticky sidebar within a Tailwind post

I am trying to create a layout similar to this website. One of the key features I want to replicate is the sidebar that follows you as you scroll. Here is the code I have, but unfortunately, I can't seem to get it to work: <template> <di ...

cssvue.jsnuxt.jstailwind-css

The contrast between using the `$("selector").find` method and the `$("selector").contents().find()` method in jQuery

When it comes to navigation, I have developed two methods that involve obtaining the elements' offsets: $("#selector").contents().find('#'+list1).each(function(){ var offset= $(this).offset(); }); $("#selector").find('#&apos ...

jqueryhtml

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes

The function jquery__WEBPACK_IMPORTED_MODULE_4__.hubConnection is not recognized

I am currently trying to integrate singlar (not ASP.Core) with angular 8. If I directly include signalr and jQuery in index.html as follows: <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWS ...

jqueryangularsignalrangular8

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

The JavaScript .load() function fails to run

Attempting to create a straightforward Newsfeed page based on user interests. Here is the code I have implemented for this purpose. The issue I'm facing is that while the code works fine on my local server, it encounters problems when running on an on ...

javascriptphpjqueryajax

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

javascriptphphtmlcsssql