Click on a thumbnail to open the gallery

I am currently working on implementing a feature that will allow a gallery to open when a thumbnail is clicked. At the moment, the code I have looks like this:

<div class="row">

        <div class="col-lg-12">
            <h1 class="page-header">Thumbnail Gallery</h1>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="images/idee-bianco.png" alt="">
            </a>
        </div>
  ........

    </div>

My goal is to have a gallery or carousel open up when a user clicks on a thumbnail. Each thumbnail represents a different aspect of the portfolio, such as photography, video, illustration, etc.

The CSS and JS being used are mostly default from Bootstrap. Thank you.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a shot 

<div class="col-lg-12 gallery">
    <h1 class="page-header">Thumbnail Gallery</h1>
</div>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
        <img class="img-responsive" src="images/idee-bianco.png" alt="" onclick="Show()">
    </a>
</div>

<style>
.gallery{
    display: none;   // gallery is hidden by default
 }
</style>
<script>
function Show(){
     document.getElementsByClass('gallery').style.display = 'block';
</script>

When a user clicks on an image, the show function is triggered, changing the display property of all elements with the class 'gallery'. Consider using an id if you only want one gallery with this functionality on your page.

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

CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image: https://i.sstatic.net/EBymf.png My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/col ...

htmlcss

What measures can I take to ensure that users cannot tamper with the PayPal code?

I've integrated a "Pay Now" button from Paypal onto my website. However, there is an issue where users can easily alter the payment amount before proceeding. Below is the code PayPal has provided: <form action="https://www.paypal.com/cgi-bin/webs ...

htmlforms

I want to use Angular and TypeScript to play a base64 encoded MP3 file

I am attempting to play a base64 encoded mp3 file in an Angular application. I have a byteArray that I convert to base64, and it seems like the byte array is not corrupted because when I convert it and paste the base64 string on StackBlitz https://stackbli ...

htmlangulartypescripthtml5-audio

Exploring the possibilities of combining AngularJS with a Bootstrap modal for a

Hello, I am currently attempting to update a modal select box using Angular and Bootstrap modals. Unfortunately, when I click the button, I am having trouble getting it to update the related select box value in the Bootstrap modal. I've tried differ ...

javascriptangularjstwitter-bootstrapselectangular-ngmodel

Position a div in the center both horizontally and vertically within a section, ensuring that each section expands to fill the entire page when scrolling

I'm currently working on coding a page layout where each section takes up the entire screen. My goal is to have the content within each section centered both vertically and horizontally. I'm unsure if this is achievable, so any guidance or advice ...

htmlcssweb

IE9 does not trigger the jquery ajaxStop event

Our team is currently working on hiding a loader icon once multiple async ajax calls have been completed. To achieve this, we are attempting to utilize the ajaxStop event. However, we have encountered an issue where this event does not seem to be firing in ...

jqueryajaxinternet-explorer-9

Why is there an excessive amount of white space on my Reactjs page?

This webpage (page URL -) displays well without any white space between two images when viewed on a laptop. However, when accessed on a mobile device, it appears to be taking up too much space as shown in the image below. Image of webpage on laptop- lapto ...

cssreactjsmaterial-ui

Preventing long int types from being stored as strings in IndexedDB

The behavior of IndexedDB is causing some unexpected results. When attempting to store a long integer number, it is being stored as a string. This can cause issues with indexing and sorting the data. For instance: const data: { id: string, dateCreated ...

javascripttypescriptindexeddb

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

Issue with React Material UI: Box is not scrollable vertically

I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...

cssreactjsmaterial-ui

Using `require(variable)` is not functional in next-js environment

I'm attempting to display an image using the next-optimised-images module. When I try to include images like this: <img src={require(c.logo)} alt={c.title} /> I encounter the following error: https://i.stack.imgur.com/Jtqh9.png However, when ...

javascriptnode.jswebpacknext.js

Taking a segmented snapshot of a canvas using a flexible design scheme

I am working with a canvas that contains multiple div elements representing different sections of the canvas. However, when I capture these sections, they do not appear exactly as displayed on the screen. How can I track and accurately capture the div area ...

htmltypescriptvue.jscanvashtml5-video

It is not possible for $_GET to loop through an array

I have a list of values called dataId obtained from checkbox selections, and I want to send it via a GET AJAX request: dataId = 1, 2, 16, 15, 17, 3, 14, 5, 9, 11; URI = "<?php echo site_url('Terpasang/Update_Kebutuhan_ke_Terpasang')?>"; $. ...

phpjqueryajaxcodeigniter

How to dynamically adjust the size of an HTML page using jQuery without displaying

Currently, I am working on resizing an HTML page vertically using jQuery. While I have successfully managed to resize the page, I encounter a problem where depending on the image used, I sometimes see vertical or horizontal bars even though the image fits ...

jqueryhtmlwindow-resize

What is the best way to delete a class that begins with a certain string?

Is it possible to remove a class that begins with "num" using jquery? I attempted to utilize ^= but found it ineffective. Thank you in advance. <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div c ...

jquery

Utilizing tables for inquiries in email communication

Currently tackling a basic mailer with html. It seems like tables are recommended and inline styling is the safer route. However, I'm encountering an issue where there's a mysterious space when setting up my td and I can't seem to pinpoint ...

htmlcss

Choose particular content enclosed by two strings (across multiple lines)

Looking to use regex to extract specific text between two strings. For example: foo I have four toys bar //single line foo //multiline I have four toys bar foo I have three pets bar foo I have three pets bar How can I extract the text between & ...

javascriptregexregex-lookaroundsregex-greedy

How can I show the total sum of input values in a React.js input box?

Is there a way to dynamically display the sum of values entered in front of my label that updates automatically? For example, you can refer to the image linked below for the desired output Output Image I have initialized the state but I'm struggling ...

javascriptreactjs

Is there a way to change this from webkit to moz?

Is there a way to change this code from webkit to moz? background-color: #fff; background-image: -moz-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px), -moz-linear-gradient(#EEE .05em, transparent .05em); ...

csswebkit

Why is the Get request for fetching data not returning multiple parameters, but only returning a single one in Vuex?

I am trying to fetch and visualize a list of data with a GET request while passing two parameters. However, I am encountering an error 400 when passing both parameters, but it works fine when passing just one. Link to code This is the non-working code: a ...

javascriptvue.jsvuexfetch-api