0

Need some help here. I'm trying to achieve this:

By default the images are hidden by css display: none;

When the user clicks on the link for example: vanilla glazed it will display the image that matches the image alt "vanilla-glazed".

Then if the user clicks on another link for example: brookyln blackout it will hide the active image and show the brookyln blackout image.

Makes sense? Here's my html markup.

I need help with the jQuery part. Not sure where to start.

<div id="nameWrapper">

<ul>

<li><a href="#" class="vanilla-glazed">vanilla glazed</a></li>
<li><a href="#" class="brookyln-blackout">brookyln blackout</a></li>

</ul>

</div>


<div class="gallery">

<div class="image-wrapper">

<img src="#" alt="brookyln-blackout" />

   <div class="meta">
   <p>description</p>
   </div>

</div>

<div class="image-wrapper">

<img src="#" alt="vanilla-glazed" />

   <div class="meta">
   <p>description</p>
   </div> 

</div>

</div>
Nick Scola
  • 3
  • 2
  • 2
    [.on()](http://api.jquery.com/on), [.show()](http://api.jquery.com/show), [.hide()](http://api.jquery.com/hide), [selectors](http://api.jquery.com/category/selectors/) – Andreas Mar 05 '13 at 21:15

1 Answers1

1

You can try something like this 

 $(document).ready(function(){ //on load of the document 
   $("#nameWrapper a").click(function(){ //on a click on a a in your div
       $('.image-wrapper img').hide(); //hide all images (including already hidden ones
       $("img[alt='"+$(this).attr('class')+"']").show(); //show the image with alt value          
   });
});

see fiddle

benzonico
  • 10,635
  • 5
  • 42
  • 50
  • Quick question. Is there anyway I can add an active class to the image? – Nick Scola Mar 05 '13 at 21:51
  • Hey I just updated my html markup. I added a class called meta after the img tag. How would I make that display as well if the image alt matches the link class. – Nick Scola Mar 05 '13 at 22:24