Putting the each selector inside the plugin, added automatic detectio…

…n of element type so no more manual type setting
StevenBlack · May 7, 2012 · f6a1987 · f6a1987
1 parent baf6935
commit f6a1987
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 114 deletions.
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -1,3 +1,32 @@
+/* http://sonspring.com/journal/clearing-floats */
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+.clearfix:before,
+.clearfix:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+/*
+  The following zoom:1 rule is specifically for IE6 + IE7.
+  Move to separate stylesheet if invalid CSS is a problem.
+*/
+.clearfix {
+  zoom: 1;
+}
 /* ==================== */
 /* = Default Stylings = */
 /* ==================== */
@@ -120,6 +149,9 @@ figure img {
   width: 100%;
   margin-bottom: 0;
 }
+picture img {
+  width: 100%;
+}
 figcaption {
   margin: 0;
   padding: 0;
@@ -136,6 +168,7 @@ figcaption {
 /* =================== */
 header {
   padding-left: 130px;
+  margin-bottom: 2em;
   background: url(../images/logo.png) top left no-repeat;
 }
 header p {
@@ -144,6 +177,29 @@ header p {
   font-style: italic;
   font-size: 14px;
 }
+#buttons {
+  margin: 0 -5% 1.5em;
+}
+#buttons a {
+  display: block;
+  background: #ddd;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  text-align: center;
+  line-height: 2.6em;
+  width: 40%;
+  margin: 0 5%;
+  float: left;
+  text-decoration: none;
+  color: #111;
+}
+#buttons a:hover,
+#buttons a:focus {
+  background: #3366CC;
+  color: #fff;
+}
 #resize {
   position: fixed;
   right: 0;
@@ -164,6 +220,9 @@ footer span {
   #resize {
     display: none;
   }
