{"id":6672,"date":"2011-03-17T03:13:03","date_gmt":"2011-03-17T07:13:03","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6672"},"modified":"2015-09-11T05:16:48","modified_gmt":"2015-09-11T09:16:48","slug":"jqfancytransitions-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/jqfancytransitions-slider.html","title":{"rendered":"&#8220;jqFancyTransitions&#8221; Slider"},"content":{"rendered":"A slider with a variety of unique transition effects. For full specifications visit the official website: http:\/\/workshop.rs\/2009\/12\/image-gallery-with-fancy-transitions-effects\r\n\r\n<h3>JavaScript<\/h3>\r\nWe should include jQuery framework and jqFancyTransiotions.1.8.js by pointing src attribute in the script tag to those .js files.\r\n\r\n<pre class=\"brush:js\">\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\" >&lt;\/script>\r\n&lt;script type=\"text\/javascript\" src=\"js\/jqFancyTransiotions.1.8.js\">&lt;\/script>\r\n<\/pre>\r\n\r\nInitialization script we place in the <head> section. You will probably need to set width and height for your gallery. That can be done with the next code:\r\n<pre class=\"brush:js\">\r\n$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });\r\n<\/pre>\r\nYou can also define some additional parameters:\r\n<pre class=\"brush:js\">\r\neffect: '', \/\/ wave, zipper, curtain\r\nwidth: 500, \/\/ width of panel\r\nheight: 332, \/\/ height of panel\r\nstrips: 20, \/\/ number of strips\r\ndelay: 5000, \/\/ delay between images in ms\r\nstripDelay: 50, \/\/ delay between strips in ms\r\ntitleOpacity: 0.7, \/\/ opacity of title\r\ntitleSpeed: 1000, \/\/ speed of title appearance in ms\r\nposition: 'alternate', \/\/ top, bottom, alternate, curtain\r\ndirection: 'fountainAlternate', \/\/ left, right, alternate, random, fountain, fountainAlternate\r\nnavigation: false, \/\/ prev and next navigation buttons\r\nlinks: false \/\/ show images as links\r\n<\/pre>\r\n\r\n<h3>HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n\r\n<pre class=\"brush:html\">\r\n<div id='slideshowHolder'>\r\n     &lt;img src='img1.jpg' alt='img1' \/>\r\n     &lt;img src='img2.jpg' alt='img2' \/>\r\n &lt;img src='img3.jpg' alt='img3' \/>\r\n<\/div>\r\n<\/pre>\r\n\r\nIf you want to set links for the image, then the code will look this way\r\n\r\n<pre class=\"brush:html\">\r\n<div id='slideshowHolder'>\r\n &lt;img src='img1.jpg' alt='img1' \/>\r\n <a href ='http:\/\/path\/to\/url'\/><\/a>\r\n     &lt;img src='img2.jpg' alt='img2' \/>\r\n     <a href ='http:\/\/path\/to\/url\/'><\/a>\r\n     &lt;img src='img3.jpg' alt='img3' \/>\r\n     <a href ='http:\/\/path\/to\/url\/''><\/a>\r\n<\/div>\r\n<\/pre>\r\n\r\n<h3>CSS<\/h3>\r\n\r\n<pre class=\"brush:css\">\r\n\r\n#slideshowHolder {\r\n  width:px;\r\n  height:px;\r\n  overflow:hidden;\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"<p>A slider with a variety of unique transition effects. For full specifications visit the official website: http:\/\/workshop.rs\/2009\/12\/image-gallery-with-fancy-transitions-effects JavaScript We should include jQuery framework and jqFancyTransiotions.1.8.js by pointing src attribute in the script tag to those .js files. &lt;script type=&#8221;text\/javascript&#8221; src=&#8221;js\/jquery-1.4.2.min.js&#8221; >&lt;\/script> &lt;script type=&#8221;text\/javascript&#8221; src=&#8221;js\/jqFancyTransiotions.1.8.js&#8221;>&lt;\/script> Initialization script we place in the section. You will probably need [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262,270],"tags":[813,816,819],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6672"}],"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=6672"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6672\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}