{"id":1765,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/gallery\/article8.html"},"modified":"2016-02-25T05:07:17","modified_gmt":"2016-02-25T10:07:17","slug":"roundabout-image-gallery","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/roundabout-image-gallery.html","title":{"rendered":"&#8220;RoundAbout&#8221; Image Gallery"},"content":{"rendered":"<p> <\/p>\r\n<ul class=\"desc-links\">\r\n<li><a href=\"http:\/\/livedemo00.template-help.com\/wordpress_36922\/\" class=\"live-demo-button\" target=\"_blank\">Live Demo<\/a><\/li>\r\n<li><a href=\"http:\/\/fredhq.com\/projects\/roundabout\/\" class=\"sample-button\" target=\"_blank\">Download<\/a><\/li>\r\n<\/ul>\r\n<p>This is an impressive Gallery Script that allows creating a gallery with magnificent interactive \u2018 round-about\u2019 interfaces. By default, it works for numeric and buleted lists but can work for any HTML structure after certain modification. Please, check <a class=\"link3\" href=\"http:\/\/fredhq.com\/projects\/roundabout\/#demo\">this link<\/a> or <a class=\"link3\" href=\"http:\/\/fredhq.com\/projects\/roundabout-shapes\/\">this link<\/a> for gallery installation and configuration tutorials.\r\n<p> <strong>JavaScript<\/strong> <br \/>In order to make the script work, the <strong>index-#.html<\/strong> file with a gallery should contain these lines of HTML code:<\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_1.png\" \/> <\/p>\r\n<p>The <strong>&lt;head&gt;<\/strong> section of the <strong>index-#.html<\/strong> file contains these lines of code that initialize the script functionality with basic values:<\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_2.png\" \/> <\/p>\r\n<p>The script initializes and element (usually <strong>&lt;ul&gt;<\/strong> tag, but it could be <strong>&lt;div&gt;<\/strong> tag as well) with <strong>#myRoundabout<\/strong> id. The shape parameter defines the form of gallery display:<\/p>\r\n<p>1. <strong>waterWheel<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_3_whaterWheel.png\" \/> <\/p>\r\n<p>2. <strong>lazySusan<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_4_lazySusan.png\" \/> <\/p>\r\n<p>3. <strong>figure8<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_5_figure8.png\" \/> <\/p>\r\n<p>4. <strong>square<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_6_square.png\" \/> <\/p>\r\n<p>5. <strong>conveyorBeltLeft<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_7_conveyorBeltLeft.png\" \/> <\/p>\r\n<p>6. <strong>conveyorBeltRight<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_8_conveyorBeltRight.png\" \/> <\/p>\r\n<p>7. <strong>diagonalRingLeft<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_9_diagonalRingLeft.png\" \/> <\/p>\r\n<p>8. <strong>diagonalRingRight<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_10_diagonalRingRight.png\" \/> <\/p>\r\n<p>9. <strong>rollerCoaster<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_11_rollerCoaster.png\" \/> <\/p>\r\n<p>10. <strong>tearDrop<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_12_tearDrop.png\" \/> <\/p>\r\n<p>11. <strong>theJuggler<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_13_theJuggler.png\" \/> <\/p>\r\n<p>12. <strong>goodbyeCruelWorld<\/strong><\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_14_goodbyeCruelWorld.png\" \/> <\/p>\r\n<p> <strong>HTML<\/strong> <br \/>Below you can see general HTML script representation:<\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_15.png\" \/> <\/p>\r\n<p>The gallery HTML is simply built with a bulleted list (<strong>&lt;ul&gt;<\/strong> tag) with <strong>#myRoundabout<\/strong> id.<\/p>\r\n<p> <strong>CSS<\/strong> <br \/>You can find script related stylesheet in the main <strong>style.css<\/strong> file. <\/p>\r\n<p> <img alt=\"\" src=\"\/help\/wp-content\/uploads\/2011\/03\/jquery\/gallery\/gallery_7_16.png\" \/> <\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Live Demo Download This is an impressive Gallery Script that allows creating a gallery with magnificent interactive \u2018 round-about\u2019 interfaces. By default, it works for numeric and buleted lists but can work for any HTML structure after certain modification. Please, check this link or this link for gallery installation and configuration tutorials. JavaScript In order [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[267],"tags":[499,813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1765"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1765"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1765\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}