Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #12 from josh/data-attrs

Support data-* attr params
  • Loading branch information...
commit 1a4f5e3b134b6f46b065e053b1ffa774074c1fec 2 parents bdff515 + 3def1e9
@cameronmcefee authored
Showing with 27 additions and 11 deletions.
  1. +7 −10 examples/index.html
  2. +5 −1 js/plax.js
  3. +15 −0 readme.md
View
17 examples/index.html
@@ -51,22 +51,19 @@
}
</style>
<script type="text/javascript">
- $(document).ready(function () {
- $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
- $('#plax-logo').plaxify({"xRange":20,"yRange":20})
- $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
- $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
+ $(document).ready(function () {
+ $('#shell img').plaxify()
$.plax.enable()
})
</script>
-
+
</head>
<body>
<div id="shell">
- <img src="img/plax_logo.png" width="136" height="70" id="plax-logo"/>
- <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-1"/>
- <img src="img/plax_sphere_large.png" width="215" height="215" id="plax-sphere-2"/>
- <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-3"/>
+ <img src="img/plax_logo.png" width="136" height="70" data-xrange="20" data-yrange="20" id="plax-logo"/>
+ <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" id="plax-sphere-1"/>
+ <img src="img/plax_sphere_large.png" width="215" height="215" data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
+ <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
</div>
</body>
</html>
View
6 js/plax.js
@@ -52,7 +52,11 @@
return this.each(function () {
var layerExistsAt = -1
- var layer = {"xRange":0,"yRange":0,"invert":false}
+ var layer = {
+ "xRange": $(this).data('xrange') || 0,
+ "yRange": $(this).data('yrange') || 0,
+ "invert": $(this).data('invert') || false
+ }
for (var i=0;i<layers.length;i++){
if ($(this).attr('id') == layers[i].obj.attr('id')){
View
15 readme.md
@@ -27,6 +27,21 @@ $('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true})
$.plax.enable()
```
+Another way is to specify the arguments as data attributes on the layer elements.
+
+```html
+<img src="octocat.png" data-xrange="40" data-yrange="40">
+<img src="earth.png" data-xrange="20" data-yrange="20">
+<img src="bg.png" data-xrange="10" data-yrange="10" data-invert="true">
+```
+
+Then plaxify them in bulk.
+
+```javascript
+$('img').plaxify()
+$.plax.enable()
+```
+
You can dynamically redefine the range of a layer by running `plaxify()` on it again. If the id matches another id in the layer array, it will replace it with the new range.
```javascript
Please sign in to comment.
Something went wrong with that request. Please try again.