FadeTo several different images

Question

I'm very new to web design and JQuery· I'm trying to use FadeTo with 13 different images that each make appear a different text box when you click on them. For example, the photo called "Pinhole" would make appear a text about the creation of the pinhole camera, the one called "obscura" would make appear a text about the camera obscura, and so forth.

For some reason, I can't manage to make it work. I tried different things, but either they would all fade at the same time, or none of them would work like it's the case right now, or I would get an error message. Here's my attempt:

$(document).ready(function(){

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(pinhole).fadeTo('slow',0.5);
    }, function(){
    $(pinholeText).stop().fadeTo('slow',1);
    }
    );

    $(obscura).fadeTo('slow',0.5);
    }, function(){
    $(obscuraText).stop().fadeTo('slow',1);
    }
    );

    $(heliography).fadeTo('slow',0.5);
    }, function(){
    $(heliographyText).stop().fadeTo('slow',1);
    }
    );

    $(daguerreotype).fadeTo('slow',0.5);
    }, function(){
    $(daguerreotypeText).stop().fadeTo('slow',1);
    }
    );

    $(calotype).fadeTo('slow',0.5);
    }, function(){
    $(calotypeText).stop().fadeTo('slow',1);
    }
    );

    $(wetc).fadeTo('slow',0.5);
    }, function(){
    $(wetcText).stop().fadeTo('slow',1);
    }
    );

    $(drygel).fadeTo('slow',0.5);
    }, function(){
    $(drygelText).stop().fadeTo('slow',1);
    }
    );

    $(kodak1).fadeTo('slow',0.5);
    }, function(){
    $(kodak1Text).stop().fadeTo('slow',1);
    }
    );

    $(leica2).fadeTo('slow',0.5);
    }, function(){
    $(leica2Text).stop().fadeTo('slow',1);
    }
    );

    $(polaroid).fadeTo('slow',0.5);
    }, function(){
    $(polaroidText).stop().fadeTo('slow',1);
    }
    );

    $(dslr).fadeTo('slow',0.5);
    }, function(){
    $(dslrText).stop().fadeTo('slow',1);
    }
    );

    $(cellphone).fadeTo('slow',0.5);
    }, function(){
    $(cellphoneText).stop().fadeTo('slow',1);
    }
    );

    $(future).fadeTo('slow',0.5);
    }, function(){
    $(futureText).stop().fadeTo('slow',1);
    }
    );

});

I tried several tutorials, but none of them worked. Could someone please give me a hint? That would be very appreciated!

Answer 1

Since you are handling click() event with multiple selectors you need to check which one is clicked then target their corresponding text.

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(this).fadeTo('slow',0.5);

    if($(this).is('#pinhole')){
        $('#pinholeText').fadeTo('slow',1);
    }

    if($(this).is('#obscura')){
        $('#obscuraText').fadeTo('slow',1);
    }
    //and so on...
});

But that would be inefficient, because it's similar to doing it one by one:

$('#pinhole').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#pinholeText').fadeTo('slow',1);
});

$('#obscura').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#obscuraText').fadeTo('slow',1);
});

However if you can change your markup and wrap your set of img and text in a <div>. Like this:

<div id="pinhole">
    <img id="pinholeImg" src="" />
    <p id="pinholeText">Pinhole text</p>
</div>

Then your jQuery would be:

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){
    $(this).children('img').fadeTo('slow',0.5).siblings('p').fadeTo('slow',1);
});

See this jsfiddle