{
  "trx_id": "e42e3dee99df2590cd933e59b58c86c1b847cfd6",
  "block": 43197893,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-08T13:24:12",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "0.000000 VESTS"
    }
  ]
}

{
  "trx_id": "19f66dfc77081792c588335d91284b9caf73fead",
  "block": 39654221,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-01-05T05:45:15",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "steemitboard",
      "permlink": "steemitboard-notify-mytosin-20200105t054515000z",
      "title": "",
      "body": "Congratulations @mytosin! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@mytosin/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@mytosin) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=mytosin)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}"
    }
  ]
}

{
  "trx_id": "8b9242743d40af6fe0016c86d0f14150073985ce",
  "block": 29181857,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-01-05T06:21:57",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "steemitboard",
      "permlink": "steemitboard-notify-mytosin-20190105t062156000z",
      "title": "",
      "body": "Congratulations @mytosin! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@mytosin/birthday1.png</td><td>1 Year on Steemit</td></tr></table>\n\n<sub>_[Click here to view your Board](https://steemitboard.com/@mytosin)_</sub>\n\n\n> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}"
    }
  ]
}

{
  "trx_id": "7141b55980d14dd6e4a180f6a64bd2b0e89e4fb5",
  "block": 28045450,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-11-26T18:45:27",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "2013.984142 VESTS"
    }
  ]
}

{
  "trx_id": "2be4784edfe2d0c48ca91c21ed5a073b03247739",
  "block": 26076350,
  "trx_in_block": 17,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-09-19T08:32:21",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "hello-steemit-i-am-mytosin-web-developer-from-medan-indonesia",
      "author": "gabrieltheresya",
      "permlink": "re-mytosin-hello-steemit-i-am-mytosin-web-developer-from-medan-indonesia-20180919t083134487z",
      "title": "",
      "body": "Aku mahasiswi baru dengan prodi teknik komputer, mohon bimbingannya juga kak. Dan semoga kk sudi saling memfollow dan upvote , trim's:)",
      "json_metadata": "{\"tags\":[\"introduceyourself\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "1a480dd7fffbd391034e7603e918e02a6e3414c6",
  "block": 26076314,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-09-19T08:30:33",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "hello-steemit-i-am-mytosin-web-developer-from-medan-indonesia",
      "author": "gabrieltheresya",
      "permlink": "re-mytosin-hello-steemit-i-am-mytosin-web-developer-from-medan-indonesia-20180919t082944149z",
      "title": "",
      "body": "Salam kenal kak, dari medan juga 😂",
      "json_metadata": "{\"tags\":[\"introduceyourself\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "d26c197a126053a390ee1a8f0092f078a690fa5f",
  "block": 25452739,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-08-28T03:38:48",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "12046.728341 VESTS"
    }
  ]
}

{
  "trx_id": "af966b59a871d12b8df0b84a7d30ec52e5c4dc1d",
  "block": 25451744,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-08-28T02:48:54",
  "op": [
    "transfer",
    {
      "from": "mytosin",
      "to": "bittrex",
      "amount": "44.041 SBD",
      "memo": "010e80e103f14952971"
    }
  ]
}

{
  "trx_id": "612a79ef9930def24cb6001c5787d8fbfe256f3a",
  "block": 22657545,
  "trx_in_block": 13,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-05-22T16:03:39",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "2034.223272 VESTS"
    }
  ]
}

{
  "trx_id": "d569dcb486916529ee7b3776313a7c3c64c25a91",
  "block": 20580551,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-11T11:33:06",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "dtubix",
      "permlink": "re-add-image-popup-to-your-site-using-magnific-popup-19",
      "title": "",
      "body": "Cool! I follow you. <p><img src=\"https://preview.ibb.co/fGAMyx/up1.jpg\" width=\"200\"/></p>",
      "json_metadata": ""
    }
  ]
}

{
  "trx_id": "7f9b8e6bac4a604476c897ed8b1e17b96b27473c",
  "block": 20580467,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-11T11:28:54",
  "op": [
    "vote",
    {
      "voter": "dtubix",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 5000
    }
  ]
}

{
  "trx_id": "925ce7a0df69835706649fffd92ba436ac1d5326",
  "block": 20038578,
  "trx_in_block": 41,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-02-20T15:27:00",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "beautiful-umbrellas-photo-with-my-nephew-on-bali-beach",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "84163e2a0967a3d9a7ec0a136b1f22d960856540",
  "block": 20038576,
  "trx_in_block": 34,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-02-20T15:26:54",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "gong-xi-sin-nien-tahun-baru-imlek-2018-happy-chinese-new-year-khiong-hi-fat-chai",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "1013fea97b6eab080eafdf517e71d046ec608cad",
  "block": 20038573,
  "trx_in_block": 46,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-02-20T15:26:45",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "tradisi-malam-imlek-dan-pesta-malam-imlek-2569-di-asean-delight-seafood-restaurant",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "8b9b645f2195ec56c011863ec94557c5856c1445",
  "block": 19521199,
  "trx_in_block": 17,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-02-02T15:44:42",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "jerash-petra-and-amman-the-capital-of-jordan-is-a-modern-city-with-numerous-ancient-ruins-atop-jabal-al-qala-a-hill-the-historic",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "72987ba0e76afff0e873063f23d1019684273896",
  "block": 19377449,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-28T15:49:15",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "12385.541548 VESTS"
    }
  ]
}

