Skip to content

Instantly share code, notes, and snippets.

@Leming1488

Leming1488/images_tools.js

Last active October 26, 2023 12:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Leming1488/a0057c92fd5cbdac72a3943e91df6abb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Leming1488/a0057c92fd5cbdac72a3943e91df6abb to your computer and use it in GitHub Desktop.
Download ZIP
images
Raw
images_tools.js
const style = document.createElement('style');
style.innerHTML = `
.image-container {
position: relative;
overflow: hidden;
width: auto;
height: auto;
display: inline-block;
}
.image-container:hover .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
}
.image-container .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
padding: 20px 20px;
display: flex;
flex-direction: column;
}
.image-container:hover .info {
transform: translateY(0);
}
.image-container .book-btn {
padding: 10px 30px;
background-color: #ed6142;
font-family: Roboto, -apple-system, "system-ui", "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Ubuntu, roboto, noto, arial, sans-serif;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
font-weight: bold;
border-radius: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.image-container .book-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
background-color: #f77a5f;
}
.image-text {
color: white;
text-align: center;
font-size: 22px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.calendar-icon {
margin-right: 10px;
}
`;
document.head.appendChild(style);
const AGODA_LOGO = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<g clip-path="url(#clip0_6087_45097)">
<path d="M7.13519 20.9763C6.1954 20.9763 5.42822 21.7497 5.42822 22.6971C5.42822 23.6445 6.1954 24.4178 7.13519 24.4178C8.07499 24.4178 8.84216 23.6445 8.84216 22.6971C8.84216 21.7497 8.07499 20.9763 7.13519 20.9763Z" fill="#FCB716"/>
<path d="M2.35541 20.9763C1.41562 20.9763 0.648438 21.7497 0.648438 22.6971C0.648438 23.6445 1.41562 24.4178 2.35541 24.4178C3.2952 24.4178 4.06238 23.6445 4.06238 22.6971C4.06238 21.7497 3.2952 20.9763 2.35541 20.9763Z" fill="#EE363F"/>
<path d="M12.0854 20.9763C11.1456 20.9763 10.3784 21.7497 10.3784 22.6971C10.3784 23.6445 11.1456 24.4178 12.0854 24.4178C13.0252 24.4178 13.7924 23.6445 13.7924 22.6971C13.7924 21.7497 13.0252 20.9763 12.0854 20.9763Z" fill="#07AF56"/>
<path d="M21.6445 20.9763C20.7047 20.9763 19.9375 21.7497 19.9375 22.6971C19.9375 23.6445 20.7047 24.4178 21.6445 24.4178C22.5843 24.4178 23.3514 23.6445 23.3514 22.6971C23.3514 21.7497 22.5843 20.9763 21.6445 20.9763Z" fill="#04A9DF"/>
<path d="M16.6943 20.9763C15.7545 20.9763 14.9873 21.7497 14.9873 22.6971C14.9873 23.6445 15.7545 24.4178 16.6943 24.4178C17.6341 24.4178 18.4012 23.6445 18.4012 22.6971C18.4012 21.7497 17.6341 20.9763 16.6943 20.9763Z" fill="#A1479A"/>
<path d="M3.08105 9.30956C3.08105 4.33657 7.04122 0.585327 11.9232 0.585327C16.8563 0.585327 20.7653 4.30216 20.7653 9.27514V16.9153C20.7653 17.6896 20.2361 18.2403 19.4168 18.2403C18.5803 18.2403 18.0682 17.7068 18.0682 16.9153V14.6783H17.9317C16.8904 16.4679 14.8079 18.0166 11.7354 18.0166C6.99002 18.0338 3.08105 14.317 3.08105 9.30956ZM18.1536 9.30956C18.1536 5.73039 15.4737 3.0288 11.9232 3.0288C8.37266 3.0288 5.69272 5.73039 5.69272 9.30956C5.69272 12.8887 8.37266 15.5903 11.9232 15.5903C15.4737 15.5903 18.1536 12.8887 18.1536 9.30956Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_6087_45097">
<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>
`;
const BOOKING_LOGO = `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3040_793)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3.07192C16 1.37648 14.6532 0 12.9951 0H3.00494C1.34681 0 0 1.37648 0 3.07192V12.9279C0 14.6229 1.34681 15.9999 3.00495 15.9999H12.9951C14.6532 15.9999 16 14.6229 16 12.9279V3.07192Z" fill="#0C3B7C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 9.93994H7.9915V15.9999H0.000494138L0.000488281 9.93994Z" fill="#0C3B7C"/>
<path d="M7.2716 10.5905L5.98295 10.5892V9.0136C5.98295 8.67695 6.11065 8.50175 6.3924 8.4617H7.2716C7.8986 8.4617 8.3042 8.86595 8.3042 9.5202C8.3042 10.1922 7.9089 10.5898 7.2716 10.5905ZM5.98295 6.34085V5.9261C5.98295 5.5632 6.1331 5.39065 6.46235 5.3683H7.12205C7.68745 5.3683 8.02635 5.71415 8.02635 6.2936C8.02635 6.73455 7.794 7.2497 7.1426 7.2497H5.98295V6.34085ZM8.9171 7.9131L8.68415 7.77925L8.8876 7.6014C9.1244 7.3934 9.521 6.9255 9.521 6.11835C9.521 4.88207 8.5834 4.08477 7.13235 4.08477H5.4766V4.08411H5.2879C4.85791 4.10052 4.51328 4.45815 4.50879 4.90044V11.9154H7.16505C8.77785 11.9154 9.8188 11.0177 9.8188 9.62715C9.8188 8.8784 9.4825 8.2386 8.9171 7.9131Z" fill="white"/>
<path d="M10.5106 10.9464C10.5106 10.4105 10.9333 9.97696 11.4542 9.97696C11.9763 9.97696 12.4009 10.4105 12.4009 10.9464C12.4009 11.4816 11.9763 11.9158 11.4541 11.9158C10.9333 11.9158 10.5106 11.4816 10.5106 10.9464Z" fill="#00BAFC"/>
</g>
<defs>
<clipPath id="clip0_3040_793">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
`;
const GETYOURGUIDE_LOGO = `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3040_816)">
<path d="M6.88585 15.916C9.11824 15.916 11.0757 14.7798 12.2337 13.0318V15.601H15.2655V7.05383H7.13895V10.0018H10.5494C10.2344 11.5805 8.84329 12.8023 7.15898 12.8023C5.2853 12.8023 3.76852 11.2855 3.76852 9.075V6.80073C3.76852 4.63207 5.38909 3.03153 7.66336 3.03153C9.43143 3.03153 11.0101 4.00023 11.5364 5.41141L14.7374 4.29521C13.8525 1.60032 10.9901 -0.0839844 7.68521 -0.0839844C3.51724 -0.0839844 0.399902 2.71652 0.399902 6.80073V9.075C0.401723 13.0099 3.30601 15.916 6.88585 15.916Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3040_816">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
`;
const VIATOR_LOGO = `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3040_94)">
<path d="M12.6001 5.9086C14.257 5.9086 15.6001 4.56545 15.6001 2.9086C15.6001 1.25175 14.257 -0.0914001 12.6001 -0.0914001C10.9432 -0.0914001 9.6001 1.25175 9.6001 2.9086C9.6001 4.56545 10.9432 5.9086 12.6001 5.9086Z" fill="white"/>
<path d="M9.29405 15.9086L10.7999 12.4788L5.45786 0.308594H0.399902L7.2478 15.9086H9.29405Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3040_94">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
`;
const imageUrlsData = { 1: [
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Little-India-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Street-in-Singapore-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Public-transport-in-Singapore--800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/durian-in-singapore-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Singapore-skyline-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/The-Singapore-Flyer-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Gardens-by-the-Bay-and-Marina-Bay-Sands-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/The-Marina-Bay-Sands-observation-2-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Singapores-Chinatown-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/The-Merlion-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Singapore-skyline-by-night-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Supertree-show--800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Fort-Canning-Park-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/beach-in-Sinagpore-sentoza-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/[email protected]",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/The-Marina-Bay-Sands-observation--800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/TreeTop-Walk-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/[email protected]",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Singapore-on-a-budget-800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Helix-Bridge--800x518.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/08/Homegorund-coffee-roasters-2-800x518.jpg.webp"
],
2: [
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/06/Sunset-on-Phu-Quoc-Island-Vietnam.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/Dirt-road-Phu-Quoc.jpg.webp",
"https://pix8.agoda.net/hotelImages/109/10954830/10954830_19121411100085840782.jpg?ca=9&ce=1&s=800x600",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/Dirt-road-Phu-Quoc.jpg.webp",
"https://pix6.agoda.net/hotelImages/2577124/-1/fc86bb1219f9ef11bb63eaee7a516fea.jpg?s=960x720",
"https://pix6.agoda.net/hotelImages/96572/-1/0b54e9cca7e0b6cff6189927c0efdbcd.jpg?s=960x720",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/Sao-Beach-on-Phu-Quoc-Island.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/An-Thoi-Phu-Quoc.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/06/Fishing-boats-during-sunset-Phu-Quoc.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/04/Dinh-Cau-Rock-and-Temple-Phu-Quoc-phenomenalglobe.com_.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/06/Banh-Xeo-in-Ganh-Dau-village-on-Phu-Quoc-island.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/Kiki-Coconut-Phu-Quoc.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2015/10/Bai-Thom.jpg.webp"
],
3: [
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Miyajima-island-Mount-Misen-Panorama-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Famous-cherry-blossoms-Japan-Hokkaido-e1479152766105.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/03/Bullet-train-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/06/Michi-no-Eki-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/06/Camping-in-Japan-Hokkaido.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2019/08/Shibuya-crossing-in-Tokyo-from-above.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Jigokudani-Hell-Valley-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Cold-Hokkaido-Japan-dam.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Miyajima-island-floating-Torii-gate-in-the-water-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Deer-in-Nara-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Vermillion-Kongobu-ji-temple-Mount-Koya-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/12/View-from-top-of-Mount-Yakedake-Japanese-Alps-Kamikochi-e1482922201334.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Kenruko-Garden-Kanazawa-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Shirakawa-go-village-in-Japanese-Alps-e1522854129720.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/02/Old-shops-in-Takayama-village-Japanese-Alps-e1486899111602.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Kamikochi-Japanese-Alps.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Matsumoto-Castle-Japanese-Alps-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Noboribetsu-Hokkaido-volcanic-activity-e1479134763282.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2019/12/Senso-Ji-Temple-in-Tokyo.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/12/Kinkakuji-temple-Golden-Pavilion-Kyoto-Japan-e1482324134894.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/05/Osaka-castle-with-cherry-blossoms.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/01/Shirakawa-go-Japanese-Alps.jpg.webp"
],
4: [
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/1-Month-In-Taiwan-Itinerary-And-Travel-Map.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/06/Chang-Kai-Shek-Memorial-Hall-Taipei-Taiwan-Things-To-Do-In-Taipei-Things-To-Do-In-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Dry-beef-noodle-Kaohsiung-Taiwan-best-things-to-eat-in-Taiwan-must-try-dishes-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/How-to-get-around-in-Kaohsiung-Taiwan-Kaohsiung-Public-Bike.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Things-to-do-in-Taiwan-Places-you-must-visit-in-Taiwan-Bucketlist-places-in-Taiwan-Qingshui-Cliffs-Taiwan-East-Coast.jpg.webp",
"https://pix8.agoda.net/hotelImages/112/1126916/1126916_17060712090053521369.jpg?ca=6&ce=1&s=800x600",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Kaohsiung-3-Day-Itinerary-Where-To-Go-Eat-And-Sleep.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Things-to-do-in-Taiwan-Places-you-must-visit-in-Taiwan-Bucketlist-places-in-Taiwan-Kenting-National-Park.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Taiwan-Itinerary-what-to-do-and-see-in-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/01/Skyline-Taichung.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Sun-Moon-Lake-in-Taiwan-1-month-itinerary-how-to-travel-in-Taiwan-1-e1496152575682.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/06/Taipei-skyline-at-dusk.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/06/National-Palace-Museum-Taipei-Taiwan-how-much-is-the-entrance-fee.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/05/Things-to-do-in-Taipei-itinerary-travel-to-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/06/Daan-Forest-Park-Taipei-lovely-park-for-a-picknick.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/02/Sun-Moon-Lake-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/08/Qingshui-Cliffs-Taiwan-Top-Things-To-See-And-Do-in-Hualien.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2017/07/Rent-a-scooter-in-Kenting-National-Park-itinerary-Taiwan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/01/Gaomei-Wetlands-Taichung.jpg.webp"
],
5: [
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Hokkaido.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/08/Foot-bath-in-Oyunumagawa-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2020/03/Bullet-train-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Famous-cherry-blossoms-Japan-Hokkaido-e1479152766105.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2019/12/Rent-a-car-in-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Nature-trail-Lake-Shikotsu-Hokkaido-Japan-e1479153723287.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/06/Camping-in-Japan-Hokkaido.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Jigokudani-Hell-Valley-Hokkaido-Japan-e1479153812977.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Noboribetsu-Hokkaido-volcanic-activity-e1479134763282.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Lake-Kuttara-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Lake-Toya-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Hokkaido-regional-gifts-from-a-stranger-e1479155840347.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Heavy-rain-on-Hokkaido-e1479156146600.jpg.webp",
"https://pix8.agoda.net/hotelImages/2996856/-1/1bdf4125d22c379a1ebf72d264e79080.jpg?ca=7&ce=1&s=960x720",
"https://pix8.agoda.net/hotelImages/7970172/-1/ae83a9e31c2bc5fec99939f23b25c251.jpg?ca=14&ce=1&s=960x720",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Gory%C5%8Dkaku-Castle-Hokkaido-Japan-cherry-blossom-viewing-Sakura-e1479157789697.jpg",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Hakodate-Mountain-walking-trails-Hokkaido-Japan-e1479157925313.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Hakodate-Old-Town-Hokkaido-Japan-e1479157401781.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Onuma-Quasi-National-Park-Hokkaido-Japan-e1479158362144.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Fireworks-Lake-Toya-Toyako-Hokkaido-Japan-e1479159899829.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/06/Road-trip-driving-on-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/06/Furano-Maze-Soba-Tempura.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Cheese-factory-Furana-Hokkaido-Japan-e1479162124227.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Furano-wine-Hokkaido-Japan-e1479162357504.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Wine-fields-Furano-Hokkaido-Japan-e1479196526665.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Lavender-Farm-Tomita-Furano-Hokkaido-Japan-e1479196679247.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Blue-pool-Furano-Hokkaido-Japan-e1479199271424.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Furano-valley-Hokkaido-Japan-e1479198959106.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Glass-forest-Japan-Hokkaido-Furano-e1479199562239.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/01/Hiking-in-snow-at-Asahidake-National-Park-Hokkaido-Japan-phenomenalglobe.com_.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/11/Ryusei-no-taki-and-Ginga-no-taki-waterfalls-Hokkaido-Japan-e1479207151473.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Cold-Hokkaido-Japan-dam-e1479206977310.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/08/Marimo-souvenir-Lake-Akan-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/08/Lake-Akan-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/08/Marimo-Lake-Akan-Hokkaido-Japan.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2016/10/Akan-National-Park-Lake-Onneto-Hokkaido-North-Japan-e1479207812889.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/01/hokkaido-sapporo-snow-festival.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/01/shiretoko-national-park-hokkaido-phenomenalglobe.com_.jpg.webp",
"https://j9x8v9h6.rocketcdn.me/wp-content/uploads/2023/01/otaru-canal-hokkaido-phenomenalglobe.com_.jpg.webp"
]};
const toursData = {
1: {
destination: "Singapore",
options: {
// информация о турах для Сингапура
getYourGuide: {
text: "🚀 Explore the vibrant city of Singapore with a variety of tours and activities",
url: "https://tp.media/r?marker=361790&trs=255359&p=3965&u=https%3A%2F%2Fwww.getyourguide.com%2Fsingapore-l170%2F&campaign_id=108",
buttonText: "Book a tour on GetYourGuide",
logo: GETYOURGUIDE_LOGO,
colors: {
brand: '#ED6142',
contrast: '#fff',
},
campaignId: "108"
},
viator: {
text: "🌟 Discover Singapore with a wide selection of tours and experiences",
url: "https://tp.media/r?marker=361790&trs=255359&p=1922&u=https%3A%2F%2Fwww.viator.com%2Fsearch%2FSingapore&campaign_id=47",
buttonText: "Find tours on Viator",
logo: VIATOR_LOGO,
colors: {
brand: '#32696C',
contrast: '#fff',
},
campaignId: "47"
},
booking: {
text: "🏨 Find the best hotels and places to stay in Singapore for your visit",
url: "https://tp.media/r?marker=361790&trs=255359&p=2076&u=https%3A%2F%2Fwww.booking.com%2Fsearchresults.html%3Fcity%3D-73635&campaign_id=84",
buttonText: "Book your stay on Booking.com",
logo: BOOKING_LOGO,
colors: {
brand: '#0C3B7C',
contrast: '#fff',
},
campaignId: "84"
},
agoda: {
text: "🛏️ Browse through a variety of accommodation options in Singapore",
url: "https://tp.media/r?marker=361790&trs=255359&p=2854&u=https%3A%2F%2Fwww.agoda.com%2Fcity%2Fsingapore-sg.html&campaign_id=104",
buttonText: "Find accommodations on Agoda",
logo: AGODA_LOGO,
colors: {
brand: '#20284A',
contrast: '#fff',
},
campaignId: "104"
}
}
},
2: {
destination: "Japan",
options: {
getYourGuide: {
text: "🚀 Explore the diverse landscapes and rich culture of Japan",
url: "https://tp.media/r?marker=361790&trs=255359&p=3965&u=https%3A%2F%2Fwww.getyourguide.com%2Fjapan-l169034%2F&campaign_id=108",
buttonText: "Book a tour on GetYourGuide",
logo: GETYOURGUIDE_LOGO,
colors: {
brand: '#ED6142',
contrast: '#fff',
},
campaignId: "108"
},
viator: {
text: "🌟 Discover the unique traditions and modern wonders of Japan",
url: "https://tp.media/r?marker=361790&trs=255359&p=1922&u=https%3A%2F%2Fwww.viator.com%2Fsearch%2FJapan&campaign_id=47",
buttonText: "Find tours on Viator",
logo: VIATOR_LOGO,
colors: {
brand: '#32696C',
contrast: '#fff',
},
campaignId: "47"
},
booking: {
text: "🏨 Find the best hotels and places to stay in Japan for your visit",
url: "https://tp.media/r?marker=361790&trs=255359&p=2076&u=https%3A%2F%2Fwww.booking.com%2Fcountry%2Fjp.html%3Faid%3D1610687%3Blabel%3Djp-h3at6Wyqdot0mUZrSJcv1wS379694667071%3Apl%3Ata%3Ap1%3Ap2%3Aac%3Aap%3Aneg%3Afi%3Atiaud-146342137510%3Akwd-5690570968%3Alp9074417%3Ali%3Adec%3Adm%3Appccp%3DUmFuZG9tSVYkc2RlIyh9YfpWGnRw6lOGgfEoJVv7zYo%3Bws%3D%26gad%3D1%26gclid%3DCjwKCAjw-eKpBhAbEiwAqFL0mrrwVHlQLC05dCD1uy5PoOvKhOC6McT_OwIIvg4VUr83jGIxocJA_xoC-hQQAvD_BwE&campaign_id=84",
buttonText: "Book your stay on Booking.com",
logo: BOOKING_LOGO,
colors: {
brand: '#0C3B7C',
contrast: '#fff',
},
campaignId: "84"
},
agoda: {
text: "🛏️ Browse a wide variety of accommodation options in Japan to find the perfect place for your stay",
url: "https://tp.media/r?marker=361790&trs=255359&p=2854&u=https%3A%2F%2Fwww.agoda.com%2Fcountry%2Fjapan.html&campaign_id=104",
buttonText: "Find accommodations on Agoda",
logo: AGODA_LOGO,
colors: {
brand: '#20284A',
contrast: '#fff',
},
campaignId: "104"
}
}
},
3: { destination: "Phu Quoc",
options: {
getYourGuide: {
text: "🚀 Explore the vibrant island of Phu Quoc with a variety of tours and activities",
url: "https://tp.media/r?marker=361790&trs=255359&p=3965&u=https%3A%2F%2Fwww.getyourguide.com%2Fphu-quoc-l1219%2F&campaign_id=108",
buttonText: "Book a tour on GetYourGuide",
logo: GETYOURGUIDE_LOGO,
colors: {
brand: '#ED6142',
contrast: '#fff',
},
campaignId: "108"
},
viator: {
text: "🌟 Discover Phu Quoc with a wide selection of tours and experiences",
url: "https://tp.media/r?marker=361790&trs=255359&p=1922&u=https%3A%2F%2Fwww.viator.com%2Fsearch%2FPhu-Quoc&campaign_id=47",
buttonText: "Find tours on Viator",
logo: VIATOR_LOGO,
colors: {
brand: '#32696C',
contrast: '#fff',
},
campaignId: "47"
},
booking: {
text: "🏨 Find the best hotels and places to stay in Phu Quoc for your visit",
url: "https://tp.media/r?marker=361790&trs=255359&p=2076&u=https%3A%2F%2Fwww.booking.com%2Fsearchresults.html%3Fcity%3D-3726177&campaign_id=84",
buttonText: "Book your stay on Booking.com",
logo: BOOKING_LOGO,
colors: {
brand: '#0C3B7C',
contrast: '#fff',
},
campaignId: "84"
},
agoda: {
text: "🛏️ Browse a wide variety of accommodation options on the enchanting island of Phu Quoc",
url: "https://tp.media/r?marker=361790&trs=255359&p=2854&u=https%3A%2F%2Fwww.agoda.com%2Fcity%2Fphu-quoc-island-vn.html&campaign_id=104",
buttonText: "Find accommodations on Agoda",
logo: AGODA_LOGO,
colors: {
brand: '#20284A',
contrast: '#fff',
},
campaignId: "104"
}
}
},
4: {
destination: "Taiwan",
options: {
getYourGuide: {
text: "🚀 Explore the vibrant culture and stunning landscapes of Taiwan with a variety of tours and activities...",
url: "https://tp.media/r?marker=361790&trs=255359&p=3965&u=https%3A%2F%2Fwww.getyourguide.com%2Ftaiwan-l169043%2F&campaign_id=108",
buttonText: "Book a tour on GetYourGuide",
logo: GETYOURGUIDE_LOGO,
colors: {
brand: '#ED6142',
contrast: '#fff',
},
campaignId: "108"
},
viator: {
text: "🌟 Discover Taiwan's rich history, delicious cuisine, and lush landscapes with a wide selection of tours and experiences",
url: "https://tp.media/r?marker=361790&trs=255359&p=1922&u=https%3A%2F%2Fwww.viator.com%2Fsearch%2FTaiwan&campaign_id=47",
buttonText: "Find tours on Viator",
logo: VIATOR_LOGO,
colors: {
brand: '#32696C',
contrast: '#fff',
},
campaignId: "47"
},
booking: {
text: "🏨 Find the best hotels and places to stay in Taiwan for your visit",
url: "https://tp.media/r?marker=361790&trs=255359&p=2076&u=https%3A%2F%2Fwww.booking.com%2Fcountry%2Ftw.en.html%3Faid%3D1610687%3Blabel%3Dtw-xKuLt1ItCOGH3XDsHT113QS379632760039%3Apl%3Ata%3Ap1%3Ap2%3Aac%3Aap%3Aneg%3Afi%3Atiaud-297601666555%3Akwd-301631789500%3Alp9074417%3Ali%3Adec%3Adm%3Appccp%3DUmFuZG9tSVYkc2RlIyh9YfpWGnRw6lOGgfEoJVv7zYo%3Bws%3D%26gad%3D1%26gclid%3DCjwKCAjw-eKpBhAbEiwAqFL0mhPCk04rfxUJfoHPRulJrLjMWVO7WjEvU4z4bakLycPe8pmXQOQ7XhoC7RkQAvD_BwE&campaign_id=84",
buttonText: "Book your stay on Booking.com",
logo: BOOKING_LOGO,
colors: {
brand: '#0C3B7C',
contrast: '#fff',
},
campaignId: "84"
},
agoda: {
text: "🛏️ Browse a wide variety of accommodation options across Taiwan to find the perfect place for your stay",
url: "https://tp.media/r?marker=361790&trs=255359&p=2854&u=https%3A%2F%2Fwww.agoda.com%2Fcountry%2Ftaiwan.html&campaign_id=104",
buttonText: "Find accommodations on Agoda",
logo: AGODA_LOGO,
colors: {
brand: '#20284A',
contrast: '#fff',
},
campaignId: "104"
}
}
},
5: {
destination: "Hokkaido",
options: {
getYourGuide: {
text: "🚀 Explore the breathtaking landscapes and unique culture of Hokkaido",
url: "https://tp.media/r?marker=361790&trs=255359&p=3965&u=https%3A%2F%2Fwww.getyourguide.com%2Fhokkaido-region-japan-l2431%3Fsort%3Dpopularity%26order%26searchContext%3DLOCATIONS%26p%3D1%26activeTab%3Dbase&campaign_id=108",
buttonText: "Book a tour on GetYourGuide",
logo: GETYOURGUIDE_LOGO,
colors: {
brand: '#ED6142',
contrast: '#fff',
},
campaignId: "108"
},
viator: {
text: "🌟 Discover Hokkaido's stunning natural beauty, from its volcanoes and hot springs to its vast wilderness",
url: "https://tp.media/r?marker=361790&trs=255359&p=1922&u=https%3A%2F%2Fwww.viator.com%2Fsearch%2FHokkaido&campaign_id=47",
buttonText: "Find tours on Viator",
logo: VIATOR_LOGO,
colors: {
brand: '#32696C',
contrast: '#fff',
},
campaignId: "47"
},
booking: {
text: "🏨 Find the best hotels and places to stay in Hokkaido for your adventure in the wild",
url: "https://tp.media/r?marker=361790&trs=255359&p=2076&u=https%3A%2F%2Fwww.booking.com%2Fregion%2Fjp%2Fhokkaido.en.html%3Faid%3D1610833%3Blabel%3Dhokkaido-aAeTxUkYuK_TbTH6r9qxdwS541060665118%3Apl%3Ata%3Ap1%3Ap2%3Aac%3Aap%3Aneg%3Afi%3Atiaud-146342137510%3Akwd-308409655821%3Alp9074417%3Ali%3Adec%3Adm%3Appccp%3DUmFuZG9tSVYkc2RlIyh9YTiRJUvwM0AZLEcK3RQ9LlA%3Bws%3D%26gclid%3DCjwKCAjw-eKpBhAbEiwAqFL0mnHKn5JRab2ATWKtpUs52QLz4B8iqb5JMWMELFT_60E6PS-hhijZtBoC-coQAvD_BwE&campaign_id=84",
buttonText: "Book your stay on Booking",
logo: BOOKING_LOGO,
colors: {
brand: '#0C3B7C',
contrast: '#fff',
},
campaignId: "84"
},
agoda: {
text: "🛏️ Browse a wide variety of accommodation options in Hokkaido, from luxury hotels to rustic lodges",
url: "https://tp.media/r?marker=361790&trs=255359&p=2854&u=https%3A%2F%2Fwww.agoda.com%2Fregion%2Fhokkaido-prefecture-jp.html&campaign_id=104",
buttonText: "Find accommodations on Agoda",
logo: AGODA_LOGO,
colors: {
brand: '#20284A',
contrast: '#fff',
},
campaignId: "104"
}
}
}
};
const itineraries = {
'singapore-4-day-itinerary': 1,
'japan-itinerary': 2,
'phu-quoc-itinerary-vietnam': 3,
'taiwan-itinerary': 4,
'hokkaido-road-trip-itinerary': 5,
};
const getItineraryData = (url) => {
const key = url.split('/').pop().split('.')[0];
return itineraries[key] || 'Данные не найдены';
};
const getCurrentPageData = () => {
const url = window.location.href;
const data = getItineraryData(url);
return data;
};
// Вызовите эту функцию, чтобы получить данные для текущей страницы
const key = getCurrentPageData();
const tours = toursData[key];
const imageUrls = imageUrlsData[key].options;
var initializeScriptForImage = ((imageUrl, index) => {
const img = document.querySelector(`img[src="${imageUrl}"]`);
if (!img || img.dataset.initialized) return; // Пропустить, если изображение не найдено или уже инициализировано
img.dataset.initialized = 'true'; // Пометить изображение как инициализированное
const tourKeys = Object.keys(tours);
const tour = tours[tourKeys[index % tourKeys.length]];
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
const overlay = document.createElement('div');
overlay.className = 'overlay';
overlay.style.backgroundColor = tour.colors.contrast + 'B3'; // Полупрозрачный фон
const info = document.createElement('div');
info.className = 'info';
const p = document.createElement('p');
p.className = 'image-text';
p.textContent = tour.text;
p.style.color = tour.colors.contrast;
const button = document.createElement('button');
button.className = 'book-btn';
button.style.backgroundColor = tour.colors.brand;
button.style.color = tour.colors.contrast;
button.innerHTML = `
<span class="calendar-icon">
${tour.logo}
</span>${tour.buttonText}
`;
button.addEventListener('click', () => window.open(tour.url, '_blank'));
const style = window.getComputedStyle(img);
imageContainer.style.margin = style.margin;
// Сбросить внешние отступы у картинки
img.style.margin = '0';
info.appendChild(p);
info.appendChild(button);
// Поместить imageContainer перед img
img.parentNode.insertBefore(imageContainer, img);
// Переместить img внутрь imageContainer
imageContainer.appendChild(img);
// Добавить остальные элементы в imageContainer
imageContainer.appendChild(overlay);
imageContainer.appendChild(info);
});
// Инициализация для уже загруженных изображений
imageUrls.forEach(initializeScriptForImage);
// Подписка на событие скролла или другое событие, которое срабатывает при ленивой загрузке
document.addEventListener('scroll', () => {
imageUrls.forEach(initializeScriptForImage);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment