Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 6th, 2012  |  syntax: None  |  size: 2.89 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jQuery on image click reveal text desc in div
  2. <!-- Swap portfolio image on click -->
  3. $("ul.thumbs li a").click(function() {
  4. var mainImage = $(this).attr("href"); //Find Image Name
  5. $(".work_two_third_column_copy img").attr({ src: mainImage });
  6. return false;  
  7. });
  8.  
  9. <!-- Get image description on click -->
  10. $("ul.thumbs li a").click(function () {
  11. var tip = $(this).css("visibility:visible");
  12. $(".one_sixth_column_copy .work_info").html("");
  13. });
  14.        
  15. <div class="work_two_third_column_copy">
  16. <a href=""><img src="main_image1.gif"></a>
  17. </div><!-- End .work_two_third_column_copy -->
  18.  
  19.  
  20. <div class="one_third_column_right">
  21.  
  22. <div class="one_sixth_column">
  23. <div class="one_sixth_column_copy">
  24. <div class="work_info">&nbsp;</div><!-- End Image Information -->
  25. </div><!-- End .one_sixth_column_copy -->
  26. </div><!-- End .one_sixth_column -->
  27.  
  28. <div class="one_sixth_column_thumbs">
  29. <ul class="thumbs">
  30. <li><a href="main_image1.gif"><img src="1.gif"><span class="tip">number one desc</span></a></li>
  31. <li><a href="main_image2.gif"><img src="2.gif"><span class="tip">number two desc</span></a></li>
  32. <li><a href="main_image3.gif"><img src="4.gif"><span class="tip">number three desc</span></a></li>
  33. <li><a href="main_image4.gif"><img src="5.gif"><span class="tip">number four desc</span></a></li>
  34. </ul><!-- ul.thumbs -->
  35. </div><!-- End .one_sixth_column_thumbs -->
  36.  
  37. </div><!--End .one_third_column_right -->
  38.        
  39. <!-- Swap portfolio information on click -->
  40.     $(function() {
  41.       $("ul.thumbs li a").click(function() {
  42.         $(".work_info p").text($(this).next().text());
  43.         return false;
  44.       });
  45.     });
  46.        
  47. <li><a href="main_image1.gif"><img src="1.gif"></a><p>number one text</p></li>
  48. <li><a href="main_image2.gif"><img src="2.gif"></a><p>number two text</p></li>
  49.        
  50. $("ul.thumbs li a").click(function() {
  51.     var mainImage = $(this).attr("href"); //Find Image Name
  52.  
  53.     //Set image:
  54.     $(".work_two_third_column_copy img").attr({ src: mainImage });
  55.  
  56.     //Find description:
  57.     var oDescSpan = $(this).find(".tip");
  58.     if (oDescSpan.length == 1)
  59.         $(".one_sixth_column_copy .work_info").html(oDescSpan.html());
  60.     else
  61.         $(".one_sixth_column_copy .work_info").html("");
  62.  
  63.     return false;  
  64. });
  65.        
  66. var clickerSetup = function() {
  67.     $("ul.thumbs li a").click(function() {
  68.         var mainImage = $(this).attr("href"); //Find Image Name
  69.         $(".work_two_third_column_copy img").attr({ src: mainImage });
  70.         var tip = $(this).css("visibility:visible");
  71.         $(".one_sixth_column_copy .work_info").html($(this).text());
  72.  
  73.         return false
  74.     });
  75. };
  76. $(document).ready(function() {
  77.     clickerSetup();
  78. });
  79.        
  80. <!-- Swap portfolio image and desc on click -->
  81.     $("ul.thumbs li a").click(function() {  
  82.         var mainImage = $(this).attr("href"); //Find Image Name
  83.         $(".work_two_third_column_copy img").attr({ src: mainImage });
  84.         $(".work_info p").text($(this).next().text());
  85.         return false;      
  86.     });