{
  "trx_id": "467f6412c3f7c484aaf94b1de0b6e927bfa786f8",
  "block": 19377081,
  "trx_in_block": 21,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-28T15:30:51",
  "op": [
    "claim_reward_balance",
    {
      "account": "mytosin",
      "reward_steem": "0.000 STEEM",
      "reward_sbd": "12.367 SBD",
      "reward_vests": "4190.995109 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19376605,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 9,
  "timestamp": "2018-01-28T15:07:03",
  "op": [
    "author_reward",
    {
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "sbd_payout": "12.367 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "4190.995109 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19376605,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 8,
  "timestamp": "2018-01-28T15:07:03",
  "op": [
    "comment_benefactor_reward",
    {
      "benefactor": "utopian.pay",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2793.314611 VESTS"
    }
  ]
}

{
  "trx_id": "ca71c45b4b7a8e6732047e26f990402fcfd67474",
  "block": 19262036,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-24T15:35:24",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "the-history-of-the-maimun-palace-meriam-puntung-and-great-mosque-of-medan-1",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "de57de895c022a66e5e9233d397fd68d3ead7c10",
  "block": 19262015,
  "trx_in_block": 32,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-24T15:34:21",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "red-leaves-in-the-plantation-museum",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "19e4c3988dec6556e38367dba0372174d66f695b",
  "block": 19249505,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-24T05:08:45",
  "op": [
    "comment",
    {
      "parent_author": "sely",
      "parent_permlink": "re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180123t020353903z",
      "author": "mytosin",
      "permlink": "re-sely-re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180124t050844349z",
      "title": "",
      "body": "Thanks @sely",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"sely\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "80181452a2a3c05d76008612f18d0e5b46a93766",
  "block": 19249500,
  "trx_in_block": 22,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-24T05:08:30",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "9e9ffaa42e9e0d17b7ba7231f5b568a14b2a5c2a",
  "block": 19233750,
  "trx_in_block": 26,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-23T16:00:33",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "utopian-io",
      "permlink": "re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180123t160033658z",
      "title": "",
      "body": "### Hey @mytosin I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}"
    }
  ]
}

{
  "trx_id": "b928da4cb5cea8203d02322c72786d283bef11d5",
  "block": 19233749,
  "trx_in_block": 32,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-23T16:00:30",
  "op": [
    "vote",
    {
      "voter": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 235
    }
  ]
}

{
  "trx_id": "7bef7ff8fa6f79c496c5a8745a85713b3cf8d744",
  "block": 19217030,
  "trx_in_block": 39,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-23T02:04:06",
  "op": [
    "vote",
    {
      "voter": "sely",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "71b85b5d4bc845576562c8dfc5fc6c22b05e824d",
  "block": 19217027,
  "trx_in_block": 22,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-23T02:03:57",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "sely",
      "permlink": "re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180123t020353903z",
      "title": "",
      "body": "Great work @mytosin",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"mytosin\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "51e8407a645b96cda89e62664e3058de02105647",
  "block": 19204841,
  "trx_in_block": 36,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T15:54:30",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "16585.866946 VESTS"
    }
  ]
}

{
  "trx_id": "cb799bd1a121fa0cf74474219d80a9643998b292",
  "block": 19202582,
  "trx_in_block": 50,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T14:01:27",
  "op": [
    "comment",
    {
      "parent_author": "shreyasgune",
      "parent_permlink": "re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180122t115355665z",
      "author": "mytosin",
      "permlink": "re-shreyasgune-re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180122t140128373z",
      "title": "",
      "body": "Thank you @shreyasgune",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"shreyasgune\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "82f3635395b45c887b45c249befa73031ecd3da0",
  "block": 19202567,
  "trx_in_block": 30,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T14:00:42",
  "op": [
    "claim_reward_balance",
    {
      "account": "mytosin",
      "reward_steem": "0.000 STEEM",
      "reward_sbd": "8.220 SBD",
      "reward_vests": "3463.556950 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19200086,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 16,
  "timestamp": "2018-01-22T11:56:42",
  "op": [
    "author_reward",
    {
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "sbd_payout": "8.220 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3455.368827 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19200086,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 15,
  "timestamp": "2018-01-22T11:56:42",
  "op": [
    "comment_benefactor_reward",
    {
      "benefactor": "utopian.pay",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2302.896878 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19200086,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 12,
  "timestamp": "2018-01-22T11:56:42",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "4.094038 VESTS",
      "comment_author": "mytosin",
      "comment_permlink": "show-events-with-action-in-zabuto-calendar"
    }
  ]
}

{
  "trx_id": "9dad3ca0ac696c9c845bf15ce8889514aa50c8d9",
  "block": 19200054,
  "trx_in_block": 35,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T11:55:03",
  "op": [
    "vote",
    {
      "voter": "cifer",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 9000
    }
  ]
}

{
  "trx_id": "faf63a789e5469a21eb0bc522c3c7d815e1dcf07",
  "block": 19200032,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T11:53:57",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "author": "shreyasgune",
      "permlink": "re-mytosin-add-image-popup-to-your-site-using-magnific-popup-20180122t115355665z",
      "title": "",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}"
    }
  ]
}

{
  "trx_id": "8828418dcf1d911d4d7b81b52276b8696b754ec0",
  "block": 19200030,
  "trx_in_block": 15,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T11:53:51",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "title": "Add image popup to your site using Magnific Popup",
      "body": "#### What Will I Learn?\n- Adding image popup\n- Single image popup\n- Gallery image popup\n\n#### Requirements\n- Internet connection\n- Browser\n- Text editor\n\n#### Difficulty\n- Basic\n\n#### Tutorial Contents\n\n##### Download the library\nBefore we begin, we must download the library from GitHub:\n1. Open [https://github.com/dimsemenov/Magnific-Popup](https://github.com/dimsemenov/Magnific-Popup).\n2. Click **Clone or download**, it will open pop up.\n3. Click **Download ZIP**.\n![magnific.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png)\n4. Extract the **.zip** file and open **dist** directory.\n![Screenshot (49).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png)\n\n##### Download sample image\nFor this tutorial, we need some image for testing. You can use any image on your computer or you can download this sample image. [Original Image Source](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400).\n- **1.jpg**\n![1.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg)\n- **2.jpg**\n![2.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg)\n- **3.jpg**\n![3.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg)\n\n##### Starting project\n1. Create empty directory for our project. Then, you need to copy two files from **dist** directory to this empty directory. Those files are `jquery.magnific-popup.min.js` and `magnific-popup.css`.\n![Screenshot (50).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png)\n2. Create new `.html` file in our project directory, example `index.html`.\n![Screenshot (51).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png)\n3. Open `index.html` using text editor, write basic html layout, and load our `.css` and `.js` library. Magnific Popup require jQuery to function properly, so we will load jQuery using CDN. Always remember, required library should placed on top of library that depends on it.\n\t```\n\t<!DOCTYPE html>\n\t<html>\n\t\t<head>\n\t\t\t<title>Magnific Popup</title>\n\t\t\t<link href=\"magnific-popup.css\" rel=\"stylesheet\">\n\t\t</head>\n\t\t<body>\n\t\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t\t<script src=\"jquery.magnific-popup.min.js\"></script>\n\t\t</body>\n\t</html>\n\t```\n4. Open `index.html` using browser and check the console. If there is no error, we can continue to next step.\n![Screenshot (52).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png)\n5. Before continue to next step, move all the sample image to our project directory.\n![Screenshot (57).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png)\n\n##### Single image popup\n1. Edit our **index.html**. Add three `a` right below our `body` and give class name for each tag.\n\t```\n\t<a class=\"gallery\" href=\"1.jpg\">\n\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t</a>\n\t<a class=\"gallery\" href=\"2.jpg\">\n\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t</a>\n\t<a class=\"gallery\" href=\"3.jpg\">\n\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t</a>\n\t```\n2. To initialize the popup, add this `script` before closing `body`.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('.gallery').magnificPopup({\n\t\t\t\ttype: 'image'\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n3.  Refresh `index.html` on your browser and it should display this.\n![Screenshot (53).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png)\n4. Try to click one of the image and it will display the popup.\n![Screenshot (56).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png)\n\n##### Gallery image popup\nIn previous step, you can notice if we want to open another image while the popup still open, we must close the popup first, then click on another image. Now, we will add **previous** and **next** function to our popup.\n1. Edit our `index.html`. Make one `div` as parent and move all the `a` to inside this div. We also need to move the class name to our `div` and I will add title to our `a`.\n\t```\n\t<div class=\"gallery\">\n\t\t<a href=\"1.jpg\" title=\"1st image\">\n\t\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a href=\"2.jpg\" title=\"2nd image\">\n\t\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a href=\"3.jpg\" title=\"3rd image\">\n\t\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t</div>\n\t```\n2. Modify our `script` code by adding `delegate` and `gallery` options when initialize.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('.gallery').magnificPopup({\n\t\t\t\ttype: 'image',\n\t\t\t\tdelegate: 'a',\n\t\t\t\tgallery: {\n\t\t\t\t\tenabled: true\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n3. Refresh `index.html` on your browser and it will display same output but when you hovering the mouse cursor to the image preview, it will show the image title as we added.\n![title.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png)\n4. Try to click 1st image and it should display the popup. But, now we got our **previous** and **next** button. Try to click **next** button and it should display the 2nd image. It will also print our image count number and the title.\n![Screenshot (55).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png)\n5. You can also use **left** and **right** arrow for navigate to another image while the popup still open and press **esc** to close the popup.\n\n##### Final index.html code\n```\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title></title>\n\t\t<link href=\"magnific-popup.css\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<div class=\"gallery\">\n\t\t\t<a href=\"1.jpg\" title=\"1st image\">\n\t\t\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t\t<a href=\"2.jpg\" title=\"2nd image\">\n\t\t\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t\t<a href=\"3.jpg\" title=\"3rd image\">\n\t\t\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t</div>\n\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t<script src=\"jquery.magnific-popup.min.js\"></script>\n\t\t<script>\n\t\t\t$(document).ready(function () {\n\t\t\t\t$('.gallery').magnificPopup({\n\t\t\t\t\ttype: 'image',\n\t\t\t\t\tdelegate: 'a',\n\t\t\t\t\tgallery: {\n\t\t\t\t\t\tenabled: true\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t</script>\n\t</body>\n</html>\n```\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@mytosin/add-image-popup-to-your-site-using-magnific-popup\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":7544081,\"name\":\"Magnific-Popup\",\"full_name\":\"dimsemenov/Magnific-Popup\",\"html_url\":\"https://github.com/dimsemenov/Magnific-Popup\",\"fork\":false,\"owner\":{\"login\":\"dimsemenov\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"tutorials\",\"web\",\"popup\"],\"users\":[\"mytosin\"],\"links\":[\"https://github.com/dimsemenov/Magnific-Popup\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"moderator\":{\"account\":\"shreyasgune\",\"time\":\"2018-01-22T11:53:50.624Z\",\"reviewed\":true,\"pending\":false,\"flagged\":false}}"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19193474,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 10,
  "timestamp": "2018-01-22T06:25:57",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "4.094085 VESTS",
      "comment_author": "steven.tjg",
      "comment_permlink": "how-to-install-react-native-in-windows-for-android-development"
    }
  ]
}

{
  "trx_id": "6239e2b866bc5d9f332a8558c1221af602ff9652",
  "block": 19189322,
  "trx_in_block": 33,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T02:58:15",
  "op": [
    "custom_json",
    {
      "required_auths": [],
      "required_posting_auths": [
        "mytosin"
      ],
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"mytosin\",\"following\":\"nick.dev\",\"what\":[\"blog\"]}]"
    }
  ]
}

{
  "trx_id": "88a525c5912bfb73e55f6f179f2e4eeb58afaaae",
  "block": 19188967,
  "trx_in_block": 30,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T02:40:30",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "title": "Add image popup to your site using Magnific Popup",
      "body": "@@ -3029,17 +3029,16 @@\n g.%0A%09%60%60%60%0A\n-%09\n %09%3Ca clas\n@@ -3059,25 +3059,24 @@\n ef=%221.jpg%22%3E%0A\n-%09\n %09%09%3Cimg src=%22\n@@ -3108,32 +3108,30 @@\n ht=%22200px%22%3E%0A\n-%09\n %09%3C/a%3E%0A\n-%09\n %09%3Ca class=%22g\n@@ -3148,25 +3148,24 @@\n ef=%222.jpg%22%3E%0A\n-%09\n %09%09%3Cimg src=%22\n@@ -3197,32 +3197,30 @@\n ht=%22200px%22%3E%0A\n-%09\n %09%3C/a%3E%0A\n-%09\n %09%3Ca class=%22g\n@@ -3241,17 +3241,16 @@\n 3.jpg%22%3E%0A\n-%09\n %09%09%3Cimg s\n@@ -3286,25 +3286,24 @@\n ht=%22200px%22%3E%0A\n-%09\n %09%3C/a%3E%0A%09%60%60%60%0A2\n@@ -4691,17 +4691,16 @@\n e.%0A%09%60%60%60%0A\n-%09\n %09%3Cscript\n@@ -4693,33 +4693,32 @@\n %0A%09%60%60%60%0A%09%3Cscript%3E%0A\n-%09\n %09%09$(document).re\n@@ -4730,33 +4730,32 @@\n unction () %7B%0A%09%09%09\n-%09\n $('.gallery').ma\n@@ -4760,33 +4760,32 @@\n magnificPopup(%7B%0A\n-%09\n %09%09%09%09type: 'image\n@@ -4783,33 +4783,32 @@\n e: 'image',%0A%09%09%09%09\n-%09\n delegate: 'a',%0A%09\n@@ -4798,33 +4798,32 @@\n %09delegate: 'a',%0A\n-%09\n %09%09%09%09gallery: %7B%0A%09\n@@ -4818,33 +4818,32 @@\n gallery: %7B%0A%09%09%09%09%09\n-%09\n enabled: true%0A%09%09\n@@ -4840,39 +4840,35 @@\n d: true%0A\n-%09\n %09%09%09%09%7D%0A\n-%09%09%09%09%7D);%0A\n %09%09%09%7D);%0A\n-\n %09\n+%09%7D);%0A\n %09%3C/scrip\n",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":7544081,\"name\":\"Magnific-Popup\",\"full_name\":\"dimsemenov/Magnific-Popup\",\"html_url\":\"https://github.com/dimsemenov/Magnific-Popup\",\"fork\":false,\"owner\":{\"login\":\"dimsemenov\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"tutorials\",\"web\",\"popup\"],\"users\":[\"mytosin\"],\"links\":[\"https://github.com/dimsemenov/Magnific-Popup\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"]}"
    }
  ]
}

{
  "trx_id": "a38920bfa156c3b1919b43542a9e0c8f7e7143cb",
  "block": 19188881,
  "trx_in_block": 39,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T02:36:12",
  "op": [
    "comment",
    {
      "parent_author": "sely",
      "parent_permlink": "re-mytosin-show-events-with-action-in-zabuto-calendar-20180122t014102523z",
      "author": "mytosin",
      "permlink": "re-sely-re-mytosin-show-events-with-action-in-zabuto-calendar-20180122t023614674z",
      "title": "",
      "body": "Thanks @sely",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"sely\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "5e5aec097b1bbb05a34698567ac11413c8d922b4",
  "block": 19188774,
  "trx_in_block": 33,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T02:30:51",
  "op": [
    "vote",
    {
      "voter": "steven.tjg",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "7cfe07813e4057d7348742ef4098494b9ced1e1d",
  "block": 19187779,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-22T01:41:06",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "show-events-with-action-in-zabuto-calendar",
      "author": "sely",
      "permlink": "re-mytosin-show-events-with-action-in-zabuto-calendar-20180122t014102523z",
      "title": "",
      "body": "good post",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "0c5465b5e5ac1badf48b1fe5409ee8ec11d79559",
  "block": 19180338,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T19:28:54",
  "op": [
    "vote",
    {
      "voter": "alphacore",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "weight": 1100
    }
  ]
}

{
  "trx_id": "ec1306c86985f6d6640fd3062ce92d005e8f49a2",
  "block": 19175293,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T15:16:39",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "title": "Add image popup to your site using Magnific Popup",
      "body": "@@ -5191,16 +5191,22 @@\n ick 1st \n+image \n and it s\n",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":7544081,\"name\":\"Magnific-Popup\",\"full_name\":\"dimsemenov/Magnific-Popup\",\"html_url\":\"https://github.com/dimsemenov/Magnific-Popup\",\"fork\":false,\"owner\":{\"login\":\"dimsemenov\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"tutorials\",\"web\",\"popup\"],\"users\":[\"mytosin\"],\"links\":[\"https://github.com/dimsemenov/Magnific-Popup\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"]}"
    }
  ]
}

{
  "trx_id": "1233598679d2811827e8e2166b7a7487149e61db",
  "block": 19175234,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T15:13:42",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "title": "Add image popup to your site using Magnific Popup",
      "body": "@@ -1371,16 +1371,17 @@\n 9i.jpg)%0A\n+%0A\n ##### St\n@@ -2698,24 +2698,220 @@\n dwwcqih.png)\n+%0A5. Before continue to next step, move all the sample image to our project directory.%0A!%5BScreenshot (57).png%5D(https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png)\n %0A%0A##### Sing\n",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":7544081,\"name\":\"Magnific-Popup\",\"full_name\":\"dimsemenov/Magnific-Popup\",\"html_url\":\"https://github.com/dimsemenov/Magnific-Popup\",\"fork\":false,\"owner\":{\"login\":\"dimsemenov\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"tutorials\",\"web\",\"popup\"],\"users\":[\"mytosin\"],\"links\":[\"https://github.com/dimsemenov/Magnific-Popup\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516547593/lp8rud5h2oov2arerhz1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"]}"
    }
  ]
}

