0

I have a div that holds a bunch of thumbnail images. Each image has the rel attribute specified and I would like to use that value to pop up the full size image of the thumbnail in another div.

I want to use the jQuery fadeIn function. My code isn't working..and I don't know jQuery very well at all.

What's wrong with this code?

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>


<style type="text/css">
.imgdiv {

    /* initially overlay is hidden */
    display:none;

</style>    

</head>

<body>

    <div id="book">
    <img src="thumbnails/book1.png" width="100" height="123" rel="photo1"/>

    <img src="thumbnails/book2.png" width="100" height="123" rel="photo2"/>
    </div>


<div class="imgdiv" id="photo1">
    <img src="thumbnails/booklarge1.png" />
</div>

<div class="imgdiv" id="photo2">
    <img src="thumbnails/booklarge2.png" />
</div>        

<script>
    $('#book img').click(function() {      
      $('#book img[rel]').fadeIn('slow'); 
    });       

</script>

</body>
</html>
1
  • first in your rel tag you need to have # in front so its looks for the id Feb 20, 2012 at 19:37

3 Answers 3

2

Change the code inside your click function to this

$("#"+$(this).attr("rel")).fadeIn('slow');

see here

1
  • Thank you! That works perfectly. I greatly appreciate the example link so I could see exactly how the code should be.
    – katura
    Feb 20, 2012 at 19:50
0

I would suggest using html5 data attribute over rel. Something like data-largeimage="#photo1"

Also, define the click event in a document ready function: $(function(){ //do stuff })

Extension of Naveed's code:

$(function(){

 $('#book > img').click(function() {      
  $("div.imgdiv").hide();
  var largeImage = $(this).data('largeimage');
  $(largeImage ).fadeIn('slow'); 

 }); 

});

If you would like to use your old selector, change $('#book img[rel]') to $('#book img[rel="' + variable + '"]')

0

Simple:

 $('#book > img').click(function() {      
      $("div.imgdiv").hide();
      $(this).fadeIn('slow'); 
 }); 
1
  • gives an error Error: Syntax error, unrecognized expression: #[object Object] Source File: http://code.jquery.com/jquery-latest.js Line: 4179 Feb 20, 2012 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.