WYSIWYG Slider
WYSIWYG Slider setzt alle für das Sliding benötigten Container (<div>). Es ist nicht nötig dieses manuell zu machen. Schauen sie selbst:
25.03.2009 This is the first release for the new SLIDER working with jquery ( slider version 1.5.5 Beta)
25.03.2009 The second relase only for online testing, in moment no download
26.03.2009 The next relase only for online testing, in moment no download, Now i tested more Tabs, they break in a second line.
16.04.2009 Version 1.7 Beta released. It's a fixed Version from the first slider. The tabs you can change by css. Tabs title are set by header title in content.
YCodaSlider 3.0
Copyright (c) 2009 Massimiliano Balestrieri
Examples and docs at: http://maxb.net/blog/
Licensed GPL licenses:
http://www.gnu.org/licenses/gpl.html
Slider scripts are one of the common objects of newspaper & portal websites.
They are very useful as they help us present more content in a limited space.
This script helps you present your content with a tabbed menu + previous-next buttons to switch between tabs.
YCodaSlider 3.0 requires jQuery to run and you can use any type of content inside the slider like HTML, Flash, webpages etc.
It can be configured easily to use different effects while changing the content.
from : www.webresourcesdepot.com
Based on Gian Carlo Mingati's slideViewer
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
Based on Niall Doherty's coda-slider
http://www.ndoherty.com/coda-slider
Inspired by the clever folks at http://www.panic.com/coda
Basic usage:
jQuery(".ycodaslider").ycodaslider();
Panels
jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(window).bind("load", function() {
jQuery(".ycodaslider").ycodaslider();
});
Html:
<div class="ycodaslider">
<div class="yslider-panelwrapper" title="Panel 1"></div>
<div class="yslider-panelwrapper" title="Panel 2"></div>
<div class="yslider-panelwrapper" title="Panel 3"></div>
<div class="yslider-panelwrapper" title="Panel 4"></div>
</div>
Basic scripts (use packed version in production):
<script src="../../lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../ycodaslider-3.0.js" type="text/javascript"></script>
Other scripts for some options (use packed version in production):
<script src="lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.min.js" type="text/javascript"></script>
<script src="lib/janalytics.pack.js" type="text/javascript"></script>
<script src="lib/chili/jquery.chili-2.2.js" type="text/javascript"></script>
YCodagallery
Js
jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(window).bind("load", function(){
jQuery(".ycodaslider").ycodagallery().ycodaslider();
});
Html:
<div class="ycodaslider">
<img alt="new Mikado logo" src="http://maxb.net/repository/images/14.jpg" />
</div>
YCodaLazy 3.0
jQuery(document).ready(function() {
jQuery("div.ycodaslider").ycodagallery().ycodalazy();
});
jQuery(window).bind("load", function() {
jQuery("div.ycodaslider").ycodaslider();
});
Example
Example explanation
YCodaFeeds 3.0
jQuery(window).bind("load", function() {
jQuery("#yslider-feeds").ycodafeeds().ycodaslider({
scroll : true
});
});
Example
YCodaCode 3.0
jQuery(window).bind("load", function(){
jQuery("div#yslider-code").ycodacode().ycodaslider();
});
Example
YCodaFlickr 3.0 - EXAMPLE EXTERNAL PLUGIN
jQuery(document).ready(function() {
jQuery("div.ycodaslider")
.ycodaflickr({
width : 653,
proxy : "../../../proxy/feed.php",
callback : function(){
jQuery("div.ycodaslider")
.ycodagallery()
.ycodalazy({
threshold : 0,
placeholder: "../../../images/loading.gif"
})
.ycodaslider();
}
})
});
Example
Code
Js
jQuery(window).ycodacss('../../../ycodaslider-3.0.css');
jQuery(window).bind("load", function() {
jQuery("div.ycodaslider")
.ycodacode()
.ycodaslider({scroll:true});
});
Html:
<div id="yslider-code" class="ycodaslider">
<a href="../ycodaslider-3.0.js">YCodaSlider 3.0</a>
</div>
Now a default WYSIWYG
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.
Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
Credits
Based on slideViewer of Gian Carlo Mingati.
Based on coda-slider of Niall Doherty
Inspired by the clever folks at http://www.panic.com/coda
Libraries
jquery v1.3.2 of John Resig jquery.com
jquery gfeed v1.0.2 of M. Alsup + (API GOOGLE)
jquery easing v1.3 of George McGinley Smith
jquery.chili-2.2.js of Andrea Ercolino
jquery.metadata & janalytics for click tracking.
CSS
Yahoo Css Reset version: 2.5.1
This Demo
Icons Nuvola
