{"id":7553,"date":"2014-12-26T15:52:05","date_gmt":"2014-12-26T14:52:05","guid":{"rendered":"http:\/\/www.jng-web.com\/labo\/?p=7553"},"modified":"2023-09-25T09:49:20","modified_gmt":"2023-09-25T07:49:20","slug":"une-galerie-dimages-javascript-incontournable","status":"publish","type":"post","link":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/","title":{"rendered":"Une galerie d&rsquo;images JavaScript incontournable"},"content":{"rendered":"<div class=\"advads-avant-le-contenu\" id=\"advads-3968560984\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><div class=\"advads-test\" style=\"margin-left: auto;margin-right: auto;text-align: center;\" id=\"advads-223954935\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p>Sur le web, en faisant une recherche avec votre moteur de recherche favori, vous trouverez de tr\u00e8s nombreux scripts pour construire votre galerie d&rsquo;images. Dans ce court billet, je vous invite \u00e0 d\u00e9couvrir un script utilisant la technologie JavaScript. Ce script se d\u00e9nomme PhotoSwipe et vous permettra de mettre en place une galerie photo moderne.<\/p>\n<p><a href=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-7554\" src=\"http:\/\/www.jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe-300x172.png\" alt=\"PhotoSwipe\" width=\"300\" height=\"172\" srcset=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe-300x172.png 300w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe.png 654w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2>PhotoSwipe, un script de galerie photo responsive<\/h2>\n<p>Profitant des derni\u00e8res avanc\u00e9es technologiques, PhotoSwipe est une galerie responsive qui s&rsquo;adaptera au terminal utilis\u00e9 par l&rsquo;internaute. L\u00e9ger, le script vous permettra d&rsquo;avoir une galerie qui pr\u00e9sentera un temps de chargement raisonnable (il ne faudra pas oublier d&rsquo;optimiser vos images pour le web). Compatible mobile, il est possible de naviguer au sein de cette galerie photo de fa\u00e7on tactile, mais \u00e9galement de fa\u00e7on traditionnelle via la souris ou le clavier.<\/p>\n<p>Si vous souhaitez que les internautes partagent vos photos sur les r\u00e9seaux sociaux (Facebook, Pinterest, Twitter), il vous sera possible d&rsquo;activer cette fonctionnalit\u00e9. Le script ne n\u00e9cessitera pas que vous r\u00e9alisiez vous-m\u00eame cette intervention.<\/p>\n<p>Conquis, alors n&rsquo;h\u00e9sitez pas \u00e0 visiter le site officiel de <a href=\"https:\/\/photoswipe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PhotoSwipe<\/a>. Une documentation vous permettra de prendre ce script rapidement en main et d&rsquo;en d\u00e9couvrir toutes les subtilit\u00e9s.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sur le web, en faisant une recherche avec votre moteur de recherche favori, vous trouverez de tr\u00e8s nombreux scripts pour construire votre galerie d&rsquo;images. Dans &hellip; <\/p>\n","protected":false},"author":2,"featured_media":7554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[40],"class_list":["post-7553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripts-gratuits","tag-script-gratuit"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Une galerie d&#039;images JavaScript incontournable - Labo JNG WEB<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une galerie d&#039;images JavaScript incontournable - Labo JNG WEB\" \/>\n<meta property=\"og:description\" content=\"Sur le web, en faisant une recherche avec votre moteur de recherche favori, vous trouverez de tr\u00e8s nombreux scripts pour construire votre galerie d&rsquo;images. Dans &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\" \/>\n<meta property=\"og:site_name\" content=\"Labo JNG WEB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\" \/>\n<meta property=\"article:author\" content=\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-26T14:52:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T07:49:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe.png\" \/>\n\t<meta property=\"og:image:width\" content=\"654\" \/>\n\t<meta property=\"og:image:height\" content=\"376\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"J\u00e9r\u00f4me\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"J\u00e9r\u00f4me\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\"},\"author\":{\"name\":\"J\u00e9r\u00f4me\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\"},\"headline\":\"Une galerie d&rsquo;images JavaScript incontournable\",\"datePublished\":\"2014-12-26T14:52:05+00:00\",\"dateModified\":\"2023-09-25T07:49:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\"},\"wordCount\":213,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"keywords\":[\"Script gratuit\"],\"articleSection\":[\"Scripts gratuits \/ Frameworks\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\",\"url\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\",\"name\":\"Une galerie d'images JavaScript incontournable - Labo JNG WEB\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#website\"},\"datePublished\":\"2014-12-26T14:52:05+00:00\",\"dateModified\":\"2023-09-25T07:49:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Labo Jng Web\",\"item\":\"https:\/\/jng-web.com\/labo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scripts gratuits \/ Frameworks\",\"item\":\"https:\/\/jng-web.com\/labo\/scripts-gratuits\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Une galerie d&rsquo;images JavaScript incontournable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jng-web.com\/labo\/#website\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"name\":\"Labo JNG WEB\",\"description\":\"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...\",\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jng-web.com\/labo\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\",\"name\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"contentUrl\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"width\":342,\"height\":110,\"caption\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\"},\"image\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\",\"https:\/\/twitter.com\/jng_web\",\"https:\/\/fr.linkedin.com\/in\/jeromeguri\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\",\"name\":\"J\u00e9r\u00f4me\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"caption\":\"J\u00e9r\u00f4me\"},\"description\":\"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.\",\"sameAs\":[\"http:\/\/www.jng-web.com\",\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\",\"https:\/\/twitter.com\/JngWeb21\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Une galerie d'images JavaScript incontournable - Labo JNG WEB","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/","og_locale":"fr_FR","og_type":"article","og_title":"Une galerie d'images JavaScript incontournable - Labo JNG WEB","og_description":"Sur le web, en faisant une recherche avec votre moteur de recherche favori, vous trouverez de tr\u00e8s nombreux scripts pour construire votre galerie d&rsquo;images. Dans &hellip;","og_url":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/","og_site_name":"Labo JNG WEB","article_publisher":"https:\/\/www.facebook.com\/webmaster.referencement.dijon","article_author":"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","article_published_time":"2014-12-26T14:52:05+00:00","article_modified_time":"2023-09-25T07:49:20+00:00","og_image":[{"width":654,"height":376,"url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2014\/12\/PhotoSwipe.png","type":"image\/png"}],"author":"J\u00e9r\u00f4me","twitter_misc":{"\u00c9crit par":"J\u00e9r\u00f4me","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#article","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/"},"author":{"name":"J\u00e9r\u00f4me","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590"},"headline":"Une galerie d&rsquo;images JavaScript incontournable","datePublished":"2014-12-26T14:52:05+00:00","dateModified":"2023-09-25T07:49:20+00:00","mainEntityOfPage":{"@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/"},"wordCount":213,"commentCount":4,"publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"keywords":["Script gratuit"],"articleSection":["Scripts gratuits \/ Frameworks"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/","url":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/","name":"Une galerie d'images JavaScript incontournable - Labo JNG WEB","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/#website"},"datePublished":"2014-12-26T14:52:05+00:00","dateModified":"2023-09-25T07:49:20+00:00","breadcrumb":{"@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jng-web.com\/labo\/une-galerie-dimages-javascript-incontournable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Labo Jng Web","item":"https:\/\/jng-web.com\/labo\/"},{"@type":"ListItem","position":2,"name":"Scripts gratuits \/ Frameworks","item":"https:\/\/jng-web.com\/labo\/scripts-gratuits\/"},{"@type":"ListItem","position":3,"name":"Une galerie d&rsquo;images JavaScript incontournable"}]},{"@type":"WebSite","@id":"https:\/\/jng-web.com\/labo\/#website","url":"https:\/\/jng-web.com\/labo\/","name":"Labo JNG WEB","description":"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...","publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jng-web.com\/labo\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/jng-web.com\/labo\/#organization","name":"JNG WEB \/\/ J\u00e9r\u00f4me Guri","url":"https:\/\/jng-web.com\/labo\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/","url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","contentUrl":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","width":342,"height":110,"caption":"JNG WEB \/\/ J\u00e9r\u00f4me Guri"},"image":{"@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webmaster.referencement.dijon","https:\/\/twitter.com\/jng_web","https:\/\/fr.linkedin.com\/in\/jeromeguri"]},{"@type":"Person","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590","name":"J\u00e9r\u00f4me","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","caption":"J\u00e9r\u00f4me"},"description":"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.","sameAs":["http:\/\/www.jng-web.com","https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","https:\/\/twitter.com\/JngWeb21"]}]}},"views":7908,"_links":{"self":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/7553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/comments?post=7553"}],"version-history":[{"count":0,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/7553\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media\/7554"}],"wp:attachment":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media?parent=7553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/categories?post=7553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/tags?post=7553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}