{
  "trx_id": "2a5d87b9653305e53953016cc07e4f27fc2ea588",
  "block": 19175101,
  "trx_in_block": 7,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T15:07:03",
  "op": [
    "comment_options",
    {
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "max_accepted_payout": "1000000.000 SBD",
      "percent_steem_dollars": 10000,
      "allow_votes": true,
      "allow_curation_rewards": true,
      "extensions": [
        [
          0,
          {
            "beneficiaries": [
              {
                "account": "utopian.pay",
                "weight": 2500
              }
            ]
          }
        ]
      ]
    }
  ]
}

{
  "trx_id": "2a5d87b9653305e53953016cc07e4f27fc2ea588",
  "block": 19175101,
  "trx_in_block": 7,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T15:07:03",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "add-image-popup-to-your-site-using-magnific-popup",
      "title": "Add image popup to your site using Magnific Popup",
      "body": "#### What Will I Learn?\n- Adding image popup\n- Single image popup\n- Gallery image popup\n\n#### Requirements\n- Internet connection\n- Browser\n- Text editor\n\n#### Difficulty\n- Basic\n\n#### Tutorial Contents\n\n##### Download the library\nBefore we begin, we must download the library from GitHub:\n1. Open [https://github.com/dimsemenov/Magnific-Popup](https://github.com/dimsemenov/Magnific-Popup).\n2. Click **Clone or download**, it will open pop up.\n3. Click **Download ZIP**.\n![magnific.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png)\n4. Extract the **.zip** file and open **dist** directory.\n![Screenshot (49).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png)\n\n##### Download sample image\nFor this tutorial, we need some image for testing. You can use any image on your computer or you can download this sample image. [Original Image Source](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400).\n- **1.jpg**\n![1.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg)\n- **2.jpg**\n![2.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg)\n- **3.jpg**\n![3.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg)\n##### Starting project\n1. Create empty directory for our project. Then, you need to copy two files from **dist** directory to this empty directory. Those files are `jquery.magnific-popup.min.js` and `magnific-popup.css`.\n![Screenshot (50).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png)\n2. Create new `.html` file in our project directory, example `index.html`.\n![Screenshot (51).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png)\n3. Open `index.html` using text editor, write basic html layout, and load our `.css` and `.js` library. Magnific Popup require jQuery to function properly, so we will load jQuery using CDN. Always remember, required library should placed on top of library that depends on it.\n\t```\n\t<!DOCTYPE html>\n\t<html>\n\t\t<head>\n\t\t\t<title>Magnific Popup</title>\n\t\t\t<link href=\"magnific-popup.css\" rel=\"stylesheet\">\n\t\t</head>\n\t\t<body>\n\t\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t\t<script src=\"jquery.magnific-popup.min.js\"></script>\n\t\t</body>\n\t</html>\n\t```\n4. Open `index.html` using browser and check the console. If there is no error, we can continue to next step.\n![Screenshot (52).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png)\n\n##### Single image popup\n1. Edit our **index.html**. Add three `a` right below our `body` and give class name for each tag.\n\t```\n\t\t<a class=\"gallery\" href=\"1.jpg\">\n\t\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a class=\"gallery\" href=\"2.jpg\">\n\t\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a class=\"gallery\" href=\"3.jpg\">\n\t\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t```\n2. To initialize the popup, add this `script` before closing `body`.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('.gallery').magnificPopup({\n\t\t\t\ttype: 'image'\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n3.  Refresh `index.html` on your browser and it should display this.\n![Screenshot (53).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png)\n4. Try to click one of the image and it will display the popup.\n![Screenshot (56).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png)\n\n##### Gallery image popup\nIn previous step, you can notice if we want to open another image while the popup still open, we must close the popup first, then click on another image. Now, we will add **previous** and **next** function to our popup.\n1. Edit our `index.html`. Make one `div` as parent and move all the `a` to inside this div. We also need to move the class name to our `div` and I will add title to our `a`.\n\t```\n\t<div class=\"gallery\">\n\t\t<a href=\"1.jpg\" title=\"1st image\">\n\t\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a href=\"2.jpg\" title=\"2nd image\">\n\t\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t\t<a href=\"3.jpg\" title=\"3rd image\">\n\t\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t\t</a>\n\t</div>\n\t```\n2. Modify our `script` code by adding `delegate` and `gallery` options when initialize.\n\t```\n\t\t<script>\n\t\t\t$(document).ready(function () {\n\t\t\t\t$('.gallery').magnificPopup({\n\t\t\t\t\ttype: 'image',\n\t\t\t\t\tdelegate: 'a',\n\t\t\t\t\tgallery: {\n\t\t\t\t\t\tenabled: true\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t</script>\n\t```\n3. Refresh `index.html` on your browser and it will display same output but when you hovering the mouse cursor to the image preview, it will show the image title as we added.\n![title.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png)\n4. Try to click 1st and it should display the popup. But, now we got our **previous** and **next** button. Try to click **next** button and it should display the 2nd image. It will also print our image count number and the title.\n![Screenshot (55).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png)\n5. You can also use **left** and **right** arrow for navigate to another image while the popup still open and press **esc** to close the popup.\n\n##### Final index.html code\n```\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title></title>\n\t\t<link href=\"magnific-popup.css\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<div class=\"gallery\">\n\t\t\t<a href=\"1.jpg\" title=\"1st image\">\n\t\t\t\t<img src=\"1.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t\t<a href=\"2.jpg\" title=\"2nd image\">\n\t\t\t\t<img src=\"2.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t\t<a href=\"3.jpg\" title=\"3rd image\">\n\t\t\t\t<img src=\"3.jpg\" width=\"200px\" height=\"200px\">\n\t\t\t</a>\n\t\t</div>\n\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t<script src=\"jquery.magnific-popup.min.js\"></script>\n\t\t<script>\n\t\t\t$(document).ready(function () {\n\t\t\t\t$('.gallery').magnificPopup({\n\t\t\t\t\ttype: 'image',\n\t\t\t\t\tdelegate: 'a',\n\t\t\t\t\tgallery: {\n\t\t\t\t\t\tenabled: true\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t</script>\n\t</body>\n</html>\n```\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@mytosin/add-image-popup-to-your-site-using-magnific-popup\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":7544081,\"name\":\"Magnific-Popup\",\"full_name\":\"dimsemenov/Magnific-Popup\",\"html_url\":\"https://github.com/dimsemenov/Magnific-Popup\",\"fork\":false,\"owner\":{\"login\":\"dimsemenov\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"tutorials\",\"web\",\"popup\"],\"links\":[\"https://github.com/dimsemenov/Magnific-Popup\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmRMSALFKejxfJuEFtbkyob4HSdwVVXqC8wpuNBkze15nB_1680x8400\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541196/yfveactkkqw1cv39dh1c.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516541343/nvhmyj0kops9de2s2tga.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543380/dicj6g8yjypd6frnhvdl.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543401/gizbktekyoafeny1gztw.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543423/hwf2p9gv4fqyn2qzvu9i.jpg\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542592/p3t2zf8mri7x29j26jx1.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516542689/bzqbv1tulsr9mr3vproy.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516543032/f5nkg6hesq5pydwwcqih.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516544533/ihoa21gsjgyetg6uj0aj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516546288/gekhnd9gugqvl2c3ljbe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545686/sivzsy3khtfczdiqgqx2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516545940/eqgralqlwi41ml2uytj8.png\"]}"
    }
  ]
}

