{"id":12233,"date":"2017-02-03T16:56:30","date_gmt":"2017-02-03T15:56:30","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12233"},"modified":"2017-02-03T16:56:30","modified_gmt":"2017-02-03T15:56:30","slug":"boostrap-photo-gallery-un-plugin-jquery-per-la-visualizzazione-responsive-di-foto-nelle-pagine-web","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/boostrap-photo-gallery-un-plugin-jquery-per-la-visualizzazione-responsive-di-foto-nelle-pagine-web\/","title":{"rendered":"Boostrap Photo Gallery: un plugin jQuery per la visualizzazione responsive di foto nelle pagine web"},"content":{"rendered":"<p>Se non ci fossero immagini e foto, le pagine web non sarebbero cos\u00ec belle. Eppure la loro gestione richiede una certa organizzazione per poterle mostrare e permetterne sia la visualizzazione ridotta sia l&#8217;ingrandimento per poterla apprezzare nei dettagli. <a href=\"https:\/\/github.com\/michaelsoriano\/bootstrap-photo-gallery\" target=\"_blank\">Bootstrap Photo Gallery<\/a> \u00e8 una libreria jQuery, basata su Bootstrap, per la <strong>visualizzazione <em>responsive<\/em> delle collezioni di foto nelle pagine web<\/strong>.<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2016\/07\/bootstrp-photo-gallery-jquery-plugin_img_01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12234\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2016\/07\/bootstrp-photo-gallery-jquery-plugin_img_01.jpg\" alt=\"bootstrp-photo-gallery-jquery-plugin_img_01\" width=\"645\" height=\"494\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2016\/07\/bootstrp-photo-gallery-jquery-plugin_img_01.jpg 645w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2016\/07\/bootstrp-photo-gallery-jquery-plugin_img_01-300x230.jpg 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/a><\/p>\n<p>Come si vede in figura, una griglia responsive mostrer\u00e0 l&#8217;insieme di immagini a disposizione mentre il <em>click<\/em> su una di esse produrr\u00e0 la visualizzazione di dettaglio in una finestra modale. Per chi volesse invece gustare dal vivo questo plugin, \u00e8 disponibile una <a href=\"https:\/\/rawgit.com\/michaelsoriano\/bootstrap-photo-gallery\/master\/demo.html\" target=\"_blank\">demo live<\/a>.<\/p>\n<p>Per utilizzarla, si deve:<\/p>\n<ul>\n<li>elencare le immagini in una lista non ordinata:\n<pre class=\"lang:xhtml decode:true\">&lt;ul class=\"first\"&gt;\r\n   &lt;li&gt;\r\n       &lt;img alt=\"Night away\"  src=\"images\/photodune-174908-rocking-the-night-away-xs.jpg\"&gt;\r\n       &lt;p class=\"text\"&gt;Optional text. This will also show in the modal&lt;\/p&gt;\r\n   &lt;\/li&gt;\r\n   ...\r\n   ...\r\n&lt;\/ul&gt;<\/pre>\n<\/li>\n<li>attivarne\u00a0l&#8217;utilizzo specificando nell&#8217;attributo <em>classes<\/em> le specifiche Bootstrap per la griglia\n<pre class=\"lang:js decode:true\">$('ul.first').bsPhotoGallery({\r\n    \"classes\" : \"col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12\",\r\n    \"hasModal\" : true\r\n  });<\/pre>\n<\/li>\n<\/ul>\n<p>Provate questo interessantissimo plugin, tramite demo o installandola, e fateci sapere cosa ne pensate!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se non ci fossero immagini e foto, le pagine web non sarebbero cos\u00ec belle. Eppure la loro&#8230;<\/p>\n","protected":false},"author":561,"featured_media":12805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[481],"tags":[1479,1481,1877],"class_list":["post-12233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse-utili","tag-bootstrap","tag-jquery","tag-web-design"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12233"}],"version-history":[{"count":4,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12233\/revisions"}],"predecessor-version":[{"id":12803,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12233\/revisions\/12803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/12805"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}