← Back to branch summary

~caneypuggies/reformedchurcheslocator/couchapp-backbone

« back to all changes in this revision

Viewing changes to _attachments/js/vendor/requirejs-plugins/examples/image.html

  • Committer: Tim Black
  • Date: 2013-09-16 22:50:16 UTC
  • Revision ID: tim@alwaysreformed.com-20130916225016-zk8jiba25z33ew7h
Versioned Bower vendor directory

Show diffs side-by-side

added added

removed removed

Lines of Context:
_attachments/js/vendor/requirejs-plugins/examples/image.html
 
1
<!DOCTYPE html>
 
2
<html>
 
3
    <head>
 
4
        <meta charset="utf-8">
 
5
        <title>RequireJS image plugin</title>
 
6
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
7
    </head>
 
8
    <body>
 
9
        <div id="wrapper">
 
10
            <h1>RequireJS image plugin</h1>
 
11
            <p>Note that <code>waitSeconds</code> should be large enough to load all the images, otherwise module may timeout.</p>
 
12
            <p>Use this plugin only on specific cases and make sure you set a large <a href="http://requirejs.org/docs/api.html#config">waitSeconds</a> (default is 7 seconds).</p>
 
13
            <h2>Notes:</h2>
 
14
            <ul>
 
15
                <li>Image paths are relative to the HTML file by default.</li>
 
16
                <li>Support absolute paths as well.</li>
 
17
                <li>Appending <code>!bust</code> to the file name will avoid caching the image.</li>
 
18
                <li>Appending <code>!rel</code> to the file name will load image realtive to baseUrl or module path.</li>
 
19
                <li>It will always return the same image object unless you use the <code>!bust</code> flag, so you may need to clone the image element before inserting it multiple times into the same document.</li>
 
20
            </ul>
 
21
            <hr />
 
22
        </div>
 
23
        <script src="../lib/require.js"></script>
 
24
        <script>
 
25
            require.config({
 
26
                waitSeconds : 45, //should be enough to load images
 
27
                paths : {
 
28
                    image : '../src/image' //alias to plugin
 
29
                }
 
30
            });
 
31
 
 
32
            require([
 
33
                'image!img/lol_cat.jpg',
 
34
                'image!http://30.media.tumblr.com/tumblr_lgd1neNYSL1qbwkzvo1_500.jpg',
 
35
                'image!img/bike.jpg!bust',
 
36
                'image!img/bike.jpg!bust',
 
37
                'image!img/lol_cat.jpg',
 
38
                'img/relativePath.js'
 
39
            ], function(cat, awesome, bike1, bike2, sameCat, relative){
 
40
                var wrapper = document.getElementById('wrapper');
 
41
 
 
42
                //add loaded images to the document!
 
43
                //returns an Image object..
 
44
                wrapper.appendChild(awesome);
 
45
                wrapper.appendChild(cat);
 
46
 
 
47
                //requireJS will return same image object unless you use `!bust`
 
48
 
 
49
                var sameBike = document.createElement('div');
 
50
                sameBike.innerHTML = 'Is same bike cat? : '+ (bike1 === bike2);
 
51
                wrapper.appendChild(sameBike);
 
52
 
 
53
                wrapper.appendChild(bike1);
 
54
                wrapper.appendChild(bike2);
 
55
 
 
56
                var sameLol = document.createElement('div');
 
57
                sameLol.innerHTML = 'Is same lol cat? : '+ (cat === sameCat);
 
58
                wrapper.appendChild(sameLol);
 
59
 
 
60
                //so we need to "deep-clone" the Element to be able
 
61
                //to insert it multiple times into the same document
 
62
 
 
63
                //wrapper.appendChild(sameCat.cloneNode(true)); //insert a clone of the image
 
64
                wrapper.appendChild(sameCat);//swap image position
 
65
 
 
66
                relative.init(wrapper);
 
67
            });
 
68
        </script>
 
69
    </body>
 
70
</html>