{
  "trx_id": "3609efeed635857269934632042e132256e5d397",
  "block": 19163330,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T05:18:12",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "20051.611869 VESTS"
    }
  ]
}

{
  "trx_id": "4080752ffc464823fda9bf33114cd62d03b04f5c",
  "block": 19161688,
  "trx_in_block": 48,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-21T03:56:06",
  "op": [
    "claim_reward_balance",
    {
      "account": "mytosin",
      "reward_steem": "0.000 STEEM",
      "reward_sbd": "10.931 SBD",
      "reward_vests": "5189.670154 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19146867,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 11,
  "timestamp": "2018-01-20T15:34:48",
  "op": [
    "author_reward",
    {
      "author": "mytosin",
      "permlink": "add-calendar-to-your-site-using-zabuto-calendar",
      "sbd_payout": "10.919 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "5171.243886 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19146867,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 10,
  "timestamp": "2018-01-20T15:34:48",
  "op": [
    "comment_benefactor_reward",
    {
      "benefactor": "utopian.pay",
      "author": "mytosin",
      "permlink": "add-calendar-to-your-site-using-zabuto-calendar",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3447.495924 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19146867,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 6,
  "timestamp": "2018-01-20T15:34:48",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "8.188826 VESTS",
      "comment_author": "mytosin",
      "comment_permlink": "add-calendar-to-your-site-using-zabuto-calendar"
    }
  ]
}

{
  "trx_id": "dc3c8d98dd7730feabec96e8377f169617eefe29",
  "block": 19139538,
  "trx_in_block": 24,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-20T09:28:12",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "sely",
      "permlink": "happily-introducing-myself",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "c851c2b17b91dd914b5e03dae4defa003390798d",
  "block": 19109574,
  "trx_in_block": 45,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-19T08:28:36",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "aftaruannisa",
      "permlink": "hi-i-am-aftaru-annisa-graphic-designer-and-illustration-from-medan-indonesia-self-introduction",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19090068,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 5,
  "timestamp": "2018-01-18T16:13:06",
  "op": [
    "author_reward",
    {
      "author": "mytosin",
      "permlink": "b-and-w-photo-contest-ikea-swedish-meatballs",
      "sbd_payout": "0.012 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "6.142219 VESTS"
    }
  ]
}

{
  "trx_id": "96c8f13c6de6cbfbbafac429a89d66b45957ae23",
  "block": 19084030,
  "trx_in_block": 9,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-18T11:10:54",
  "op": [
    "vote",
    {
      "voter": "auliausu",
      "author": "mytosin",
      "permlink": "add-calendar-to-your-site-using-zabuto-calendar",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19044433,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 6,
  "timestamp": "2018-01-17T02:10:30",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "2.047566 VESTS",
      "comment_author": "steven.tjg",
      "comment_permlink": "la7a1paz"
    }
  ]
}

{
  "trx_id": "712199354cc3bca456b43b1cfe0f184576e5afd3",
  "block": 19039895,
  "trx_in_block": 46,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T22:23:30",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mytosin",
      "vesting_shares": "25247.800712 VESTS"
    }
  ]
}

{
  "trx_id": "4411067370cf8ac5fa65e3388ec59f150b73b704",
  "block": 19028639,
  "trx_in_block": 21,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T13:00:36",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "show-events-with-action-in-zabuto-calendar",
      "author": "utopian-io",
      "permlink": "re-mytosin-show-events-with-action-in-zabuto-calendar-20180116t130036698z",
      "title": "",
      "body": "### Hey @mytosin I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}"
    }
  ]
}

