{"id":8259,"date":"2013-05-08T15:07:40","date_gmt":"2013-05-08T15:07:40","guid":{"rendered":"http:\/\/www.oik-plugins.com\/?page_id=8259"},"modified":"2014-02-18T21:05:59","modified_gmt":"2014-02-18T21:05:59","slug":"bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images","status":"publish","type":"shortcode_example","link":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/","title":{"rendered":"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images"},"content":{"rendered":"\r\n\r\n<div class=\"w60pc\"><div class=\"flexslider\"><ul class=\"slides\"><li><a href=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/ditto-on-the-table\/\"><img decoding=\"async\" class=\"bw_thumbnail post-8260 attachment type-attachment status-inherit entry has-post-thumbnail\" src=\"https:\/\/www.oik-plugins.com\/wp-content\/uploads\/2013\/05\/Ditto-on-the-table-300x168.jpg\" width=\"300\" height=\"168\" title=\"Ditto on the table\" alt=\"Ditto on the table\"  loading=\"lazy\" \/>Ditto on the table<\/a><\/li><li><a href=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/is-it-tea-time-yet\/\"><img decoding=\"async\" class=\"bw_thumbnail post-8261 attachment type-attachment status-inherit entry has-post-thumbnail\" src=\"https:\/\/www.oik-plugins.com\/wp-content\/uploads\/2013\/05\/Is-it-tea-time-yet-300x168.jpg\" width=\"300\" height=\"168\" title=\"Is it tea time yet\" alt=\"Is it tea time yet\"  loading=\"lazy\" \/>Is it tea time yet<\/a><\/li><li><a href=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/its-a-hard-life\/\"><img decoding=\"async\" class=\"bw_thumbnail post-8262 attachment type-attachment status-inherit entry has-post-thumbnail\" src=\"https:\/\/www.oik-plugins.com\/wp-content\/uploads\/2013\/05\/Its-a-hard-life-300x168.jpg\" width=\"300\" height=\"168\" title=\"It&#8217;s a hard life\" alt=\"It&#8217;s a hard life\"  loading=\"lazy\" \/>It&#8217;s a hard life<\/a><\/li><\/ul><\/div><\/div><div class=\"w40pc\">\r\nIn this example page we use <span class=\"bw_oik\"><abbr  title=\"OIK Information Kit\">oik<\/abbr><\/span> shortcodes to implement the jQuery Flexslider to display a simple slideshow of the images attached to the page, with the image titles being displayed as links to the attachments. We also use the bw_css shortcode to perform some additional theming.<\/div>\r\n<div class=\"cleared clear\"><\/div>\r\n\r\n<div><style  type=\"text\/css\" media=\"screen,print\">\r\n.art-postcontent ul > li { background-image: none; padding-left: 0px; }\r\n.art-article img { margin: 0px; }\r\n.w40pc { width: 36%; padding: 2%; float: left; }\r\n<\/style><div class=\"bw_css\"><code><br \/>\n<span style=\"color: #6666ff;\">.art-postcontent<\/span> ul <span style=\"color: #00AA00;\">&gt;<\/span> li <span style=\"color: #00AA00;\">&#123;<\/span> <span style=\"color: #000000; font-weight: bold;\">background-image<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">none<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #000000; font-weight: bold;\">padding-left<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">0px<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #00AA00;\">&#125;<\/span><br \/>\n<span style=\"color: #6666ff;\">.art-article<\/span> img <span style=\"color: #00AA00;\">&#123;<\/span> <span style=\"color: #000000; font-weight: bold;\">margin<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">0px<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #00AA00;\">&#125;<\/span><br \/>\n<span style=\"color: #6666ff;\">.w<span style=\"color: #933;\">40pc<\/span><\/span> <span style=\"color: #00AA00;\">&#123;<\/span> <span style=\"color: #000000; font-weight: bold;\">width<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">36%<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #000000; font-weight: bold;\">padding<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #933;\">2%<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #000000; font-weight: bold;\">float<\/span><span style=\"color: #00AA00;\">:<\/span> <span style=\"color: #993333;\">left<\/span><span style=\"color: #00AA00;\">;<\/span> <span style=\"color: #00AA00;\">&#125;<\/span><br \/>\n&nbsp;<\/code><\/div><\/div>\r\n\r\n<div class=\"bw_wtf\"><p>hover to slideToggle source<\/p><p class=\"bw_wtf\" lang=\"HTML\" escaped=\"true\" style=\"display:none;\">&#091;bw_jq &quot;.flexslider&quot; flexslider script=flexslider &#093;&#091;div class=w60pc&#093;&#091;div class=&quot;flexslider&quot;&#093;&#091;bw_list post_type=&quot;attachment&quot; numberposts=3 thumbnail=medium class=slides&#093;&#091;ediv&#093;&#091;ediv&#093;&#091;div class=w40pc&#093;In this example page we use &#091;oik&#093; shortcodes to implement the jQuery Flexslider to display a simple slideshow of the images attached to the page, with the image titles being displayed as links to the attachments. We also use the bw_css shortcode to perform some additional theming.&#091;ediv&#093;&#091;clear&#093;&#091;bw_css .&#093;.art&#045;postcontent ul &gt; li { background&#045;image: none; padding&#045;left: 0px; }.art&#045;article img { margin: 0px; }.w40pc { width: 36%; padding: 2%; float: left; }&#091;\/bw_css&#093;&#091;bw_wtf&#093;&lt;h3&gt;See also&lt;\/h3&gt;&#091;bw_code bw_list&#093;&#091;bw_code bw_css&#093;&#091;bw_code div&#093;&#091;bw_code ediv&#093;<\/p><\/div>\r\n\r\n<h3>See also<\/h3>\r\n<a class=\"bw_code bw_list\" href=\"https:\/\/www.oik-plugins.com\/oik-shortcodes\/bw_list\/bw_list\" title=\"Link to help for shortcode: bw_list\"><span>[<\/span>bw_list]<\/a>\r\n<a class=\"bw_code bw_css\" href=\"https:\/\/www.oik-plugins.com\/oik-shortcodes\/bw_css\/oik_css\" title=\"Link to help for shortcode: bw_css\"><span>[<\/span>bw_css]<\/a>\r\n<a class=\"bw_code div\" href=\"https:\/\/www.oik-plugins.com\/oik-shortcodes\/div\/bw_sdiv\" title=\"Link to help for shortcode: div\"><span>[<\/span>div]<\/a>\r\n<a class=\"bw_code ediv\" href=\"https:\/\/www.oik-plugins.com\/oik-shortcodes\/ediv\/bw_ediv\" title=\"Link to help for shortcode: ediv\"><span>[<\/span>ediv]<\/a>\r\n","protected":false},"excerpt":{"rendered":"<p>Demonstrating shortcodes to implement the jQuery Flexslider to display a simple slideshow of images attached to the page. Also features the bw_css shortcode<\/p>\n","protected":false},"featured_media":0,"template":"","letters":[],"class_list":{"0":"post-8259","1":"shortcode_example","2":"type-shortcode_example","3":"status-publish","5":"entry","6":"has-post-thumbnail"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>&#091;bw_jq&#093; and &#091;bw_list&#093; to implement the Flex slider to display attached images - [oik] plugins.com<\/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:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"&#091;bw_jq&#093; and &#091;bw_list&#093; to implement the Flex slider to display attached images - [oik] plugins.com\" \/>\n<meta property=\"og:description\" content=\"Demonstrating shortcodes to implement the jQuery Flexslider to display a simple slideshow of images attached to the page. Also features the bw_css shortcode\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/\" \/>\n<meta property=\"og:site_name\" content=\"[oik] plugins.com\" \/>\n<meta property=\"article:modified_time\" content=\"2014-02-18T21:05:59+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/\",\"url\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/\",\"name\":\"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images - [oik] plugins.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.oik-plugins.com\/#website\"},\"datePublished\":\"2013-05-08T15:07:40+00:00\",\"dateModified\":\"2014-02-18T21:05:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Shortcode examples\",\"item\":\"https:\/\/www.oik-plugins.com\/shortcode_example\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shortcodes\",\"item\":\"https:\/\/www.oik-plugins.com\/shortcodes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.oik-plugins.com\/#website\",\"url\":\"https:\/\/www.oik-plugins.com\/\",\"name\":\"[oik] plugins.com\",\"description\":\"WordPress plugins and themes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.oik-plugins.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images - [oik] plugins.com","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:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/","og_locale":"en_US","og_type":"article","og_title":"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images - [oik] plugins.com","og_description":"Demonstrating shortcodes to implement the jQuery Flexslider to display a simple slideshow of images attached to the page. Also features the bw_css shortcode","og_url":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/","og_site_name":"[oik] plugins.com","article_modified_time":"2014-02-18T21:05:59+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/","url":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/","name":"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images - [oik] plugins.com","isPartOf":{"@id":"https:\/\/www.oik-plugins.com\/#website"},"datePublished":"2013-05-08T15:07:40+00:00","dateModified":"2014-02-18T21:05:59+00:00","breadcrumb":{"@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.oik-plugins.com\/shortcode_example\/bw_jq-and-bw_list-to-implement-the-flex-slider-to-display-attached-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Shortcode examples","item":"https:\/\/www.oik-plugins.com\/shortcode_example\/"},{"@type":"ListItem","position":2,"name":"Shortcodes","item":"https:\/\/www.oik-plugins.com\/shortcodes\/"},{"@type":"ListItem","position":3,"name":"&#91;bw_jq&#93; and &#91;bw_list&#93; to implement the Flex slider to display attached images"}]},{"@type":"WebSite","@id":"https:\/\/www.oik-plugins.com\/#website","url":"https:\/\/www.oik-plugins.com\/","name":"[oik] plugins.com","description":"WordPress plugins and themes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oik-plugins.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example\/8259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example"}],"about":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/types\/shortcode_example"}],"version-history":[{"count":16,"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example\/8259\/revisions"}],"predecessor-version":[{"id":8265,"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/shortcode_example\/8259\/revisions\/8265"}],"wp:attachment":[{"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/media?parent=8259"}],"wp:term":[{"taxonomy":"letters","embeddable":true,"href":"https:\/\/www.oik-plugins.com\/wp-json\/wp\/v2\/letters?post=8259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}