Using jQuery to trigger a click event on an image and display a hidden div

Currently, I am working on creating an image slice show to showcase various product images.

The idea is to have smaller thumbnails that when clicked, will display a larger image in a different section. The default view will be the big image of img1.

In addition, hovering over the large image will change the cursor to a magnifying glass (zoomin.cur), and clicking on the image will reveal another div (class="detailview-container-bg) on top of everything. Within this hidden div, small thumbnail images will be displayed at the top with a large image shown below, with img1 initially being the main display.

While I have successfully implemented the functionality to display a larger image upon the first click on a thumbnail, I am facing challenges with changing the cursor and showing the hidden div upon the second click. Despite writing jQuery for the second click event, it does not contain any errors - leaving me puzzled as to why the div is not appearing as intended. 

        $(function(){
            $('#primaryImageDisplay').on("click",function(){
                $('#productSlide').css({'display':'absolute'});
            });
        })

I have shared my code via JSFiddle and would greatly appreciate any insights or ideas you may have. Thank you for your time.

jqueryhtmlcssonclick

Answer №1

Make sure to choose the correct value for display, such as block. For more information, check out this link:

If you inspect your code closely, you'll see that the display property does not reflect the absolute value.

Answer №2

By including the source link for jquery, you can utilize multiple actions within a single document function. Here is an example provided:

To avoid changing CSS directly, it is recommended to use show()/hide() or slideToggle() methods for better display and compatibility across various devices.


$(document).ready(function(){
   $('#desktopThumb1').on("click",function(){
   $('#primaryImageDisplay').attr("src","img1.jpg");});

   $('#desktopThumb2').on("click",function(){      
   $('#primaryImageDisplay').attr("src","img2.jpeg");});

   $('#desktopThumb3').on("click",function(){                  
   $('#primaryImageDisplay').attr("src","img3.jpeg");});

   $('#desktopThumb4').on("click",function(){
   $('#primaryImageDisplay').attr("src","img4.jpeg");});

    $("#primaryImageDisplay").click(function(){
    $("#productSlide").slideToggle();
    });
});

Answer №3

Have you considered using a pre-existing solution for the advanced gallery on your website instead of coding it yourself? It can be quite complex.

One option to consider is , which I have personally used on several websites with great success.

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

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

What is the optimal choice: Using Stack with direction="horizontal" or employing display flex in React Bootstrap?

In my opinion, the two functions may seem similar, but from personal experience I tend to favor using display flex over Stack in react boostrap. I find that display flex offers more flexibility when it comes to spacing out objects. Would anyone be able to ...

cssreactjsstackbootstrap-5react-bootstrap

What is the best way to combine table cells in HTML to create a "T" shape?

Is there a way to merge the two blank cells (one above 'Be' and one above 'B') with a large blank space in the middle? I attempted using colspan and rowspan in various ways without success. https://i.stack.imgur.com/tw5SE.png This is m ...

htmlmergehtml-table

Implementing Update and Delete Features for Database Rows in Repeater

I have a repeater set up to extract and display data from a SQL Server database. Each row in the database has corresponding buttons added to it. Below is the code used to populate the repeater: SqlConnection connR; string connectionStringR = Configu ...

c#htmlcssasp.netsql-server

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

javascripthtml

Trigger a function by clicking on a radio button using MVC architecture and JQuery

I am currently working on implementing a click event for two radio buttons. When one of the radio buttons is clicked, I want it to trigger an action that will render a partial view. Here are my radio buttons: <p> <input id="SelectedInterestRate" ...

asp.net-mvcjquery

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

javascriptcssangulartypescript

Menu navigation with animated transitions - Not achieving the desired result

Recently, I posted this question and received a fantastic answer. However, now my client is requesting a hover animation for the navigation items. I started exploring jQuery Spritely as it seemed like the perfect solution. Unfortunately, despite my efforts ...

jquerycss

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

I am currently working with an HTML file structured like this.. <html> <body> <table border="1" cellpadding="5"> <tr> <td>Some Fixed text here</td> <td id="data">---here data as per values in external text file--- ...

javascriptjqueryhtmlcssajax

Can you provide instructions on how to use the jquery ajax post method to upload data to a MYSQL database

While I am familiar with performing a regular PHP post method where you specify the $conn variable containing the IP address and login details for the database, I find myself uncertain about how to achieve the same using jQuery AJAX post method. $.post( ur ...

phpjquery

Trouble with CSS positioned image rendering in Internet Explorer? Z-index not solving the issue?

I've been working on a timeline project where the completed sections should have a green background with a check mark image in the foreground. It appears correctly in Firefox, Chrome, and Safari. However, in IE 7 and 8 (and possibly 9), the layout is ...

htmlcssinternet-explorercross-browser

Content misaligned vertically inside a DIV

I'm struggling to understand why the browser is not allowing me to apply margin-top or padding-top to a DIV in order to center the text. HTML - <div id="header"> <div id="Nav"> <div id="navright"> ...

htmlcss

Manipulate table rows in real-time using jQuery to effortlessly add or remove rows

UPDATE: After setting a goal to delete rows, I am now facing an issue with recreating a deletion button in the row previous to the one that was just deleted. Here is the code snippet: HTML: <div id="container"> <img id="header" src="images/ ...

jquery

Adjust the height of a div element in the browser based on the content it contains

While I've come across similar questions, I have a query of my own... Is there a way to make the green div fill 100% of the browser window regardless of its content? http://jsbin.com/aculed/1/edit HTML: <div id="container"> & ...

htmlcss

Unable to retrieve image source using jQuery find('img') method

This that the code below may not be effective: find('img').attr('src') I desire to achieve a hover effect in the aside area where the image changes on and off. HTML <aside style="width:200px;height:300px;text-align:center;"> ...

jquery

Navigational dropdown menu item vanishing upon hover

Utilizing bootstrap for my website, the main navigation employs dropdowns for secondary choices. I am encountering an issue in IE10 only (works fine everywhere else) where the dropdown menu is inconsistently accessible. Additionally, if you manage to acce ...

csstwitter-bootstrapinternet-explorerdrop-down-menunavigation

CSS Toggle failing to show updated styles

Initially, I successfully changed the font and color of text on Google using a simple code. However, when I attempted to incorporate it into a toggle on / off switch, the changes did not take effect. To address this issue, I sought assistance from ChatGPT ...

javascriptcssgoogle-chrome-extensiontoggle

Confirming the data entry format

I am currently utilizing the RobinHerbots/Inputmask plugin to mask telephone input. I am interested in finding out how I can implement input validation to ensure that the user has entered accurate information. Thank you! <form> <input ty ...

javascriptjqueryhtmljquery-inputmask

The Ajax response is coming back with a null value, but upon inspecting the network response

I'm facing a strange issue where one specific value from an ajax json response is showing up as an empty string, while all other values are appearing correctly. An unusual aspect of this problem is that the network panel displays the correct value in ...

javascriptjqueryasp.netajaxangularjs

How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries: https://jsfiddle.net/2d8ytuq0/ <ul class="faq__questions"> <li> <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> ...

javascriptjqueryhtmlcsstwitter-bootstrap