{
  "trx_id": "1042b2dbfcb7bac1e2b4497458029d181a6ccb08",
  "block": 19028638,
  "trx_in_block": 53,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T13:00:33",
  "op": [
    "vote",
    {
      "voter": "utopian-io",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 190
    }
  ]
}

{
  "trx_id": "e9f4c9e6a8a438357bbd443b5951b7ea4564788e",
  "block": 19026470,
  "trx_in_block": 41,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T11:12:09",
  "op": [
    "vote",
    {
      "voter": "omegacore",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "9861615ece8a7ee1796c6ab88b6affce3d7381b5",
  "block": 19023255,
  "trx_in_block": 25,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T08:31:21",
  "op": [
    "vote",
    {
      "voter": "sely",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "1ffe2324e1b04078d6b2c0ad825219bbd0e10e98",
  "block": 19023216,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T08:29:24",
  "op": [
    "vote",
    {
      "voter": "sely",
      "author": "mytosin",
      "permlink": "add-calendar-to-your-site-using-zabuto-calendar",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "1299ffd9e24b59918a2c202b3f133a7ef49a36b1",
  "block": 19020622,
  "trx_in_block": 3,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T06:19:42",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "title": "Show events with action in Zabuto Calendar",
      "body": "#### What Will I Learn?\n- Show events data to calendar\n- Add action when specific date clicked\n- Mark today date\n\n#### Requirements\n- Internet connection\n- Browser\n- Text editor\n- [Add calendar to your site using Zabuto Calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar)\n\n#### Difficulty\n- Basic\n\n#### Tutorial Contents\n##### Starting project\nBefore we begin, this is the starting project for our tutorial. You should check this [add basic calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar) tutorial first before continue to this tutorial.\n1. Project directory\n![Screenshot (41).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png)\n2. Code in `index.html`\n\t```\n\t<!DOCTYPE html>\n\t<html>\n\t\t<head>\n\t\t\t<title>Zabuto Calendar</title>\n\t\t\t<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\">\n\t\t\t<link href=\"zabuto_calendar.min.css\" rel=\"stylesheet\">\n\t\t</head>\n\t\t<body>\n\t\t\t<h1>Hello World</h1>\n\t\t\t<div id=\"calendar\" style=\"width: 500px; margin: 0 auto;\"></div>\n\t\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t\t<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>\n\t\t\t<script src=\"zabuto_calendar.min.js\"></script>\n\t\t\t<script>\n\t\t\t\t$(document).ready(function () {\n\t\t\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\t\t\tlanguage: 'en'\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t</script>\n\t\t</body>\n\t</html>\n\t```\n3. Browser output\n![Screenshot (42).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png)\n\n##### Events data property\nIn previous tutorial, we can change the language by passing an object to `zabuto_calendar()` initialize function. The object property is `language` and the value is `string` of the language code, example `id` (Indonesian) and `en` (English). For showing events data, we must set the `data` as property and the value is `array of objects`.\n\n##### Array of objects\nMany beginner got confuse of this. Array of objects is simply an normal array, but the elements are an object instead of string or integer. For example:\n1. This is an array of integers\n    ```\n    var days = [4, 5, 6];\n    ```\n2. This is an object\n    ```\n    var person = {\n        name: 'john',\n        age: 12\n    };\n    ```\n3. This is an array of objects\n\t```\n\tvar people = [\n\t\t{\n\t\t\t'name': 'tony',\n\t\t\t'age': 24\n\t\t},\n\t\t{\n\t\t\t'name': 'angel',\n\t\t\t'age': 23\n\t\t},\n\t\t{\n\t\t\t'name': 'paul',\n\t\t\t'age': 37\n\t\t}\n\t];\n\t```\n##### Array of objects property\nHere are the single object property for each `data` array:\n1. `date`: set the date for event\n2. `badge`: mark important event\n3. `title`: appear when hovering to specific date\n```\n{\n\t'date': '2018-01-14',\n\t'badge': true\n\t'title': 'Meeting with John'\n}\n```\n\n##### Add data to our calendar\n1. Edit `index.html` and insert the `data` array of objects.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\tlanguage: 'en',\n\t\t\t\tdata: [\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n2. Open `index.html` and it will display our events with light orange color. There will be extra dot mark with more solid orange color if the `badge` set to `true`. Try hovering to one of the event, and it will show the event title.\n![printscreen.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png)\n\n##### Add action onclick\n1. To add onclick action, we can add `action` property as function. Inside this function we can get the selected date and do any action. For example, we will alert our selected date.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\tlanguage: 'en',\n\t\t\t\tdata: [\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\taction: function () {\n\t\t\t\t\t//get the selected date\n\t\t\t\t\tvar date = $('#' + this.id).data('date');\n\t\t\t\t\t//alert the date\n\t\t\t\t\talert('You clicked date: ' + date);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n2. Refresh `index.html` and try to click any date. It should display an alert popup.\n![Screenshot (44).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png)\n\n##### Mark today date\nAdd `today` property and set the value to `true`, so today date will be marked as blue dot.\n\n##### Final index.html output\n![Screenshot (45).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png)\n\n##### Final index.html code\n```\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title>Zabuto Calendar</title>\n\t\t<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\">\n\t\t<link href=\"zabuto_calendar.min.css\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<h1>Hello World</h1>\n\t\t<div id=\"calendar\" style=\"width: 500px; margin: 0 auto;\"></div>\n\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>\n\t\t<script src=\"zabuto_calendar.min.js\"></script>\n\t\t<script>\n\t\t\t$(document).ready(function () {\n\t\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\t\tlanguage: 'en',\n\t\t\t\t\tdata: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\taction: function () {\n\t\t\t\t\t\t//get the selected date\n\t\t\t\t\t\tvar date = $('#' + this.id).data('date');\n\t\t\t\t\t\t//alert the date\n\t\t\t\t\t\talert('You clicked date: ' + date);\n\t\t\t\t\t},\n\t\t\t\t\ttoday: true\n\t\t\t\t});\n\t\t\t});\n\t\t</script>\n\t</body>\n</html>\n```\n\n#### Curriculum\n- [Add calendar to your site using Zabuto Calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar)\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@mytosin/show-events-with-action-in-zabuto-calendar\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":14255134,\"name\":\"calendar\",\"full_name\":\"zabuto/calendar\",\"html_url\":\"https://github.com/zabuto/calendar\",\"fork\":false,\"owner\":{\"login\":\"zabuto\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"tutorials\",\"web\",\"calendar\"],\"users\":[\"mytosin\"],\"links\":[\"https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png\"],\"moderator\":{\"account\":\"manishmike10\",\"time\":\"2018-01-16T04:01:17.345Z\",\"reviewed\":true,\"pending\":false,\"flagged\":false}}"
    }
  ]
}

{
  "trx_id": "67eba06bd16e0bc56434d8068ebfcea816591388",
  "block": 19020620,
  "trx_in_block": 30,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T06:19:36",
  "op": [
    "vote",
    {
      "voter": "alphacore",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 2500
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19018985,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 21,
  "timestamp": "2018-01-16T04:57:54",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "2.047657 VESTS",
      "comment_author": "andrixyz",
      "comment_permlink": "how-to-use-ttrangeslider-to-filter-price-value"
    }
  ]
}

{
  "trx_id": "d91ecf1a346351a2d8b3c609ffb2664d4e702928",
  "block": 19018449,
  "trx_in_block": 9,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T04:31:03",
  "op": [
    "claim_reward_balance",
    {
      "account": "mytosin",
      "reward_steem": "0.000 STEEM",
      "reward_sbd": "11.804 SBD",
      "reward_vests": "4187.540087 VESTS"
    }
  ]
}

{
  "trx_id": "65d2519b12b77a49aed786a96db64699b9527f59",
  "block": 19018410,
  "trx_in_block": 60,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T04:29:06",
  "op": [
    "comment",
    {
      "parent_author": "manishmike10",
      "parent_permlink": "re-mytosin-show-events-with-action-in-zabuto-calendar-20180116t040132636z",
      "author": "mytosin",
      "permlink": "re-manishmike10-re-mytosin-show-events-with-action-in-zabuto-calendar-20180116t042908506z",
      "title": "",
      "body": "Thank you @manishmike10",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"manishmike10\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "80533037b1ccb48f9e105369ecb215e5b582a2e6",
  "block": 19017859,
  "trx_in_block": 26,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T04:01:33",
  "op": [
    "comment",
    {
      "parent_author": "mytosin",
      "parent_permlink": "show-events-with-action-in-zabuto-calendar",
      "author": "manishmike10",
      "permlink": "re-mytosin-show-events-with-action-in-zabuto-calendar-20180116t040132636z",
      "title": "",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}"
    }
  ]
}

{
  "trx_id": "109c2248c8cfabec623e76f28396c13743543c91",
  "block": 19017854,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T04:01:18",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "title": "Show events with action in Zabuto Calendar",
      "body": "#### What Will I Learn?\n- Show events data to calendar\n- Add action when specific date clicked\n- Mark today date\n\n#### Requirements\n- Internet connection\n- Browser\n- Text editor\n- [Add calendar to your site using Zabuto Calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar)\n\n#### Difficulty\n- Basic\n\n#### Tutorial Contents\n##### Starting project\nBefore we begin, this is the starting project for our tutorial. You should check this [add basic calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar) tutorial first before continue to this tutorial.\n1. Project directory\n![Screenshot (41).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png)\n2. Code in `index.html`\n\t```\n\t<!DOCTYPE html>\n\t<html>\n\t\t<head>\n\t\t\t<title>Zabuto Calendar</title>\n\t\t\t<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\">\n\t\t\t<link href=\"zabuto_calendar.min.css\" rel=\"stylesheet\">\n\t\t</head>\n\t\t<body>\n\t\t\t<h1>Hello World</h1>\n\t\t\t<div id=\"calendar\" style=\"width: 500px; margin: 0 auto;\"></div>\n\t\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t\t<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>\n\t\t\t<script src=\"zabuto_calendar.min.js\"></script>\n\t\t\t<script>\n\t\t\t\t$(document).ready(function () {\n\t\t\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\t\t\tlanguage: 'en'\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t</script>\n\t\t</body>\n\t</html>\n\t```\n3. Browser output\n![Screenshot (42).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png)\n\n##### Events data property\nIn previous tutorial, we can change the language by passing an object to `zabuto_calendar()` initialize function. The object property is `language` and the value is `string` of the language code, example `id` (Indonesian) and `en` (English). For showing events data, we must set the `data` as property and the value is `array of objects`.\n\n##### Array of objects\nMany beginner got confuse of this. Array of objects is simply an normal array, but the elements are an object instead of string or integer. For example:\n1. This is an array of integers\n    ```\n    var days = [4, 5, 6];\n    ```\n2. This is an object\n    ```\n    var person = {\n        name: 'john',\n        age: 12\n    };\n    ```\n3. This is an array of objects\n\t```\n\tvar people = [\n\t\t{\n\t\t\t'name': 'tony',\n\t\t\t'age': 24\n\t\t},\n\t\t{\n\t\t\t'name': 'angel',\n\t\t\t'age': 23\n\t\t},\n\t\t{\n\t\t\t'name': 'paul',\n\t\t\t'age': 37\n\t\t}\n\t];\n\t```\n##### Array of objects property\nHere are the single object property for each `data` array:\n1. `date`: set the date for event\n2. `badge`: mark important event\n3. `title`: appear when hovering to specific date\n```\n{\n\t'date': '2018-01-14',\n\t'badge': true\n\t'title': 'Meeting with John'\n}\n```\n\n##### Add data to our calendar\n1. Edit `index.html` and insert the `data` array of objects.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\tlanguage: 'en',\n\t\t\t\tdata: [\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n2. Open `index.html` and it will display our events with light orange color. There will be extra dot mark with more solid orange color if the `badge` set to `true`. Try hovering to one of the event, and it will show the event title.\n![printscreen.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png)\n\n##### Add action onclick\n1. To add onclick action, we can add `action` property as function. Inside this function we can get the selected date and do any action. For example, we will alert our selected date.\n\t```\n\t<script>\n\t\t$(document).ready(function () {\n\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\tlanguage: 'en',\n\t\t\t\tdata: [\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\taction: function () {\n\t\t\t\t\t//get the selected date\n\t\t\t\t\tvar date = $('#' + this.id).data('date');\n\t\t\t\t\t//alert the date\n\t\t\t\t\talert('You clicked date: ' + date);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t</script>\n\t```\n2. Refresh `index.html` and try to click any date. It should display an alert popup.\n![Screenshot (44).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png)\n\n##### Mark today date\nAdd `today` property and set the value to `true`, so today date will be marked as blue dot.\n\n##### Final index.html output\n![Screenshot (45).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png)\n\n##### Final index.html code\n```\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title>Zabuto Calendar</title>\n\t\t<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\">\n\t\t<link href=\"zabuto_calendar.min.css\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<h1>Hello World</h1>\n\t\t<div id=\"calendar\" style=\"width: 500px; margin: 0 auto;\"></div>\n\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>\n\t\t<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>\n\t\t<script src=\"zabuto_calendar.min.js\"></script>\n\t\t<script>\n\t\t\t$(document).ready(function () {\n\t\t\t\t$('#calendar').zabuto_calendar({\n\t\t\t\t\tlanguage: 'en',\n\t\t\t\t\tdata: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'date': '2018-01-11',\n\t\t\t\t\t\t\t'badge': true,\n\t\t\t\t\t\t\t'title': 'Meeting with John'\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'date': '2018-01-13',\n\t\t\t\t\t\t\t'badge': false,\n\t\t\t\t\t\t\t'title': 'Go to market'\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\taction: function () {\n\t\t\t\t\t\t//get the selected date\n\t\t\t\t\t\tvar date = $('#' + this.id).data('date');\n\t\t\t\t\t\t//alert the date\n\t\t\t\t\t\talert('You clicked date: ' + date);\n\t\t\t\t\t},\n\t\t\t\t\ttoday: true\n\t\t\t\t});\n\t\t\t});\n\t\t</script>\n\t</body>\n</html>\n```\n\n#### Curriculum\n- [Add calendar to your site using Zabuto Calendar](https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar)\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@mytosin/show-events-with-action-in-zabuto-calendar\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":14255134,\"name\":\"calendar\",\"full_name\":\"zabuto/calendar\",\"html_url\":\"https://github.com/zabuto/calendar\",\"fork\":false,\"owner\":{\"login\":\"zabuto\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"tutorials\",\"web\",\"calendar\"],\"users\":[\"mytosin\"],\"links\":[\"https://steemit.com/utopian-io/@mytosin/add-calendar-to-your-site-using-zabuto-calendar\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992759/vwj7gxj61rstotvydjaj.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1515992911/aejo9ev94hyefv3offao.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516015418/jpmsifp7lgrfx3ftm13d.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016312/fhicssuwcwlbgywnnc6u.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1516016770/wm9qqnphsouyjw6xlzvw.png\"],\"moderator\":{\"account\":\"manishmike10\",\"time\":\"2018-01-16T04:01:17.345Z\",\"reviewed\":true,\"pending\":false,\"flagged\":false}}"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19017219,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 28,
  "timestamp": "2018-01-16T03:29:36",
  "op": [
    "author_reward",
    {
      "author": "mytosin",
      "permlink": "wrong-selected-category-dropdown-when-opening-search-via-url",
      "sbd_payout": "4.704 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1660.655345 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19017219,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 27,
  "timestamp": "2018-01-16T03:29:36",
  "op": [
    "comment_benefactor_reward",
    {
      "benefactor": "utopian.pay",
      "author": "mytosin",
      "permlink": "wrong-selected-category-dropdown-when-opening-search-via-url",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1105.738454 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 19017219,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 23,
  "timestamp": "2018-01-16T03:29:36",
  "op": [
    "curation_reward",
    {
      "curator": "mytosin",
      "reward": "10.238319 VESTS",
      "comment_author": "mytosin",
      "comment_permlink": "wrong-selected-category-dropdown-when-opening-search-via-url"
    }
  ]
}

{
  "trx_id": "5872809f3217acd80019b1623730b107f3b6d6ce",
  "block": 19016976,
  "trx_in_block": 13,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T03:17:24",
  "op": [
    "vote",
    {
      "voter": "mytosin",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "07e1440003ede60d80a80957974ccd053cd93234",
  "block": 19016688,
  "trx_in_block": 8,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-16T03:03:00",
  "op": [
    "vote",
    {
      "voter": "jaysilen07",
      "author": "mytosin",
      "permlink": "show-events-with-action-in-zabuto-calendar",
      "weight": 10000
    }
  ]
}