using a modal, click one element to trigger another element

Question

I am pretty new to JQuery, coding isn't my strong suit but i gotta learn somehow, anyways my problem is I want to click on a parent element that will start a function to click a child element. that part of my code works

jQuery('.div_image').click(function() {

jQuery(this).find('.gallory_image').click();

{);

the next part I am having trouble with is that when.gallory image is clicked it triggers a popup that shows the image from the element clicked. the popup shows up, but its a blank back ground the code im using is this

var image = jQuery(this).attr('src');   
 
jQuery('.lightbox-popup').css('background-image' , 'url(' + image + ')');

jQuery('.lightbox-popup').css('background-size', 'contain');


jQuery('.lightbox-popup').css('background-color', 'rgba(0, 0, 0, 0)');

jQuery('.lightbox-popup').css('background-position' , 'center'); 

when I change the code so I can click on the child itself it works fine, but when I try to trigger.gallory_image by clicking on the parent.div_image it brings up the blank background. I have scoured the Inte.net for weeks, and anything I try just doesn't work. thanks in advance.

Answer 1

It sounds like the issue is that when you click on the parent element, the this keyword in your code is referring to the parent element, not the child element. When you directly click on the child element, this refers to the child element, so the attr('src') call is returning the correct image source.

One way to fix this would be to store a reference to the child element in a variable before you trigger the click event, and then use that variable in the code that sets the background image. Here's an example:

jQuery('.div_image').click(function() {
    var child = jQuery(this).find('.gallory_image');
    child.click();
    var image = child.attr('src');   
    jQuery('.lightbox-popup').css('background-image' , 'url(' + image + ')');
    jQuery('.lightbox-popup').css('background-size', 'contain');
    jQuery('.lightbox-popup').css('background-color', 'rgba(0, 0, 0, 0)');
    jQuery('.lightbox-popup').css('background-position' , 'center'); 
});

This way you are storing the reference of the child element in a variable before you trigger the click event, and then using that variable in the code that sets the background image.

Answer 2

@fidakhattak I was having some issues with your code so I spent a couple of hours playing with it,

the problem with your code I was having is the pop up placement, and the src still was not showing the image. it would pop up at top of the page instead of (center, center) of browser when I clicked on the element. I fixed the src image by creating two separate functions the first of your code

jQuery('.div_image').click( function() {

var child = jQuery(this).find('.gallory_image');
child.click(); 

and the second finding the source,

jQuery('.gallory_image').click( function() {

var image = jQuery(this).attr('src'); 

and that worked, the image appeared,. but the popup was still forced to top of page. easily solution i tried just to see if it would work was make the popup trigger be.div_image instead of.gallory_image and get rid of child;click();

so my code looks like this.

jQuery('.div_image').click( function() {

var child = jQuery(this).find('.gallory_image');  

var image = child.attr('src');

jQuery('.lightbox-popup').css('background-image' , 'url(' + image + ')');
jQuery('.lightbox-popup').css('background-size', 'contain');
jQuery('.lightbox-popup').css('background-color', 'rgba(0, 0, 0, 0)');
jQuery('.lightbox-popup').css('background-position' , 'center');
}); 

Boom! finally got this fixed! ugh been on this for a couple of months couldn't have done it with out you!