Markimago.js | For embed images more easily

|
What will you do when you embed an image or images to your website? Write the <img /> tag, then write the url on src property, so the tag will be look like <img alt="image" src="imageurl" title="image" /> ? What will you do if you want to give same image in another place in a same page too? You will write the previous code again, write the url again? It's so troublesome!



That's it! We must find another way to embed image more easy. But, how? Hmm, still remember about function or classes? We don't need to write the code again and again to do something twice, just call the function, right? THAT'S IT! Now, let's we do a same thing as we do to function!

My idea is, we make a "bookmark" of image's urls, and when we want to call some image, we just have to call the "bookmark". WOW.

I already make that tool, Markimago. With 2 simple functions and 48 lines code only, we don't need to write image url 48 times, just 24, 12, 6, or 3 times! With bookmark, the code will be more easily t o read. HAH? Let's take a look at an example bellow:

// Make the bookmarks

Markimago.createMarker({
                        "lake" : "sample/lake.jpg",
                        "stable" : "sample/stable.jpg",
                        "sunset" : "sample/sunset.jpg",
                        "tree among water" : "sample/tree_lake.jpg"
                  });


// Apply bookmark for all img elements. Auto make title property with bookmark name, without alt property
Markimago.mark({title : true, alt : false});        

Then, lets apply it for embedding image

<img name="lake" />
<img name="stable" />
<img name="sunset" />
<img name="tree among water" />

Easy, right?

This is the beta version of Markimago. Please give me your advice. Thanks if you like my work. Comment your comment/advice here!

Githubhttps://github.com/nmimagine/Markimago/

0 komentar:

Posting Komentar