{"id":3534,"date":"2022-10-22T07:45:45","date_gmt":"2022-10-22T07:45:45","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3534"},"modified":"2023-06-10T11:34:27","modified_gmt":"2023-06-10T11:34:27","slug":"js-tutorial-the-gallery-by-unsplashs-api","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-the-gallery-by-unsplashs-api\/","title":{"rendered":"JS Tutorial &#8211; The Gallery by Unsplash&#8217;s API"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; JS Tutorial &#8211; A gallery powered by Unsplash&#8217;s API, with some fun details added.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - The Gallery by Unsplash's API\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/KKROGrV?default-tab=result&amp;theme-id=dark\" height=\"800\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/KKROGrV\"><br \/>\nJS Tutorial &#8211; The Gallery by Unsplash&#8217;s API<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let switching = false;\r\n\r\nfunction updateGallery() {\r\n  $('.gallery__core img, .gallery__bg img').attr('src',galleryItems[0].url);\r\n  $('.gallery__track').empty();\r\n  $.each(galleryItems,function(index,item){\r\n    $('.gallery__track').append('&lt;div class=\"gallery__track__item '+(index==0 ? 'active' : '')+'\"&gt;&lt;img src=\"'+item.thumb+'\" data-full=\"'+item.url+'\" alt=\"\"&gt;&lt;\/div&gt;');\r\n  });\r\n}\r\n\r\nfunction getNewImages() {\r\n  $.get('https:\/\/api.unsplash.com\/search\/photos?client_id=j0z73f4p5WNBe2OK28CHq-GY9kN2GxPj2DpS_bV6nFs&amp;page=1&amp;per_page=9&amp;orientation=squarish&amp;query='+$('.gallery__search input').val(),function(data){\r\n    let items = [];\r\n    $.each(data.results,function(index, item){\r\n      console.log(item);\r\n      let newItem = {\r\n        id: item.id,\r\n        url: item.urls.regular,\r\n        thumb: item.urls.thumb\r\n      }\r\n      items.push(newItem);\r\n    });\r\n    console.log(items);\r\n    galleryItems = items;\r\n    updateGallery();\r\n  });\r\n}\r\n\r\n$('.gallery__search input').on('keyup',debounce(() =&gt; getNewImages()));\r\n$('.gallery__track').on('click','.gallery__track__item',function(){\r\n  if (!switching) {\r\n    switching = true;\r\n    $(this).addClass('active').siblings().removeClass('active');\r\n    \/\/ animate in new core image and background image\r\n    const $oldBGImg = $('.gallery__bg img'); \r\n    const $oldImg = $('.gallery__core img');\r\n    const newImg = $(this).find('img').data('full');\r\n    const $newImg = $('&lt;img class=\"slide-in\" src=\"'+newImg+'\"&gt;');\r\n    const $newBGImg = $('&lt;img class=\"fade-in\" src=\"'+newImg+'\"&gt;');\r\n    $('.gallery__core').append($newImg);\r\n    $('.gallery__bg').append($newBGImg);\r\n    setTimeout(function(){\r\n      $newImg.addClass('shift-up');\r\n      $oldImg.addClass('shift-up');\r\n      $oldBGImg.addClass('fade-out');\r\n      $newBGImg.addClass('fading');\r\n      setTimeout(function(){\r\n        $('.gallery__core img').eq(0).remove();\r\n        $('.gallery__bg img').eq(0).remove();\r\n        $('.slide-in').removeClass('slide-in shift-up');\r\n        $('.fade-in').removeClass('fade-in fading');\r\n        switching = false;\r\n      },400);\r\n    },10);\r\n  }\r\n});\r\n\r\nlet galleryItems = [\r\n    {\r\n        \"id\": \"Id2f5Y9dq1g\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1439189614644-ff891ff78aa8?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw1fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1439189614644-ff891ff78aa8?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw1fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"pzC7JfukhUM\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1565475668349-0130bea1059b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwxfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1565475668349-0130bea1059b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwxfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"ystlZBTbKiY\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1562207520-19c0ebd8264f?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwyfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1562207520-19c0ebd8264f?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwyfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"DOb-2jd0sbc\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1460221584296-7b799eba9475?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwzfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1460221584296-7b799eba9475?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHwzfHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"k_4m9_0PO3Q\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1454663501801-75a30ab23c6a?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw0fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1454663501801-75a30ab23c6a?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw0fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"NFB5zdUvb-c\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1515739887843-45210db2c01a?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw2fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1515739887843-45210db2c01a?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw2fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"xsFxnW9_KZ0\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1574786527860-f2e274867c91?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw3fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1574786527860-f2e274867c91?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw3fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"dSTalS8QzTg\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1570032257806-7272438f38da?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw4fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1570032257806-7272438f38da?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw4fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    },\r\n    {\r\n        \"id\": \"z7tQUhBVOrY\",\r\n        \"url\": \"https:\/\/images.unsplash.com\/photo-1447755086558-cb9e3830d677?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw5fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080\",\r\n        \"thumb\": \"https:\/\/images.unsplash.com\/photo-1447755086558-cb9e3830d677?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwyNzI5Njd8MHwxfHNlYXJjaHw5fHxtb3VudGFpbnN8ZW58MHwyfHx8MTY0OTc4ODEwNg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=200\"\r\n    }\r\n];\r\n\r\nupdateGallery(); \/\/ once on load\r\n\r\nfunction debounce(func, timeout = 300){\r\n  let timer;\r\n  return (...args) =&gt; {\r\n    clearTimeout(timer);\r\n    timer = setTimeout(() =&gt; { func.apply(this, args); }, timeout);\r\n  };\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; JS Tutorial &#8211; A gallery powered by Unsplash&#8217;s API, <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-the-gallery-by-unsplashs-api\/\" title=\"JS Tutorial &#8211; The Gallery by Unsplash&#8217;s API\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[264,263,360,103,227],"newstopic":[],"class_list":{"0":"post-3534","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-javascript-tutorial","10":"tag-js-tutorial","11":"tag-unsplashs-api","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3534"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3534\/revisions"}],"predecessor-version":[{"id":3538,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3534\/revisions\/3538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3535"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3534"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}