{"id":123,"date":"2010-12-16T16:30:11","date_gmt":"2010-12-16T16:30:11","guid":{"rendered":"https:\/\/www.bajorat-media.com\/?p=123"},"modified":"2021-10-15T22:45:53","modified_gmt":"2021-10-15T20:45:53","slug":"jquery-simple-fade-slideshow","status":"publish","type":"post","link":"https:\/\/www.bajorat-media.com\/en\/jquery-simple-fade-slideshow-123\/","title":{"rendered":"jQuery Simple FadeSlideShow"},"content":{"rendered":"<p>I have just created a small jQuery slideshow as a plugin on <a href=\"http:\/\/plugins.jquery.com\/simplefadeslideshow\/\" target=\"_blank\" rel=\"noopener\">jQuery.com<\/a> published: <a href=\"http:\/\/www.simplefadeslideshow.com\/\" target=\"_blank\" rel=\"noopener\">Simple FadeSlideShow (Preview \/ Demo)<\/a><\/p>\n<p>There's really no shortage of feature-rich jQuery-based slideshows out there, but that's what was bugging me this morning when I was looking for a small flexible slideshow that really doesn't need to do more than fade images with a \"fade\" effect.<\/p>\n<p>Of course I could have searched for a small slideshow and for sure I would have found exactly what I was looking for, but in that time I might as well have written my own small slideshow, and that's exactly what I did.<\/p>\n<p>The \"Simple FadeSlideShow\" is characterized by its flexibility and slim size. It is just 2.4kb in size and really does nothing more than fade images or other content (text, videos, etc.) with a fade effect.<br \/>\n<!--more--><br \/>\nSo the \"Simple FadeSlideShow\" is exactly the right script for all those who really don't want more than a simple image \/ content slider.<br \/>\nThe slideshow is extremely easy to integrate into any web page and doesn't even need extra CSS definitions to work. The slideshow script writes all needed CSS definitions into the corresponding elements as InlineStyle by itself. However, as a JavaScript alternative, a prudent web designer should provide a corresponding version via CSS.<\/p>\n<p>As already mentioned, the slideshow is very flexible and can be built in all imaginable variants from the HTML construct; e.g.<\/p>\n<p><strong>as a list:<\/strong><br \/>\n<code><ul id=\"slideshow\"><br \/>\n&lt;li&gt;&lt;img src=&quot;images\/slide-2.jpg&quot; width=&quot;730&quot; height=&quot;448&quot; border=&quot;0&quot; alt=&quot;&quot; \/&gt;&lt;\/li&gt;<br \/>\n&lt;li&gt;&lt;img src=&quot;images\/slide-1.jpg&quot; width=&quot;730&quot; height=&quot;448&quot; border=&quot;0&quot; alt=&quot;&quot; \/&gt;&lt;\/li&gt;<br \/>\n<\/ul><\/code><\/p>\n<p><strong>or with div tags:<\/strong><br \/>\n<code><div id=\"slideshow\"><br \/>\n&lt;div&gt;&lt;img src=&quot;images\/slide-2.jpg&quot; width=&quot;730&quot; height=&quot;448&quot; border=&quot;0&quot; alt=&quot;&quot; \/&gt;&lt;\/div&gt;<br \/>\n&lt;div&gt;&lt;img src=&quot;images\/slide-1.jpg&quot; width=&quot;730&quot; height=&quot;448&quot; border=&quot;0&quot; alt=&quot;&quot; \/&gt;&lt;\/div&gt;<br \/>\n<\/div><\/code><\/p>\n<p>or, or, or ...<\/p>\n<p>The function call is very simple:<br \/>\n<code>$(document).ready(function(){<br \/>\n$('#slideshow').fadeSlideShow({<br \/>\nwidth:730, \/\/ Width of the slideshow<br \/>\nheight:448, \/\/ Height of the slideshow<br \/>\nspeed:'slow', \/\/ speed of the transition animation<br \/>\ninterval:10000 \/\/ Time until a new image is displayed (1000 = 1 second)<br \/>\n});<br \/>\n});<\/code><\/p>\n<p>For more information, see the corresponding jQuery project page: <a href=\"http:\/\/plugins.jquery.com\/simplefadeslideshow\/\" target=\"_blank\" rel=\"noopener\">plugins.jquery.com\/simplefadeslideshow\/<\/a><br \/>\nA demo is available here: <a href=\"http:\/\/www.simplefadeslideshow.com\/\" target=\"_blank\" rel=\"noopener\">www.simplefadeslideshow.com<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>I have just published a small jQuery slideshow as a plugin on jQuery.com: Simple FadeSlideShow (Preview \/ Demo). The \"Simple FadeSlideShow\" is characterized by its flexibility and slim size.<\/p>","protected":false},"author":2,"featured_media":1339,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":1,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":15607,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/posts\/123\/revisions\/15607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/media\/1339"}],"wp:attachment":[{"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bajorat-media.com\/en\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}