Created
September 12, 2016 14:45
-
-
Save anonymous/7e84cf5a9358e91df2ba993b51f8835c to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/limipe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> | |
| <style id="jsbin-css"> | |
| img{ | |
| max-width: 100%; | |
| } | |
| body{ | |
| background-color: #fff; | |
| background-image: url("https://source.unsplash.com/weekly"); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="targetImage"> | |
| <img src="https://source.unsplash.com/weekly?nature" id="selectedimage"> | |
| </div> | |
| <img src="https://source.unsplash.com/weekly?building" class="imageoptions"> | |
| <img src="https://source.unsplash.com/weekly?ocean" class="imageoptions"> | |
| <p> hi there! </p> | |
| <div id="sampleArea"></div> | |
| <div id="sampleArea2"></div> | |
| <div id="demo"> | |
| Microsoft! | |
| <div> | |
| <div id="demo1"> | |
| HEY | |
| </div> | |
| <div id="demo3"> | |
| three | |
| </div> | |
| <script src="https://code.jquery.com/jquery-2.2.4.js"></script> | |
| <script id="jsbin-javascript"> | |
| var data = { | |
| person: [ | |
| {firstName: "Christe", | |
| lastName: "Coenraets", | |
| blogURL: "https://source.unsplash.com/daily"}, | |
| {firstName: "Chris", | |
| lastName: "Coenr", | |
| blogURL: "https://source.unsplash.com/weekly"} | |
| ]}; | |
| var template = "{{#person}}" + "<h1>{{firstName}} {{lastName}} + <img src={{blogURL}}>" + "{{/person}}"; | |
| var html = Mustache.to_html(template, data); | |
| $('#sampleArea').html(html); | |
| $('#sampleArea img').addClass('imageoptions'); | |
| $("p").click(function(){ | |
| // $(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| $("body").css("background-image", 'url("https://source.unsplash.com/daily")'); | |
| }); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",myimage); | |
| }); | |
| var data2 = { | |
| "results": [ | |
| { | |
| "id": "UB7YmsJTEvE", | |
| "created_at": "2015-01-28T23:02:13-05:00", | |
| "width": 4928, | |
| "height": 3264, | |
| "color": "#545454", | |
| "likes": 509, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "dmWtzP6T9WA", | |
| "username": "rvcmedia", | |
| "name": "Steve Richey", | |
| "portfolio_url": "http://www.rvcmedia.com", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=22287138e18c71b0fae9313687608b31", | |
| "medium": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=74fb5b79338afcc8a71ff2f7c85bf41b", | |
| "large": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=55b86252c3811c3655af90a060fc7dd6" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/rvcmedia", | |
| "html": "http://unsplash.com/@rvcmedia", | |
| "photos": "https://api.unsplash.com/users/rvcmedia/photos", | |
| "likes": "https://api.unsplash.com/users/rvcmedia/likes", | |
| "portfolio": "https://api.unsplash.com/users/rvcmedia/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "full": "https://hd.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "regular": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=39b47f2e9511dfc6365de2ff69389a10", | |
| "small": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=22d0313ed1252e3d3b2fc6220833b524", | |
| "thumb": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e3546bc466faf689e214d764f61ed3ba" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/UB7YmsJTEvE", | |
| "html": "http://unsplash.com/photos/UB7YmsJTEvE", | |
| "download": "http://unsplash.com/photos/UB7YmsJTEvE/download", | |
| "download_location": "https://api.unsplash.com/photos/UB7YmsJTEvE/download" | |
| } | |
| }, | |
| { | |
| "id": "6Wad1bIYQ94", | |
| "created_at": "2015-09-09T10:13:24-04:00", | |
| "width": 5400, | |
| "height": 3238, | |
| "color": "#89531B", | |
| "likes": 28, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "gCYUoQJ6IPQ", | |
| "username": "pilaclara", | |
| "name": "Alan Weiner", | |
| "portfolio_url": null, | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=0ad68f44c4725d5a3fda019bab9d3edc", | |
| "medium": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=356bd4b76a3d4eb97d63f45b818dd358", | |
| "large": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ee8bbf5fb8d6e43aaaa238feae2fe90d" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/pilaclara", | |
| "html": "http://unsplash.com/@pilaclara", | |
| "photos": "https://api.unsplash.com/users/pilaclara/photos", | |
| "likes": "https://api.unsplash.com/users/pilaclara/likes", | |
| "portfolio": "https://api.unsplash.com/users/pilaclara/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "full": "https://hd.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "regular": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=9dacf5fde39babfa3d8850c41eaaa87d", | |
| "small": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=10b171383bd0fc93f2f592ab3fcfc743", | |
| "thumb": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=be28c257bc55bc6af42692266044c9f2" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/6Wad1bIYQ94", | |
| "html": "http://unsplash.com/photos/6Wad1bIYQ94", | |
| "download": "http://unsplash.com/photos/6Wad1bIYQ94/download", | |
| "download_location": "https://api.unsplash.com/photos/6Wad1bIYQ94/download" | |
| } | |
| }, | |
| { | |
| "id": "awnHOXjsdT4", | |
| "created_at": "2015-09-12T01:52:24-04:00", | |
| "width": 2448, | |
| "height": 3264, | |
| "color": "#AFAA9D", | |
| "likes": 482, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "MyaLRFMdSjE", | |
| "username": "lobostudiohamburg", | |
| "name": "LoboStudio Hamburg", | |
| "portfolio_url": "http://www.lobostudio.de", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=26c23c67af2dfef300e0e142762ee2c6", | |
| "medium": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=683d0d5e7f54f49f291271b1044ed054", | |
| "large": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ce4ae246376a84bb2e8b14390c9b320e" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/lobostudiohamburg", | |
| "html": "http://unsplash.com/@lobostudiohamburg", | |
| "photos": "https://api.unsplash.com/users/lobostudiohamburg/photos", | |
| "likes": "https://api.unsplash.com/users/lobostudiohamburg/likes", | |
| "portfolio": "https://api.unsplash.com/users/lobostudiohamburg/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "full": "https://hd.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "regular": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=54458ddea65a65eb1eb81d5fd139b28f", | |
| "small": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=b407916d980b10bb5eb08b02e8cd6262", | |
| "thumb": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=7996bc790916485d09457f6786b0fbe9" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/awnHOXjsdT4", | |
| "html": "http://unsplash.com/photos/awnHOXjsdT4", | |
| "download": "http://unsplash.com/photos/awnHOXjsdT4/download", | |
| "download_location": "https://api.unsplash.com/photos/awnHOXjsdT4/download" | |
| } | |
| } | |
| ]}; | |
| var template2 = "{{#results}}" + " Photo credit: <a href={{user.links.html}}>{{user.name}}</a> <img src={{urls.raw}}?fit=min&w=800&h=200>" + "{{/results}}"; | |
| var html = Mustache.to_html(template2, data2); | |
| $('#sampleArea2').html(html); | |
| $('#sampleArea2 img').addClass('imageoptions'); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| var res1 = myimage.replace("800", "200"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",res1); | |
| }) | |
| //$("#demo").click(function(){ | |
| //var img= $("#targetImage img:first"); | |
| //img.attr("src", img.attr("src")+"&px=16"); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| //}); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo1").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", img.attr("src")+"&" + ($.param(obj))); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo3").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", myimage.attr("src")); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">img{ | |
| max-width: 100%; | |
| } | |
| body{ | |
| background-color: #fff; | |
| background-image: url("https://source.unsplash.com/weekly"); | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var data = { | |
| person: [ | |
| {firstName: "Christe", | |
| lastName: "Coenraets", | |
| blogURL: "https://source.unsplash.com/daily"}, | |
| {firstName: "Chris", | |
| lastName: "Coenr", | |
| blogURL: "https://source.unsplash.com/weekly"} | |
| ]}; | |
| var template = "{{#person}}" + "<h1>{{firstName}} {{lastName}} + <img src={{blogURL}}>" + "{{/person}}"; | |
| var html = Mustache.to_html(template, data); | |
| $('#sampleArea').html(html); | |
| $('#sampleArea img').addClass('imageoptions'); | |
| $("p").click(function(){ | |
| // $(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| $("body").css("background-image", 'url("https://source.unsplash.com/daily")'); | |
| }); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",myimage); | |
| }); | |
| var data2 = { | |
| "results": [ | |
| { | |
| "id": "UB7YmsJTEvE", | |
| "created_at": "2015-01-28T23:02:13-05:00", | |
| "width": 4928, | |
| "height": 3264, | |
| "color": "#545454", | |
| "likes": 509, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "dmWtzP6T9WA", | |
| "username": "rvcmedia", | |
| "name": "Steve Richey", | |
| "portfolio_url": "http://www.rvcmedia.com", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=22287138e18c71b0fae9313687608b31", | |
| "medium": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=74fb5b79338afcc8a71ff2f7c85bf41b", | |
| "large": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=55b86252c3811c3655af90a060fc7dd6" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/rvcmedia", | |
| "html": "http://unsplash.com/@rvcmedia", | |
| "photos": "https://api.unsplash.com/users/rvcmedia/photos", | |
| "likes": "https://api.unsplash.com/users/rvcmedia/likes", | |
| "portfolio": "https://api.unsplash.com/users/rvcmedia/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "full": "https://hd.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "regular": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=39b47f2e9511dfc6365de2ff69389a10", | |
| "small": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=22d0313ed1252e3d3b2fc6220833b524", | |
| "thumb": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e3546bc466faf689e214d764f61ed3ba" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/UB7YmsJTEvE", | |
| "html": "http://unsplash.com/photos/UB7YmsJTEvE", | |
| "download": "http://unsplash.com/photos/UB7YmsJTEvE/download", | |
| "download_location": "https://api.unsplash.com/photos/UB7YmsJTEvE/download" | |
| } | |
| }, | |
| { | |
| "id": "6Wad1bIYQ94", | |
| "created_at": "2015-09-09T10:13:24-04:00", | |
| "width": 5400, | |
| "height": 3238, | |
| "color": "#89531B", | |
| "likes": 28, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "gCYUoQJ6IPQ", | |
| "username": "pilaclara", | |
| "name": "Alan Weiner", | |
| "portfolio_url": null, | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=0ad68f44c4725d5a3fda019bab9d3edc", | |
| "medium": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=356bd4b76a3d4eb97d63f45b818dd358", | |
| "large": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ee8bbf5fb8d6e43aaaa238feae2fe90d" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/pilaclara", | |
| "html": "http://unsplash.com/@pilaclara", | |
| "photos": "https://api.unsplash.com/users/pilaclara/photos", | |
| "likes": "https://api.unsplash.com/users/pilaclara/likes", | |
| "portfolio": "https://api.unsplash.com/users/pilaclara/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "full": "https://hd.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "regular": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=9dacf5fde39babfa3d8850c41eaaa87d", | |
| "small": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=10b171383bd0fc93f2f592ab3fcfc743", | |
| "thumb": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=be28c257bc55bc6af42692266044c9f2" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/6Wad1bIYQ94", | |
| "html": "http://unsplash.com/photos/6Wad1bIYQ94", | |
| "download": "http://unsplash.com/photos/6Wad1bIYQ94/download", | |
| "download_location": "https://api.unsplash.com/photos/6Wad1bIYQ94/download" | |
| } | |
| }, | |
| { | |
| "id": "awnHOXjsdT4", | |
| "created_at": "2015-09-12T01:52:24-04:00", | |
| "width": 2448, | |
| "height": 3264, | |
| "color": "#AFAA9D", | |
| "likes": 482, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "MyaLRFMdSjE", | |
| "username": "lobostudiohamburg", | |
| "name": "LoboStudio Hamburg", | |
| "portfolio_url": "http://www.lobostudio.de", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=26c23c67af2dfef300e0e142762ee2c6", | |
| "medium": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=683d0d5e7f54f49f291271b1044ed054", | |
| "large": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ce4ae246376a84bb2e8b14390c9b320e" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/lobostudiohamburg", | |
| "html": "http://unsplash.com/@lobostudiohamburg", | |
| "photos": "https://api.unsplash.com/users/lobostudiohamburg/photos", | |
| "likes": "https://api.unsplash.com/users/lobostudiohamburg/likes", | |
| "portfolio": "https://api.unsplash.com/users/lobostudiohamburg/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "full": "https://hd.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "regular": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=54458ddea65a65eb1eb81d5fd139b28f", | |
| "small": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=b407916d980b10bb5eb08b02e8cd6262", | |
| "thumb": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=7996bc790916485d09457f6786b0fbe9" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/awnHOXjsdT4", | |
| "html": "http://unsplash.com/photos/awnHOXjsdT4", | |
| "download": "http://unsplash.com/photos/awnHOXjsdT4/download", | |
| "download_location": "https://api.unsplash.com/photos/awnHOXjsdT4/download" | |
| } | |
| } | |
| ]}; | |
| var template2 = "{{#results}}" + " Photo credit: <a href={{user.links.html}}>{{user.name}}</a> <img src={{urls.raw}}?fit=min&w=800&h=200>" + "{{/results}}"; | |
| var html = Mustache.to_html(template2, data2); | |
| $('#sampleArea2').html(html); | |
| $('#sampleArea2 img').addClass('imageoptions'); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| var res1 = myimage.replace("800", "200"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",res1); | |
| }) | |
| //$("#demo").click(function(){ | |
| //var img= $("#targetImage img:first"); | |
| //img.attr("src", img.attr("src")+"&px=16"); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| //}); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo1").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", img.attr("src")+"&" + ($.param(obj))); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo3").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", myimage.attr("src")); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img{ | |
| max-width: 100%; | |
| } | |
| body{ | |
| background-color: #fff; | |
| background-image: url("https://source.unsplash.com/weekly"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var data = { | |
| person: [ | |
| {firstName: "Christe", | |
| lastName: "Coenraets", | |
| blogURL: "https://source.unsplash.com/daily"}, | |
| {firstName: "Chris", | |
| lastName: "Coenr", | |
| blogURL: "https://source.unsplash.com/weekly"} | |
| ]}; | |
| var template = "{{#person}}" + "<h1>{{firstName}} {{lastName}} + <img src={{blogURL}}>" + "{{/person}}"; | |
| var html = Mustache.to_html(template, data); | |
| $('#sampleArea').html(html); | |
| $('#sampleArea img').addClass('imageoptions'); | |
| $("p").click(function(){ | |
| // $(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| $("body").css("background-image", 'url("https://source.unsplash.com/daily")'); | |
| }); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",myimage); | |
| }); | |
| var data2 = { | |
| "results": [ | |
| { | |
| "id": "UB7YmsJTEvE", | |
| "created_at": "2015-01-28T23:02:13-05:00", | |
| "width": 4928, | |
| "height": 3264, | |
| "color": "#545454", | |
| "likes": 509, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "dmWtzP6T9WA", | |
| "username": "rvcmedia", | |
| "name": "Steve Richey", | |
| "portfolio_url": "http://www.rvcmedia.com", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=22287138e18c71b0fae9313687608b31", | |
| "medium": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=74fb5b79338afcc8a71ff2f7c85bf41b", | |
| "large": "https://images.unsplash.com/profile-1452202113416-5609325d172b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=55b86252c3811c3655af90a060fc7dd6" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/rvcmedia", | |
| "html": "http://unsplash.com/@rvcmedia", | |
| "photos": "https://api.unsplash.com/users/rvcmedia/photos", | |
| "likes": "https://api.unsplash.com/users/rvcmedia/likes", | |
| "portfolio": "https://api.unsplash.com/users/rvcmedia/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "full": "https://hd.unsplash.com/photo-1422504090664-c57eba84293f", | |
| "regular": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=39b47f2e9511dfc6365de2ff69389a10", | |
| "small": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=22d0313ed1252e3d3b2fc6220833b524", | |
| "thumb": "https://images.unsplash.com/photo-1422504090664-c57eba84293f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=e3546bc466faf689e214d764f61ed3ba" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/UB7YmsJTEvE", | |
| "html": "http://unsplash.com/photos/UB7YmsJTEvE", | |
| "download": "http://unsplash.com/photos/UB7YmsJTEvE/download", | |
| "download_location": "https://api.unsplash.com/photos/UB7YmsJTEvE/download" | |
| } | |
| }, | |
| { | |
| "id": "6Wad1bIYQ94", | |
| "created_at": "2015-09-09T10:13:24-04:00", | |
| "width": 5400, | |
| "height": 3238, | |
| "color": "#89531B", | |
| "likes": 28, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "gCYUoQJ6IPQ", | |
| "username": "pilaclara", | |
| "name": "Alan Weiner", | |
| "portfolio_url": null, | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=0ad68f44c4725d5a3fda019bab9d3edc", | |
| "medium": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=356bd4b76a3d4eb97d63f45b818dd358", | |
| "large": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ee8bbf5fb8d6e43aaaa238feae2fe90d" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/pilaclara", | |
| "html": "http://unsplash.com/@pilaclara", | |
| "photos": "https://api.unsplash.com/users/pilaclara/photos", | |
| "likes": "https://api.unsplash.com/users/pilaclara/likes", | |
| "portfolio": "https://api.unsplash.com/users/pilaclara/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "full": "https://hd.unsplash.com/photo-1441807970382-6662623b27fd", | |
| "regular": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=9dacf5fde39babfa3d8850c41eaaa87d", | |
| "small": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=10b171383bd0fc93f2f592ab3fcfc743", | |
| "thumb": "https://images.unsplash.com/photo-1441807970382-6662623b27fd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=be28c257bc55bc6af42692266044c9f2" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/6Wad1bIYQ94", | |
| "html": "http://unsplash.com/photos/6Wad1bIYQ94", | |
| "download": "http://unsplash.com/photos/6Wad1bIYQ94/download", | |
| "download_location": "https://api.unsplash.com/photos/6Wad1bIYQ94/download" | |
| } | |
| }, | |
| { | |
| "id": "awnHOXjsdT4", | |
| "created_at": "2015-09-12T01:52:24-04:00", | |
| "width": 2448, | |
| "height": 3264, | |
| "color": "#AFAA9D", | |
| "likes": 482, | |
| "liked_by_user": false, | |
| "user": { | |
| "id": "MyaLRFMdSjE", | |
| "username": "lobostudiohamburg", | |
| "name": "LoboStudio Hamburg", | |
| "portfolio_url": "http://www.lobostudio.de", | |
| "profile_image": { | |
| "small": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=26c23c67af2dfef300e0e142762ee2c6", | |
| "medium": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=683d0d5e7f54f49f291271b1044ed054", | |
| "large": "https://images.unsplash.com/profile-1441861988609-88845392315a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ce4ae246376a84bb2e8b14390c9b320e" | |
| }, | |
| "links": { | |
| "self": "https://api.unsplash.com/users/lobostudiohamburg", | |
| "html": "http://unsplash.com/@lobostudiohamburg", | |
| "photos": "https://api.unsplash.com/users/lobostudiohamburg/photos", | |
| "likes": "https://api.unsplash.com/users/lobostudiohamburg/likes", | |
| "portfolio": "https://api.unsplash.com/users/lobostudiohamburg/portfolio" | |
| } | |
| }, | |
| "current_user_collections": [], | |
| "urls": { | |
| "raw": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "full": "https://hd.unsplash.com/photo-1442037025225-e1cffaa2dc23", | |
| "regular": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=54458ddea65a65eb1eb81d5fd139b28f", | |
| "small": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=b407916d980b10bb5eb08b02e8cd6262", | |
| "thumb": "https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=7996bc790916485d09457f6786b0fbe9" | |
| }, | |
| "categories": [ | |
| { | |
| "id": 2, | |
| "title": "Buildings", | |
| "photo_count": 22904, | |
| "links": { | |
| "self": "https://api.unsplash.com/categories/2", | |
| "photos": "https://api.unsplash.com/categories/2/photos" | |
| } | |
| } | |
| ], | |
| "links": { | |
| "self": "https://api.unsplash.com/photos/awnHOXjsdT4", | |
| "html": "http://unsplash.com/photos/awnHOXjsdT4", | |
| "download": "http://unsplash.com/photos/awnHOXjsdT4/download", | |
| "download_location": "https://api.unsplash.com/photos/awnHOXjsdT4/download" | |
| } | |
| } | |
| ]}; | |
| var template2 = "{{#results}}" + " Photo credit: <a href={{user.links.html}}>{{user.name}}</a> <img src={{urls.raw}}?fit=min&w=800&h=200>" + "{{/results}}"; | |
| var html = Mustache.to_html(template2, data2); | |
| $('#sampleArea2').html(html); | |
| $('#sampleArea2 img').addClass('imageoptions'); | |
| $(".imageoptions").click(function(){ | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| var myimage = $(this).attr("src"); | |
| var res1 = myimage.replace("800", "200"); | |
| $("body").css("background-image", 'url(' + myimage +')'); | |
| $('#selectedimage').attr("src",res1); | |
| }) | |
| //$("#demo").click(function(){ | |
| //var img= $("#targetImage img:first"); | |
| //img.attr("src", img.attr("src")+"&px=16"); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| //}); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo1").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", img.attr("src")+"&" + ($.param(obj))); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); | |
| var obj = { | |
| px : '16', | |
| mono : 'f00' | |
| }; | |
| $("#demo3").click(function(){ | |
| var img= $("#targetImage img:first"); | |
| img.attr("src", myimage.attr("src")); | |
| //$(this).hide(); | |
| //$("body").css("background-color", "yellow"); | |
| //$('#selectedimage').attr("src", "&px=16"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment