jquery full size full opacity

Benchmark created by Dan Manastireanu on May 3, 2011

Preparation HTML

<div id="gallery-thumbs"> 
    <ul class="thumb"> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    </ul>
<ul class="thumb"> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    </ul>
<ul class="thumb"> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    <li><a href="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png"><img src="http://static.hubspot.com/img/follow/icon_rss.png" /></a></li> 
    </ul>
 </div>
 <div id="main-view"> 
 <img src="http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png" /> 
 </div> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  (function($) {
   $.fn.fullSizeFullOpacity = function() {
    return this.each(function() {
     var $a = $(this).find('a'),
         $img = $a.find('img');
     if ($a.attr('href') == $img.attr('src')) {
      $img.css('opacity', 1.0);
     }
    });
   };
   $.fn.fullSizeFullOpacity2 = function() {
    return this.each(function() {
     $(this).find('a').each(function() {
      var $img = $(this).find('img');
      if (this.href == $img.attr('src')) {
       $img.css('opacity', 1.0);
      }
     });
    });
   };
   $.fn.fullSizeFullOpacity3 = function() {
    return this.each(function() {
     $(this).find('img').each(function() {
      if (this.src == $img.closest('a')[0].href) {
       $(this).css('opacity', 1.0);
      }
     });
    });
   };
  }(jQuery));
</script>

Test runner

jQuery('.thumb li').fullSizeFullOpacity();

jQuery('.thumb').fullSizeFullOpacity2();

jQuery('.thumb').fullSizeFullOpacity2();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Dan Manastireanu on May 3, 2011
• Revision 2: published on May 26, 2011