+  #buttons a {
+    line-height: 2em;
+  }
 }
 @media screen and (max-width: 440px) {
   header {

diff --git a/demo/assets/css/style.less b/demo/assets/css/style.less
@@ -1,3 +1,39 @@
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+
+.clearfix:before,
+.clearfix:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/*
+  The following zoom:1 rule is specifically for IE6 + IE7.
+  Move to separate stylesheet if invalid CSS is a problem.
+*/
+
+.clearfix {
+  zoom: 1;
+}
+
 /* ==================== */
 /* = Default Stylings = */
 /* ==================== */
@@ -105,6 +141,12 @@ figure{
     }
 }
 
+picture{
+    img{
+        width: 100%;
+    }
+}
+
 figcaption{
     margin:0;
     padding:0;
@@ -123,6 +165,7 @@ figcaption{
 
 header{
     padding-left: 130px;
+    margin-bottom: 2em;
     background: url(../images/logo.png) top left no-repeat;
     p{
         color:#666;
@@ -132,6 +175,29 @@ header{
     }
 }
 
+#buttons{
+    margin: 0 -5% 1.5em;
+    a{
+        display:block;
+        background:#ddd;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        -ms-border-radius: 3px;
+        border-radius: 3px;
+        text-align:center;
+        line-height: 2.6em;
+        width: 40%;
+        margin: 0 5%;
+        float:left;
+        text-decoration:none;
+        color:#111;
+        &:hover, &:focus{
+            background: #3366CC;
+            color:#fff;
+        }
+    }
+}
+
 #resize{
     position: fixed;
     right:0;
@@ -154,6 +220,11 @@ footer{
     #resize{
         display:none;
     }
+    #buttons{
+        a{
+            line-height: 2em;
+        }
+    }
 }
 
 @media screen and (max-width: 440px) {

diff --git a/demo/index.html b/demo/index.html
@@ -18,16 +18,13 @@
 
 	<script src="assets/js/modernizr.js"></script>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-    <script src="../js/jquery-picture-min.js"></script>
+    <script src="../js/jquery-picture.js"></script>
 
     <script>
 
     $(function(){
-        $('figure').each(function(){
-            $(this).picture({
-                'type' : 'figure',
-                'breakpoints' : [440, 600]
-            });
+        $('figure, picture').picture({
+            'breakpoints' : [440, 600]
         });
     });
 
@@ -45,6 +42,14 @@ <h1>jQuery Picture</h1>
         <p>A jQuery plugin to help ease the transition to responsive images</p>
     </header>
 
+    <div id="buttons" class="clearfix">
+
+        <a href="http://github.com/Abban/jQuery-Picture/zipball/master">Download</a>
+
+        <a href="http://github.com/Abban/jQuery-Picture">Github Page</a>
+
+    </div>
+
 	<h2>Overview</h2>
 
 	<p>jQuery Picture is a plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon. In the meantime this plugin will be kept up to date with latest developments.</p>
@@ -71,11 +76,8 @@ <h3>Initialise the plugin</h3>
 
 <pre>
 $(function(){
-    $('figure.responsive').each(function(){
-        $(this).picture({
-            'type' : 'figure',
-            'breakpoints' : [440, 600, 800]
-        });
+    $('figure.responsive').picture({
+        'breakpoints' : [440, 600, 800]
     });
 });
 </pre>
@@ -97,14 +99,6 @@ <h3>Initialise the plugin</h3>
         </thead>
 
         <tbody>
-
-            <tr>
-
-                <td>type</td>
-                <td>figure</td>
-                <td>Type can be either 'figure' or 'picture'.</td>
-
-            </tr>
 
             <tr>
 
@@ -130,11 +124,9 @@ <h3>Usage with Figures</h3>
 
 <pre>
 $(function(){
-    $('figure.responsive').each(function(){
-        $(this).picture({
-            'type' : 'figure',
-            'breakpoints' : [440, 600]
-        });
+    $('figure.responsive').picture({
+        'type' : 'figure',
+        'breakpoints' : [440, 600]
     });
 });
 </pre>
@@ -145,22 +137,19 @@ <h3>Usage with Pictures</h3>
 
 <pre>
 &lt;picture alt="description of image"&gt;
-    &lt;source src="assets/images/small.jpg"&gt;
-    &lt;source src="assets/images/medium.jpg" media="(min-width:400px)"&gt;
-    &lt;source src="assets/images/large.jpg" media="(min-width:800px)"&gt;
-    &lt;img src="assets/images/large.jpg" alt="description of image"&gt;
+    &lt;source src="assets/images/small.png"&gt;
+    &lt;source src="assets/images/medium.png" media="(min-width:400px)"&gt;
+    &lt;source src="assets/images/large.png" media="(min-width:800px)"&gt;
+    &lt;img src="assets/images/large.png" alt="A Half Brained Idea"&gt;
 &lt;/picture&gt;
 </pre>
 
     <p>And then it's initialised in a similar way:</p>
 
 <pre>
 $(function(){
-    $('picture').each(function(){
-        $(this).picture({
-            'type' : 'picture',
-            'breakpoints' : [440, 600]
-        });
+    $('picture').picture({
+        'breakpoints' : [440, 600]
     });
 });
 </pre>
@@ -180,5 +169,19 @@ <h4>Closing note:</h4>
 
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-24013812-4']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
+
 </body>
 </html>
diff --git a/js/jquery-picture-min.js b/js/jquery-picture-min.js
@@ -15,4 +15,4 @@
  * approved and implemented by browsers. Lets hope that happens soon. In the meantime
  * this plugin will be kept up to date with latest developments.
  * 
- */(function(a){a.fn.picture=function(b){function h(){var b=0;d=a(window).width();a.each(c.breakpoints,function(a,c){d>c&&(b=c)});if(e!==b){e=b;c.type=="figure"?j():i()}}function i(){var b=new Object;f.find("source").each(function(){var c,d,e;c=a(this).attr("media");d=a(this).attr("src");c?e=c.replace(/[^\d.]/g,""):e=0;b[e]=d});f.find("img").attr("src",b[e])}function j(){var b=new Object,c=f.data();a.each(c,function(a,c){var d;d=a.replace(/[^\d.]/g,"");d||(d=0);b[d]=c});f.find("img").attr("src",b[e])}var c=a.extend({type:"figure",breakpoints:[100,200]},b),d,e,f,g;f=this;h();g=!1;a(window).resize(function(){g!==!1&&clearTimeout(g);g=setTimeout(h,200)})}})(jQuery);
+ */(function(a){a.fn.picture=function(b){var c=a.extend({breakpoints:!1},b);this.each(function(){function g(){var f=0;b=a(window).width();a.each(c.breakpoints,function(a,c){b>c&&(f=c)});if(d!==f){d=f;e.get(0).tagName=="FIGURE"?i():h()}}function h(){var b=new Object;e.find("source").each(function(){var c,d,e;c=a(this).attr("media");d=a(this).attr("src");c?e=c.replace(/[^\d.]/g,""):e=0;b[e]=d});e.find("img").attr("src",b[d])}function i(){var b=new Object,c=e.data();a.each(c,function(a,c){var d;d=a.replace(/[^\d.]/g,"");d||(d=0);b[d]=c});e.find("img").attr("src",b[d])}var b,d,e,f;e=a(this);g();f=!1;a(window).resize(function(){f!==!1&&clearTimeout(f);f=setTimeout(g,200)})})}})(jQuery);