Using JQuery to activate a popup using image name.

Question

Hey guys, I am trying to use JQuery to manage some popups. This page I am building will have 15 projects, each which is a thumbnail contained within a DIV. Each DIV has a Name attribute so I would like to have JQuery find the name of the DIV and activate the hidden popup with the same name that is contained within the ID…

Currently I have three "projectThumb" DIVs with different names and three different "projectPopup" DIVs with the same corresponding names as the "projectThumb" DIVs but placed in the ID tag.

HTML Code:

<div class="projectThumb">
<img src="/img/a.effect_static.gif" class="button" name="a.effect" alt="" />
<p class="title">A.EFFECT: Film Poster</p>
</div>

<div class="projectPopup" id="a.effect">
<a class="close">Close &times;</a>
<img src="/img/a.effect_popup.jpg" alt="" />
<p class="description">Description</p>
</div>

JScript and JQuery code:

var popupStatus = 0;

function loadPopup(){  
    if(popupStatus==0){  
        $(".projectPopup").show();  
        popupStatus = 1;
    }
}

function closePopup(){
    if(popupStatus==1){
            $(".projectPopup").hide();
            popupStatus = 0;
    }
}

$(document).ready(
    function(){
            var findProject = $(".projectThumb").find('img').attr('name');
            $(".projectThumb", this).click(function(){
                    loadPopup();
                    });
    });

Thank you all in advance for any help!

Answer 1

I think you just need to move that findProject code a little bit:

function loadPopup(thumbDiv) {  
  if(popupStatus == 0) {  
    var findProject = thumbDiv.find('img').attr('name');
    $(findProject).show();

    // or without the variable
    $(thumbDiv.find('img').attr('name')).show();

    //$(".projectPopup").show();  
    popupStatus = 1;
  }
}

function() {
  $(".projectThumb", this).click(function() {
    loadPopup($(this));
  });
});

Answer 2

I suggest using this one:

$(document).ready(function(){;
$(".projectPopup").hide();
var actualOpenID = "";
$(".projectThumb").click(function(){
 if (actualOpenID !== "") {
  $("div[id="+actualOpenID+"]").hide();
 }
 var newID = $(this).children("img").attr("name");
 $("div[id="+newID+"]").show();
 actualOpenID = newID;
});

$("a.close").click(function (e) {
 e.preventDefault();
 $(this).parent().hide();
 actualOpenID = "";
});

});

BTW using a dot in the ID is a bad idea because when you try $("#a.effect"); nothing will be selected because jQuery looks for an DOM-Element with the ID of "a" AND a CLASS "effect".

If you could change the dot to something else, the Selector would be $("#"+newID) instead of $("div[id="+newID+"]").

In the example above the popup will be closed too, if someone clicks on an other projectThumb image.

kind regards,

bjoern