first import

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-08 11:40:19 +02:00
commit 1bc61b12ad
8435 changed files with 1582817 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
h1. AnythingSlider jQuery Plugin
*Just what the world needs, another jQuery slider. YAWN.* I know, check this one out though, its got lots of cool features.
Here on CSS-Tricks, Ive created a number of different sliders. Three, in fact. A "“featured content”":http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ slider, a "“start/stop slider”":http://css-tricks.com/startstop-slider/, and "“moving boxes”":http://css-tricks.com/moving-boxes/. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.
* "Documentation Wiki":https://github.com/ProLoser/AnythingSlider/wiki
* "Keep Reading":http://css-tricks.com/anythingslider-1-4/
* "Main Demo":http://proloser.github.com/AnythingSlider/
* "More Demos":https://github.com/ProLoser/AnythingSlider/wiki
* Having an issue? Submit it "here":https://github.com/ProLoser/AnythingSlider/issues

View File

@@ -0,0 +1,45 @@
/* AnythingSlider IE7 and older stylesheet - included !important flag in case the theme is loaded after page load */
/* Navigation Arrows */
div.anythingSlider .arrow {
top: 35% !important;
}
div.anythingSlider-metallic .arrow {
top: 40% !important;
}
div.anythingSlider-construction .arrow {
top: 14% !important;
}
div.anythingSlider-minimalist-round .arrow , div.anythingSlider-minimalist-square .arrow {
top: 45% !important;
}
div.anythingSlider-cs-portfolio .arrow {
bottom: -24px !important;
}
div.anythingSlider .arrow a,
div.anythingSlider-metallic .arrow a,
div.anythingSlider-minimalist-square .arrow a,
div.anythingSlider-construction .arrow a,
div.anythingSlider-minimalist-round .arrow a {
margin: 0 !important;
}
/* When using the navigationSize option, the side margins need to be zero
None of the navigation panels look good in IE7 now =( */
div.anythingSlider .anythingControls ul.thumbNav a {
margin: 0;
}
div.anythingSlider .anythingControls .anythingNavWindow li {
padding: 3px 0 0 0;
}
div.anythingSlider-cs-portfolio .anythingControls .anythingNavWindow {
margin: 18px 0 0 0;
}
div.anythingSlider-metallic .anythingControls,
div.anythingSlider-minimalist-square .anythingControls,
div.anythingSlider-construction .anythingControls,
div.anythingSlider-minimalist-round .anythingControls {
width: 70%; /* arbitrary percentage, adjust to fit your slider in IE7 */
margin-top: 3px;
}

View File

@@ -0,0 +1,204 @@
/*
AnythingSlider v1.7+ Default (base) theme
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
/*****************************
SET DEFAULT DIMENSIONS HERE
*****************************/
/* change the ID to match your slider */
#slider {
width: 700px;
height: 390px;
list-style: none;
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
overflow-y: auto;
overflow-x: hidden;
}
/* Opera width restriction */
.anythingBase { max-width: 32766px; }
/*****************
SET COLORS HERE
*****************/
/**** Default state (no keyboard focus) ****/
/* slider window - top & bottom borders, default state */
div.anythingSlider .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
/* Navigation buttons, default state */
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
background: #777;
color: #000;
}
/* start-stop button, stopped, default state */
div.anythingSlider .start-stop {
background-color: #040;
color: #fff;
}
/* start-stop button, playing, default state */
div.anythingSlider .start-stop.playing {
background-color: #800;
}
/* start-stop button, default hovered text color (when visible) */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #ddd;
}
/**** Active State (slider has keyboard focus) ****/
/* slider window - top & bottom borders, active state */
div.anythingSlider.activeSlider .anythingWindow {
border-color: #7C9127;
}
/* Navigation buttons, active state */
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
background-color: #7C9127;
}
/* start-stop button, stopped, active state */
div.anythingSlider .start-stop {
background-color: #080;
color: #fff;
}
/* start-stop button, playing, active state */
div.anythingSlider .start-stop.playing {
background-color: #d00;
}
/* start-stop button, active slider hovered text color (when visible) */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #fff;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider {
display: block;
margin: 0 auto;
overflow: visible !important; /* needed for Opera and Safari */
position: relative;
padding: 0 45px 28px 45px;
}
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* anythingSlider base (original element) */
.anythingBase {
background: transparent;
list-style: none;
position: absolute;
overflow: visible !important;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
/* all panels inside the slider */
.anythingBase .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}
.anythingBase .panel.vertical {
float: none;
}
/* Navigation Arrows */
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 140px;
margin: -70px 0 0 0; /* half height of image */
width: 45px;
text-align: center;
outline: 0;
background: url(../images/default.png) no-repeat;
}
/* hide text, target the span so IE7 doesn't text-indent the link */
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
/* back arrow */
div.anythingSlider .back { left: 0; }
div.anythingSlider .back a { background-position: left top; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* forward arrow */
div.anythingSlider .forward { right: 0; }
div.anythingSlider .forward a { background-position: right top; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* Navigation Links */
div.anythingSlider .anythingControls { outline: 0; display: none; }
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
div.anythingSlider .anythingControls ul li { display: inline; }
div.anythingSlider .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(../images/default.png);
background-position: center -288px ;
background-repeat: repeat-x;
text-align: center;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .anythingControls ul a:hover {
background-image: none;
}
/* Navigation size window */
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
div.anythingSlider.rtl .anythingWindow {
direction: ltr;
unicode-bidi: bidi-override;
}
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
background-image: url(../images/default.png);
background-position: center -288px;
background-repeat: repeat-x;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
/* hide cell shading on hover - makes the button appear to come forward */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
/* probably not necessary, but added just in case */
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
transition-duration: 0;
-o-transition-duration: 0;
-moz-transition-duration: 0;
-webkit-transition-duration: 0;
}

View File

@@ -0,0 +1,142 @@
/*
AnythingSlider v1.5.10 Construction Theme
By Rob Garrison
*/
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider-construction .anythingWindow {
border-top: 3px solid #333;
border-bottom: 3px solid #333;
}
/* Active State */
div.anythingSlider-construction.activeSlider .anythingWindow {
border-color: #d0aa0d;
}
div.anythingSlider-construction.activeSlider .anythingControls ul a:hover, div.anythingSlider-construction.activeSlider .anythingControls ul a {
background-color: transparent;
}
/* Navigation Arrows */
div.anythingSlider-construction .arrow {
top: 50%;
position: absolute;
display: block;
z-index: 100;
}
div.anythingSlider-construction .arrow a {
display: block;
height: 300px;
margin-top: -150px; /* half height of image */
width: 45px;
outline: 0;
background: url(../images/construction.gif) no-repeat;
}
div.anythingSlider-construction .forward a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
div.anythingSlider-construction .back a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
div.anythingSlider-construction .forward { right: 0; }
div.anythingSlider-construction .back { left: 0; }
div.anythingSlider-construction .forward a { background-position: right top; }
div.anythingSlider-construction .back a { background-position: left top; }
div.anythingSlider-construction .forward a:hover, div.anythingSlider-construction .forward a.hover { background-position: -50px top; }
div.anythingSlider-construction .back a:hover, div.anythingSlider-construction .back a.hover { background-position: -5px top; }
/* Navigation Links */
div.anythingSlider-construction .anythingControls {
float: right;
position: absolute;
bottom: 0;
right: 15%;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
}
div.anythingSlider-construction .anythingControls ul {
margin: 0;
z-index: 100;
}
div.anythingSlider-construction .anythingControls ul li {
display: block;
float: left;
}
div.anythingSlider-construction .anythingControls ul a, div.anythingSlider-construction.activeSlider .anythingControls ul a,
div.anythingSlider-construction .anythingControls a.start-stop {
display: block;
background: transparent url(../images/construction.gif) -36px -301px no-repeat;
border: 0;
height: 15px;
width: 15px;
margin: 2px;
padding: 0;
outline: 0;
}
div.anythingSlider-construction div.anythingControls a:hover, div.anythingSlider-construction .anythingControls ul a.cur,
div.anythingSlider-construction.activeSlider .anythingControls ul a.cur {
background: transparent url(../images/construction.gif) -21px -301px no-repeat;
}
/* Navigation size window arrows */
div.anythingSlider-construction .anythingControls li.next a, div.anythingSlider-construction .anythingControls li.prev a {
height: 12px;
width: 12px;
margin-top: 3px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: transparent url(../images/construction.gif) no-repeat;
}
div.anythingSlider-construction .anythingControls li.next a {
background-position: -78px -144px;
}
div.anythingSlider-construction .anythingControls li.prev a {
background-position: -12px -144px;
}
div.anythingSlider-construction .anythingControls li.next a:hover {
background: transparent url(../images/construction.gif) -76px -144px no-repeat;
}
div.anythingSlider-construction .anythingControls li.prev a:hover {
background: transparent url(../images/construction.gif) -14px -144px no-repeat;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider-construction.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider-construction.rtl .anythingControls ul { float: left; } /* move nav link group to left */
/* div.anythingSlider-construction.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider-construction .anythingControls a.start-stop {
display: inline-block;
background: transparent url(../images/construction.gif) -66px -301px no-repeat;
z-index: 100;
float: right;
}
div.anythingSlider-construction .anythingControls a.start-stop.playing, div.anythingSlider-construction.activeSlider .anythingControls a.start-stop.playing {
background-position: -51px -301px;
}
div.anythingSlider-construction .anythingControls a.start-stop:hover, div.anythingSlider-construction .anythingControls a.start-stop.playing:hover {
background-position: -21px -301px;
}
/* Extra - replace defaults */
div.anythingSlider-construction {
padding: 6px 45px;
}
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-construction .arrow a span, div.anythingSlider-construction .anythingControls ul a span, div.anythingSlider-construction .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
text-indent: -9999px;
}

View File

@@ -0,0 +1,148 @@
/*
AnythingSlider v1.5.10 cs-portfolio
By Curtis Scott (http://www.curtisscott.com/portfolio.html)
updated to work with the new themes
*/
/*** Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png,
through which the background color is seen... so colors set will turn out darker than normal ***/
/****** SET COLORS HERE *******/
/* Default/Acitve State */
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a {
background-color: #fff;
}
div.anythingSlider-cs-portfolio .anythingControls ul a:hover, div.anythingSlider-cs-portfolio .anythingControls ul a.cur,
div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a:hover, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a.cur {
background-color: #0d5c9f;
}
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover {
background-color: #080;
}
div.anythingSlider-cs-portfolio .start-stop:hover {
background-color: #0f0;
}
div.anythingSlider-cs-portfolio .start-stop.playing {
background-color: #a00;
}
div.anythingSlider-cs-portfolio .start-stop.playing:hover {
background-color: #f00;
}
/* Overall */
div.anythingSlider-cs-portfolio {}
div.anythingSlider-cs-portfolio .anythingWindow, div.anythingSlider-cs-portfolio.activeSlider .anythingWindow {
border: 0;
}
/* Navigation Arrows */
div.anythingSlider-cs-portfolio .arrow {
display: block;
bottom: 7px; /* this is -18px for IE7 */
position: absolute;
z-index: 100;
}
div.anythingSlider-cs-portfolio .arrow a {
display: block;
bottom: 5px;
position: absolute;
height: 27px;
width: 26px;
outline: 0;
background: url(../images/cs-portfolio.png) no-repeat;
}
div.anythingSlider-cs-portfolio .forward { right: 70px; }
div.anythingSlider-cs-portfolio .back { left: 20px; }
div.anythingSlider-cs-portfolio .forward a { background-position: -24px top; }
div.anythingSlider-cs-portfolio .back a { background-position: left top; }
div.anythingSlider-cs-portfolio .forward a:hover, div.anythingSlider-cs-portfolio .forward a.hover { background-position: -24px -27px; }
div.anythingSlider-cs-portfolio .back a:hover, div.anythingSlider-cs-portfolio .back a.hover { background-position: left -27px; }
/* Navigation Links */
div.anythingSlider-cs-portfolio .anythingControls {
background: url(../images/cs-portfolio.png) repeat-x bottom center;
height: 49px;
margin: 0 auto 49px auto;
padding-left: 150px;
text-align: center;
z-index: 100;
}
div.anythingSlider-cs-portfolio .anythingControls ul {
margin: 0;
z-index: 100;
}
div.anythingSlider-cs-portfolio .anythingControls ul li {
padding: 0;
display: inline;
}
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a {
display: inline-block;
width: 17px;
height: 17px;
margin: 18px 5px 0 0;
padding: 0;
outline: 0;
border: 0;
}
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a,
div.anythingSlider-cs-portfolio .anythingControls ul a:hover, div.anythingSlider-cs-portfolio .anythingControls ul a.cur,
div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a:hover, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a.cur {
background-image: url(../images/cs-portfolio.png);
background-position: right -20px;
background-repeat: no-repeat;
}
/* Navigation size window arrows */
div.anythingSlider-cs-portfolio .anythingControls li.next a, div.anythingSlider-cs-portfolio .anythingControls li.prev a,
div.anythingSlider-cs-portfolio .anythingControls li.next a:hover, div.anythingSlider-cs-portfolio .anythingControls li.prev a:hover {
width: 16px;
height: 15px;
background: url(../images/cs-portfolio.png) -25px -54px no-repeat;
margin: 19px 5px 0 5px;
}
div.anythingSlider-cs-portfolio .anythingControls li.prev a {
background-position: -9px -54px;
}
div.anythingSlider-cs-portfolio .anythingControls li.next a:hover {
background-position: -56px -54px;
}
div.anythingSlider-cs-portfolio .anythingControls li.prev a:hover {
background-position: -41px -54px;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider-cs-portfolio.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider-cs-portfolio.rtl .anythingControls ul { float: left; } /* move nav link group to left */
/* div.anythingSlider-cs-portfolio.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover {
margin: 15px 50px 0 0;
padding: 0;
display: inline-block;
text-align: center;
width: 20px;
height: 20px;
z-index: 100;
border: 0;
}
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover,
div.anythingSlider-cs-portfolio .start-stop:hover, div.anythingSlider-cs-portfolio .start-stop.playing,
div.anythingSlider-cs-portfolio .start-stop.playing:hover {
background-image: url(../images/cs-portfolio.png);
background-position: right top;
background-repeat: no-repeat;
}
/* Extra - replace defaults */
div.anythingSlider-cs-portfolio {
padding: 0 23px 50px 0;
}
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-cs-portfolio .arrow a span, div.anythingSlider-cs-portfolio .anythingControls ul a span, div.anythingSlider-cs-portfolio .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
text-indent: -9999px;
}

View File

@@ -0,0 +1,146 @@
/*
AnythingSlider v1.5.10 Metallic Theme
By Rob Garrison
*/
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider-metallic .anythingWindow {
border-top: 3px solid #333;
border-bottom: 3px solid #333;
}
div.anythingSlider-metallic .anythingControls ul a {
border: 1px solid #000;
}
div.anythingSlider-metallic .start-stop {
border: 1px solid #000;
}
div.anythingSlider-metallic .start-stop.playing {
background-color: #300;
}
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
color: #ddd;
}
/* Active State */
div.anythingSlider-metallic.activeSlider .anythingWindow {
border-color: #0355a3;
}
div.anythingSlider-metallic.activeSlider .anythingControls ul a {
background-color: transparent;
background-position: -68px -40px;
}
div.anythingSlider-metallic.activeSlider .anythingControls ul a:hover, div.anythingSlider-metallic.activeSlider .anythingControls ul a.cur {
background-position: -76px -57px;
/* background: #fff; */
}
div.anythingSlider-metallic.activeSlider .start-stop.playing {
background-color: #f00;
}
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
color: #fff;
}
/* Navigation Arrows */
div.anythingSlider-metallic .arrow {
top: 50%;
position: absolute;
display: block;
z-index: 100;
}
div.anythingSlider-metallic .arrow a {
display: block;
height: 95px;
margin-top: -47px; /* half height of image */
width: 45px;
outline: 0;
background: url(../images/arrows-metallic.png) no-repeat;
}
div.anythingSlider-metallic .forward { right: 0; }
div.anythingSlider-metallic .back { left: 0; }
div.anythingSlider-metallic .forward a { background-position: right bottom; }
div.anythingSlider-metallic .back a { background-position: left bottom; }
div.anythingSlider-metallic .forward a:hover, div.anythingSlider-metallic .forward a.hover { background-position: right top; }
div.anythingSlider-metallic .back a:hover, div.anythingSlider-metallic .back a.hover { background-position: left top; }
/* Navigation Links */
div.anythingSlider-metallic .anythingControls {
float: right;
position: absolute;
bottom: 0;
right: 15%;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
}
div.anythingSlider-metallic .anythingControls ul {
margin: 0;
z-index: 100;
}
div.anythingSlider-metallic .anythingControls ul li {
display: block;
float: left;
}
div.anythingSlider-metallic .anythingControls ul a {
display: block;
background: transparent url(../images/arrows-metallic.png) -68px -136px no-repeat;
height: 10px;
width: 10px;
margin: 3px;
padding: 0;
outline: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.anythingSlider-metallic .anythingControls ul a:hover, div.anythingSlider-metallic .anythingControls ul a.cur {
background: transparent url(../images/arrows-metallic.png) -76px -57px no-repeat;
}
/* Navigation size window arrows */
div.anythingSlider-metallic .anythingControls li.next a span, div.anythingSlider-metallic .anythingControls li.prev a span {
text-indent: 1px;
margin-top: 3px;
}
div.anythingSlider-metallic .anythingControls li.prev a, div.anythingSlider-metallic .anythingControls li.next a {
color: #ddd;
}
div.anythingSlider-metallic .anythingControls li.next a:hover, div.anythingSlider-metallic .anythingControls li.prev a:hover {
color: #000;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider-metallic.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider-metallic.rtl .anythingControls ul { float: left; } /* move nav link group to left */
/* div.anythingSlider-metallic.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider-metallic .start-stop {
margin: 3px;
padding: 0;
display: inline-block;
width: 14px;
height: 14px;
position: relative;
bottom: 2px;
left: 0;
z-index: 100;
float: right;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Extra - replace defaults */
div.anythingSlider-metallic {
padding: 6px 23px;
}
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-metallic .arrow a span, div.anythingSlider-metallic .anythingControls ul a span, div.anythingSlider-metallic .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
text-indent: -9999px;
}

View File

@@ -0,0 +1,144 @@
/*
AnythingSlider v1.5.10 Minimalist Round Theme
By Rob Garrison
*/
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider-minimalist-round .anythingWindow {
border-top: 3px solid #333;
border-bottom: 3px solid #333;
}
div.anythingSlider-minimalist-round .anythingControls ul a {
border: 1px solid #000;
background: #333;
}
div.anythingSlider-minimalist-round .anythingControls ul a:hover, div.anythingSlider-minimalist-round .anythingControls ul a.cur {
background: #777;
}
div.anythingSlider-minimalist-round .start-stop {
border: 1px solid #000;
}
div.anythingSlider-minimalist-round .start-stop.playing {
background-color: #300;
}
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
color: #ddd;
}
/* Active State */
div.anythingSlider-minimalist-round.activeSlider .anythingWindow {
border-color: #164054;
}
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a {
background-color: #164054;
}
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a.cur {
background: #fff;
}
div.anythingSlider-minimalist-round.activeSlider .start-stop.playing {
background-color: #f00;
}
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
color: #fff;
}
/* Navigation Arrows */
div.anythingSlider-minimalist-round .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider-minimalist-round .arrow a {
display: block;
height: 40px;
margin-top: -20px; /* half height of image */
width: 30px;
text-align: center;
outline: 0;
background: url(../images/arrows-minimalist.png) no-repeat;
}
div.anythingSlider-minimalist-round .forward { right: 0; }
div.anythingSlider-minimalist-round .back { left: 0; }
div.anythingSlider-minimalist-round .forward a { background-position: right bottom; }
div.anythingSlider-minimalist-round .back a { background-position: left bottom; }
div.anythingSlider-minimalist-round .forward a:hover, div.anythingSlider-minimalist-round .forward a.hover { background-position: right top; }
div.anythingSlider-minimalist-round .back a:hover, div.anythingSlider-minimalist-round .back a.hover { background-position: left top; }
/* Navigation Links */
div.anythingSlider-minimalist-round .anythingControls {
float: right;
position: absolute;
bottom: 0;
right: 15%;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
}
div.anythingSlider-minimalist-round .anythingControls ul {
margin: 0;
z-index: 100;
}
div.anythingSlider-minimalist-round .anythingControls ul li {
display: block;
float: left;
}
div.anythingSlider-minimalist-round .anythingControls ul a {
display: block;
height: 10px;
width: 10px;
margin: 3px;
padding: 0;
outline: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* Navigation size window arrows */
div.anythingSlider-minimalist-round .anythingControls li.next a span, div.anythingSlider-minimalist-round .anythingControls li.prev a span {
text-indent: 1px;
margin-top: 3px;
}
div.anythingSlider-minimalist-round .anythingControls li.prev a, div.anythingSlider-minimalist-round .anythingControls li.next a {
color: #ddd;
}
div.anythingSlider-minimalist-round .anythingControls li.next a:hover, div.anythingSlider-minimalist-round .anythingControls li.prev a:hover {
color: #000;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider-minimalist-round.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider-minimalist-round.rtl .anythingControls ul { float: left; } /* move nav link group to left */
/* div.anythingSlider-minimalist-round.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider-minimalist-round .start-stop {
margin: 3px;
padding: 0;
display: inline-block;
width: 14px;
height: 14px;
position: relative;
bottom: 2px;
left: 0;
z-index: 100;
text-align: center;
text-decoration: none;
float: right;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Extra - replace defaults */
div.anythingSlider-minimalist-round {
padding: 6px 30px;
}
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-minimalist-round .arrow a span, div.anythingSlider-minimalist-round .anythingControls ul a span, div.anythingSlider-minimalist-round .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
text-indent: -9999px;
}

View File

@@ -0,0 +1,144 @@
/*
AnythingSlider v1.5.10 Minimalist Square Theme
By Rob Garrison
*/
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider-minimalist-square .anythingWindow {
border-top: 3px solid #333;
border-bottom: 3px solid #333;
}
div.anythingSlider-minimalist-square .anythingControls ul a {
border: 1px solid #000;
background: #333;
}
div.anythingSlider-minimalist-square .anythingControls ul a:hover, div.anythingSlider-minimalist-square .anythingControls ul a.cur {
background: #777;
}
div.anythingSlider-minimalist-square .start-stop {
border: 1px solid #000;
}
div.anythingSlider-minimalist-square .start-stop.playing {
background-color: #300;
}
div.anythingSlider-minimalist-square .start-stop:hover, div.anythingSlider-minimalist-square .start-stop.hover {
color: #ddd
}
/* Active State */
div.anythingSlider-minimalist-square.activeSlider .anythingWindow {
border-color: #164054;
}
div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a {
background-color: #164054;
}
div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a.cur {
background: #fff;
}
div.anythingSlider-minimalist-square.activeSlider .start-stop.playing {
background-color: #f00;
}
div.anythingSlider-minimalist-square .start-stop:hover, div.anythingSlider-minimalist-square .start-stop.hover {
color: #fff
}
/* Navigation Arrows */
div.anythingSlider-minimalist-square .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider-minimalist-square .arrow a {
display: block;
height: 40px;
margin-top: -20px; /* half height of image */
width: 30px;
text-align: center;
outline: 0;
background: url(../images/arrows-minimalist.png) no-repeat;
}
div.anythingSlider-minimalist-square .forward { right: 0; }
div.anythingSlider-minimalist-square .back { left: 0; }
div.anythingSlider-minimalist-square .forward a { background-position: right bottom; }
div.anythingSlider-minimalist-square .back a { background-position: left bottom; }
div.anythingSlider-minimalist-square .forward a:hover, div.anythingSlider-minimalist-square .forward a.hover { background-position: right top; }
div.anythingSlider-minimalist-square .back a:hover, div.anythingSlider-minimalist-square .back a.hover { background-position: left top; }
/* Navigation Links */
div.anythingSlider-minimalist-square .anythingControls {
float: right;
position: absolute;
bottom: 0;
right: 15%;
z-index: 100;
opacity: 0.75;
filter: alpha(opacity=75);
}
div.anythingSlider-minimalist-square .anythingControls ul {
margin: 0;
z-index: 100;
}
div.anythingSlider-minimalist-square .anythingControls ul li {
display: block;
float: left;
}
div.anythingSlider-minimalist-square .anythingControls ul a {
display: block;
height: 10px;
width: 10px;
margin: 3px;
padding: 0;
outline: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
/* Navigation size window arrows */
div.anythingSlider-minimalist-square .anythingControls li.next a span, div.anythingSlider-minimalist-square .anythingControls li.prev a span {
text-indent: 1px;
margin-top: 3px;
}
div.anythingSlider-minimalist-square .anythingControls li.prev a, div.anythingSlider-minimalist-square .anythingControls li.next a {
color: #ddd;
}
div.anythingSlider-minimalist-square .anythingControls li.next a:hover, div.anythingSlider-minimalist-square .anythingControls li.prev a:hover {
color: #000;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider-minimalist-square.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider-minimalist-square.rtl .anythingControls ul { float: left; } /* move nav link group to left */
/* div.anythingSlider-minimalist-square.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider-minimalist-square .start-stop {
margin: 3px;
padding: 0;
display: inline-block;
width: 14px;
height: 14px;
position: relative;
bottom: 2px;
left: 0;
z-index: 100;
text-align: center;
text-decoration: none;
float: right;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
/* Extra - replace defaults */
div.anythingSlider-minimalist-square {
padding: 6px 30px;
}
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
div.anythingSlider-minimalist-square .arrow a span, div.anythingSlider-minimalist-square .anythingControls ul a span, div.anythingSlider-minimalist-square .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
text-indent: -9999px;
}

View File

@@ -0,0 +1,740 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider FX Demos</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) & jQuery UI (for this demo only) -->
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery-ui.min.js"></script>
<!-- Anything Slider optional plugins -->
<script src="js/jquery.easing.1.2.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- Ideally, add the stylesheet(s) you are going to use here,
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
<link rel="stylesheet" href="css/theme-metallic.css" media="screen">
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<!-- AnythingSlider optional FX extension -->
<script src="js/jquery.anythingslider.fx.js"></script>
<!-- Demos page only -->
<link rel="stylesheet" href="demos/css/page.css">
<link rel="stylesheet" href="demos/colorbox/colorbox.css">
<script src="demos/js/demo.js"></script>
<script src="demos/colorbox/jquery.colorbox-min.js"></script>
</head>
<body>
<div id="demo2">
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a href="expand.html">Expand Demo</a>
<a href="video.html">Video Demo</a>
<a class="current" href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<h1>AnythingSlider FX Demos</h1>
<h2 class="title">Demo 1: Thumbnails &amp; A Lightbox</h2>
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li><img src="demos/images/slide-civil-1.jpg" alt="" title="In Soviet Russia, concrete pours you!"></li>
<li><img src="demos/images/slide-env-1.jpg" alt="" title="How many supervisors are there? Wrong! 5, who is taking the picture?"></li>
<li><img src="demos/images/slide-civil-2.jpg" alt="" title="Alas, the pylon would never make it to the hydrant, her true love."></li>
<li><img src="demos/images/slide-env-2.jpg" alt="" title="Take a left at the traffic circle."></li>
</ul>
<!-- END AnythingSlider #1 -->
<br />
<div class="accordion">
<h3><a href="#">Demo 1 Notes</a></h3>
<div>
<ul>
<li>Hover over the demo 1 slider to reveal the thumbnail navigation links - This sliding feature is part of the core AnythingSlider plugin (<code>toggleControls</code> is set to true).</li>
<li>Thumbnail images<br /><br />
<ul>
<li>For this demo, the thumbnail images are premade; but with some server side scripting and modification to the <code>navigationFormatter</code> code, you should be able to create and link to your own thumbnail images.</li>
<li>CSS is required to override the metallic theme CSS for thumbnail images to be visible (resize and remove negative text indentation), or you can make a new theme.</li>
<li>Add images using the <code>navigationFormatter</code> option as follows:<br /><br />
<pre><code> navigationFormatter : function(i, panel){
return '&lt;img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg"&gt;';
}</code></pre>
</li>
</ul>
</li>
<li>Lightbox Popup (<a href="http://colorpowered.com/colorbox/">Colorbox</a> plugin)<br /><br />
<ul>
<li>Click on the current slider image to open a light box. Press escape or click on the (X) in the lower right corner to close it.</li>
<li>Additional CSS is required to modify the Colorbox plugin. The CSS expands the image to completely fill the inside the colorbox popup. Adjust as desired to keep the image proportional.</li>
<li>The script attaches a colorbox popup to all images inside the slider. Add a class to the images to modify this behaviour.</li>
<li>The colorbox popup will contain all the current slider images. In the script the name "group" is added to all images in the "rel" attribute. This can be done in the HTML to target only the images to be shown in the colorbox - then remove the <code>.attr('rel','group')</code> in the script.</li>
</ul>
</li>
<li>The AnythingSlider FX extension is not required to add any of the above functionality.</li>
</ul>
</div>
<h3><a href="#">Header</a></h3>
<div>
<pre><code> &lt;!-- jQuery --&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider optional plugins --&gt;
&lt;script src=&quot;js/jquery.easing.1.2.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider --&gt;
&lt;link href=&quot;css/anythingslider.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.anythingslider.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- ColorBox --&gt;
&lt;link href=&quot;demos/colorbox/colorbox.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;demos/colorbox/jquery.colorbox-min.js&quot;&gt;&lt;/script&gt;</code></pre>
</div>
<h3><a href="#">CSS &amp; HTML</a></h3>
<div>
<pre><code>/* New in version 1.7+ */
#slider1 {
width: 400px;
height: 300px;
list-style: none;
}
/* CSS to expand the image to fit inside colorbox */
#cboxPhoto { width: 100%; height: 100%; margin: 0 !important; }
/* Change metallic theme defaults to show thumbnails -
using #demo2 (page wrapper) to increase this CSS priority */
#demo2 div.anythingSlider-metallic .thumbNav a {
background-image: url();
height: 30px;
width: 30px;
border: #000 1px solid;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-indent: 0;
}
/* border around link (image) to show current panel */
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
#demo2 div.anythingSlider-metallic .thumbNav a.cur {
border-color: #fff;
}
/* reposition the start/stop button */
#demo2 div.anythingSlider-metallic .start-stop {
margin-top: 15px;
}</code></pre>
<br>
<pre><code>&lt;ul id=&quot;slider1&quot;&gt;
&lt;li&gt;&lt;img src=&quot;demos/images/slide-civil-1.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;demos/images/slide-env-1.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;demos/images/slide-civil-2.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;demos/images/slide-env-2.jpg&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
<h3><a href="#">Script</a></h3>
<div><pre><code>$(function(){
$('#slider1')
.anythingSlider({
toggleControls : true,
theme : 'metallic',
navigationFormatter : function(i, panel){ // add thumbnails as navigation links
return '&lt;img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg"&gt;';
}
})
// target all images inside the current slider
// replace with 'img.someclass' to target specific images
.find('.panel:not(.cloned) img') // ignore the cloned panels
.attr('rel','group') // add all slider images to a colorbox group
.colorbox({
width: '90%',
height: '90%',
href: function(){ return $(this).attr('src'); },
// use $(this).attr('title') for specific image captions
title: 'Press escape to close',
rel: 'group'
});
});</code></pre>
</div>
</div>
<br><br>
<h2 class="title">Demo 2: FX Extension Panel Effects</h2>
<!-- AnythingSlider #2 -->
<ul id="slider2">
<li class="panel1">
<div>
<div class="textSlide">
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<p>~ Les Dawson</p></blockquote>
</div>
</li>
<li class="panel3">
<img class="expand" src="demos/images/slide-tele-1.jpg" alt="" />
</li>
<li class="panel4" id="quote2">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you&#8217;re talking to someone you&#8217;ve probably never met so it&#8217;s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li class="panel5">
<img class="fade" src="demos/images/slide-tele-2.jpg" alt="" />
</li>
</ul>
<!-- END AnythingSlider #2 -->
<br>
<div class="accordion">
<h3><a href="#">Demo 2 Notes</a></h3>
<div>
<ul>
<li>The AnythingSlider FX extension is required to add this functionality.</li>
<li>No additional CSS is required, unless it is used for a specific element (see the captions section).</li>
<li>Effects Methods:<br><br>
<ul>
<li>The effects are set up so that the slider element on each panel is in its default (final) position in the "inFx" definition (element positions to zero, opacity to 1, etc) and the "outFX" definitions are set the other position the element is in to achieve the animation.</li>
<li>The script binds to the "slide_init" (for "outFx" animation) and "slide_complete" (for "inFx" animation) anythingSlider events.</li>
<li>The base effects are predefined shortcut methods. I have included the custom effect equivalents to these base effects in the script examples.</li>
</ul>
</li>
<li>Base effects:<br><br>
<ul>
<li>Base effects are standard effects: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, <code>fade</code>, <code>expand</code>, <code>listLR</code>, <code>listRL</code>, <code>caption-Top</code>, <code>caption-Right</code>, <code>caption-Bottom</code>, <code>caption-Left</code>.</li>
<li>Use the base effects as follows:<br><br>
<pre><code> $('#slider2').anythingSliderFx({
'.selector1' : [ 'effect(s)', 'size', 'time', 'easing' ],
'.selector2' : [ 'effect(s)', 'size', 'time', 'easing' ]
});</code></pre>
'size', 'time' and 'easing' are optional, but they must remain in that order. So if you want to add an effect time, you must also set a size - <code>[ 'effect(s)', 'size', 'time' ]</code>. To add an easing, all parameters must be included.</li>
<li>Defaults: If 'size', 'time' or 'easing' is not defined, it will be set to its default value:<br><br>
<ul>
<li>size : based on initial slider height and width</li>
<li>'inFx' time : 400 (ms)</li>
<li>'outFx' time : 350 (ms)</li>
<li>easing : 'swing'</li>
</ul>
</li>
<li>How base effects are setup:<br><br>
<ul>
<li><code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>: Default 'inFx' position is zero, 'outFx' position is based on the initial slider height and width.</li>
<li><code>fade</code>: Default 'inFx' has an opacity set to one, 'outFx' opacity is zero.</li>
<li><code>expand</code>: Default 'inFx' sets the width to 100%, left and right positions to 0%; the 'outFx' width is set to 10%, left and right set to 50% to somewhat center the image. When changing this size option, use percentage values, but anything more than 20% the image position will noticeably be not centered.</li>
<li><code>listLR</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (L)eft and ':even' elements move (R)ight the width of the slider.</li>
<li><code>listRL</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (R)ight and ':even' elements move (L)eft the width of the slider.</li>
<li><code>caption-{direction}</code>: This effect is opposite of the others. The default 'inFx' positions the element so it is in view while the 'outFx' positions the element out of view. See demo 3 for more details.</li>
</ul>
</li>
<li>Combine any of these standard effects as desired (e.g. "top fade"); but of course, using 'top bottom' will not work as you expect (unless you wanted to blow up your computer ;) LOL).</li>
</ul>
</li>
<li>Custom effects:<br><br>
<ul>
<li>Custom effects allow you to use any of the standard jQuery animation parameters (e.g. top, left, margin, padding, width, height, etc). See the examples below.</li>
<li>Custom effects can be mixed in with base effects as desired.</li>
<li>When using custom effects it is important that each element with an 'inFx' method has a matching 'outFx' method, or those elements will be abnormally positioned and/or disappear from view.</li>
<li>Standard setup for custom effects is as follows (there is no specific order required):<br><br>
<pre><code> $('#slider1').anythingSliderFx({
inFx : {
'.selector1' : { top : 0, duration: 400, easing : 'easeOutBounce' },
'.selector2' : { left: 0, duration: 400 }
},
// out = the animation that occurs when you slide "out" of a panel
// (it also occurs before the "in" animation)
outFx : {
'.selector1' : { top : '-100px', duration: 350 },
'.selector2' : { left : '-200px' }
}</code></pre></li>
<li>Defaults: if 'time' or 'easing' is not defined in the custom effects code, it will be set to its default value:<br><br>
<ul>
<li>'inFx' time : 400 (ms)</li>
<li>'outFx' time : 350 (ms)</li>
<li>easing : 'swing'</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Header</a></h3>
<div>
<pre><code> &lt;!-- jQuery --&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider optional plugins --&gt;
&lt;script src=&quot;js/jquery.easing.1.2.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider --&gt;
&lt;link href=&quot;css/anythingslider.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.anythingslider.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider optional FX extension --&gt;
&lt;script src=&quot;js/jquery.anythingslider.fx.min.js&quot;&gt;&lt;/script&gt;</code></pre>
</div>
<h3><a href="#">CSS &amp; HTML</a></h3>
<div><pre><code>/* New in version 1.7+ */
#slider2 {
width: 600px;
height: 350px;
list-style: none;
}</code></pre>
There is no change from the standard HTML setup, unless you want to add more specific classes so you can target them with effects.<br><br>
<pre><code> &lt;ul id=&quot;slider2&quot;&gt;
&lt;li class=&quot;panel1&quot;&gt;
&lt;div class=&quot;textSlide&quot;&gt;
&lt;img src=&quot;demos/images/251356.jpg&quot; alt=&quot;tomato sandwich&quot; style=&quot;float: right;
margin: 0 0 2px 10px;&quot;&gt;
&lt;h3&gt;Queenie's Killer Tomato Bagel Sandwich&lt;/h3&gt;
&lt;h4&gt;Ingredients&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;1 bagel, split and toasted&lt;/li&gt;
&lt;li&gt;2 tablespoons cream cheese&lt;/li&gt;
&lt;li&gt;1 roma (plum) tomatoes, thinly sliced&lt;/li&gt;
&lt;li&gt;salt and pepper to taste&lt;/li&gt;
&lt;li&gt;4 leaves fresh basil&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;panel2&quot;&gt;
&lt;div class=&quot;quoteSlide&quot;&gt;
&lt;blockquote&gt;In awe I watched the waxing moon ride across the zenith of
the heavens like an ambered chariot towards the ebon void of infinite space
wherein the tethered belts of Jupiter and Mars hang forever festooned in
their orbital majesty. And as I looked at all this I thought... I must put
a roof on this lavatory.&lt;br&gt;-- Les Dawson&lt;/blockquote&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;panel3&quot;&gt;
&lt;img class=&quot;expand&quot; src=&quot;demos/images/slide-tele-1.jpg&quot; alt=&quot;&quot;&gt;
&lt;/li&gt;
&lt;li class=&quot;panel4&quot;&gt;
&lt;div class=&quot;quoteSlide&quot;&gt;
&lt;blockquote&gt;Life is conversational. Web design should be the same way.
On the web, you&amp;#8217;re talking to someone you&amp;#8217;ve probably
never met &#x2013; so it&amp;#8217;s important to be clear and precise.
Thus, well structured navigation and content organization goes hand in hand
with having a good conversation.&lt;/blockquote&gt;
&lt;p&gt;
- &lt;a href='http://quotesondesign.com/chikezie-ejiasi/'&gt;Chikezie Ejiasi&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;panel5&quot;&gt;
&lt;img class=&quot;fade&quot; src=&quot;demos/images/slide-tele-2.jpg&quot; alt=&quot;&quot;&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
<h3><a href="#">Script - FX addon, using base FX</a></h3>
<div><pre><code>$(function(){
$('#slider2') // Demo 2 code, using FX base effects
.anythingSlider({
resizeContents : false,
navigationFormatter : function(i, panel){
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
}
})
.anythingSliderFx({
// base FX definitions
// '.selector' : [ 'effect(s)', 'size', 'time', 'easing' ]
// 'size', 'time' and 'easing' are optional parameters, but must be kept in order if added
'.quoteSlide:first *' : [ 'grow', '24px', '400', 'easeInOutCirc' ],
'.quoteSlide:last' : [ 'top', '500px', '400', 'easeOutElastic' ],
'.expand' : [ 'expand', '10%', '400', 'easeOutBounce' ],
'.textSlide h3' : [ 'top fade', '200px', '500', 'easeOutBounce' ],
'.textSlide img,.fade': [ 'fade' ],
'.textSlide li' : [ 'listLR' ]
});
});</code></pre>
* Note: Each definition should end with a comma except for the last - see examples above.
</div>
<h3><a href="#">Script - FX addon, using custom FX</a></h3>
<div><pre><code>$(function(){
$('#slider2') // Demo 2 code, using FX full control
.anythingSlider({
resizeContents : false,
navigationFormatter : function(i, panel){
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
}
})
.anythingSliderFx({
// base FX definitions can be mixed and matched in here too.
'.fade' : [ 'fade' ],
// for more precise control, use the "inFx" and "outFx" definitions
// inFx = the animation that occurs when you slide "in" to a panel
inFx : {
'.textSlide h3' : { opacity: 1, top : 0, duration: 400, easing : 'easeOutBounce' },
'.textSlide li' : { opacity: 1, left : 0, duration: 400 },
'.textSlide img' : { opacity: 1, duration: 400 },
'.quoteSlide' : { top : 0, duration: 400, easing : 'easeOutElastic' },
'.expand' : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
},
// out = the animation that occurs when you slide "out" of a panel
// (it also occurs before the "in" animation)
outFx : {
'.textSlide h3' : { opacity: 0, top : '-100px', duration: 350 },
'.textSlide li:odd' : { opacity: 0, left : '-200px', duration: 350 },
'.textSlide li:even' : { opacity: 0, left : '200px', duration: 350 },
'.textSlide img' : { opacity: 0, duration: 350 },
'.quoteSlide:first' : { top : '-500px', duration: 350 },
'.quoteSlide:last' : { top : '500px', duration: 350 },
'.expand' : { width: '10%', top: '50%', left: '50%', duration: 350 }
}
});
});</code></pre>
* Note: Each definition should end with a comma except for the last - see examples above.
</div>
</div>
<br><br>
<h2 class="title">Demo 3: Sliding Captions</h2>
<!-- AnythingSlider #3 -->
<ul id="slider3">
<li class="panel1">
<!-- Note this caption is before the image, all others it is after -->
<div class="caption-top">In Soviet Russia, concrete pours you!</div>
<img src="demos/images/slide-civil-1.jpg" alt="" />
</li>
<li class="panel2">
<img src="demos/images/slide-env-1.jpg" alt="" />
<div class="caption-right">How many supervisors are there? Wrong! 5, who is taking the picture?</div>
</li>
<li class="panel3">
<img src="demos/images/slide-civil-2.jpg" alt="" />
<div class="caption-bottom">Alas, the pylon would never make it to the hydrant, her true love.</div>
</li>
<li class="panel4">
<img src="demos/images/slide-env-2.jpg" alt="" />
<div class="caption-left">Take a left at the traffic circle.</div>
</li>
</ul>
<!-- END AnythingSlider #3 -->
<br>
<div class="accordion">
<h3><a href="#">Demo 3 Notes</a></h3>
<div>
<ul>
<li>CSS<br><br>
<ul>
<li>The image needs to be set to 100% height and width because AnythingSlider will only automatically expand solitary objects; but here we have a caption!</li>
<li>Note the caption widths &amp; heights include the padding, so for example the top &amp; bottom caption height is set to 30px instead of 50px to include the 10px padding... same goes for the height of all the captions.</li>
<li>If you are using the close button script, make sure you use the full width and/or height (include padding) as well.</li>
</ul>
</li>
<li>In the HTML, note that the top caption comes before the image; whereas the bottom, left and right caption HTML comes after.</li>
<li>Script<br><br>
<ul>
<li>Hover to show caption<br><br>
<ul>
<li>This code will reveal a caption when hovering over a slider panel, and hide on mouse out.</li>
<li>There is a lot of extra code, for captions in multiple positions, so ideally remove the unused portions to maximize the efficiency of the code.</li>
<li>This script does not need the AnythingSlider FX extension.</li>
</ul>
</li>
<li>Slide in caption on new panel<br><br>
<ul>
<li>This code reveals a caption when a new panel comes into view.</li>
<li>Code examples are included below to show and reveal captions using base and custom FX. These code examples reveal the caption when the panel comes into view and hide it as it scrolls out of view.</li>
<li>A short additional script adds a close button (x) to each caption to allow closing the caption while on a specific panel. CSS to position the button is needed and included.</li>
</ul>
</li>
<li>The script needs to hide the caption when out of view (especially for right and left captions) otherwise they interfere with other panels of the slider.</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Header</a></h3>
<div>
<pre><code> &lt;!-- jQuery --&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider optional plugins --&gt;
&lt;script src=&quot;js/jquery.easing.1.2.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider --&gt;
&lt;link href=&quot;css/anythingslider.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.anythingslider.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Anything Slider optional FX extension --&gt;
&lt;script src=&quot;js/jquery.anythingslider.fx.min.js&quot;&gt;&lt;/script&gt;</code></pre>
</div>
<h3><a href="#">CSS</a></h3>
<div><pre><code>/* New in version 1.7+ */
#slider3 {
width: 500px;
height: 400px;
list-style: none;
}
/* images with caption */
#slider3 img {
width: 100%;
height: 100%;
}
/* position the panels so the captions appear correctly */
#slider3 .panel { position: relative; }
/* captions */
#slider3 .caption-top, #slider3 .caption-right,
#slider3 .caption-bottom, #slider3 .caption-left {
background: #000;
color: #fff;
padding: 10px;
margin: 0;
position: relative;
z-index: 10;
opacity: .8;
filter: alpha(opacity=80);
}
/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-top {
left: 0;
top: 0;
width: 480px;
height: 30px;
}
/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-right {
right: 0;
bottom: 0;
width: 130px;
height: 180px;
}
/* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-bottom {
left: 0;
bottom: 0;
width: 480px;
height: 30px;
}
/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-left {
left: 0;
bottom: 0;
width: 130px;
height: 180px;
}
/* Caption close button */
.caption-top .close, .caption-right .close,
.caption-bottom .close, .caption-left .close {
font-size: 80%;
cursor: pointer;
float: right;
display: inline-block;
}</code></pre>
</div>
<h3><a href="#">HTML</a></h3>
<div><pre><code> &lt;ul id=&quot;slider3&quot;&gt;
&lt;li&gt;
&lt;!-- Note this caption is before the image, all others it is after --&gt;
&lt;div class=&quot;caption-top&quot;&gt;
In Soviet Russia, concrete pours you!
&lt;/div&gt;
&lt;img src=&quot;demos/images/slide-civil-1.jpg&quot; alt=&quot;&quot;&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;demos/images/slide-env-1.jpg&quot; alt=&quot;&quot;&gt;
&lt;div class=&quot;caption-right&quot;&gt;
How many supervisors are there? Wrong! 5, who is taking the picture?
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;demos/images/slide-civil-2.jpg&quot; alt=&quot;&quot;&gt;
&lt;div class=&quot;caption-bottom&quot;&gt;
Alas, the pylon would never make it to the hydrant, her true love.
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;demos/images/slide-env-2.jpg&quot; alt=&quot;&quot;&gt;
&lt;div class=&quot;caption-left&quot;&gt;
Take a left at the traffic circle.
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
<h3><a href="#">Script - Caption appears on hover (FX extension not required)</a></h3>
<div><pre><code>$(function(){
$('#slider3')
.anythingSlider()
/* this code will make the caption appear when you hover over the panel
remove the extra statements if you don't have captions in that location */
.find('.panel')
.find('div[class*=caption]').css({ position: 'absolute' }).end()
.hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });
showCaptions = function(el){
var $this = el;
if ($this.find('.caption-top').length) {
$this.find('.caption-top')
.show()
.animate({ top: 0, opacity: 1 }, 400);
}
if ($this.find('.caption-right').length) {
$this.find('.caption-right')
.show()
.animate({ right: 0, opacity: 1 }, 400);
}
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.show()
.animate({ bottom: 0, opacity: 1 }, 400);
}
if ($this.find('.caption-left').length) {
$this.find('.caption-left')
.show()
.animate({ left: 0, opacity: 1 }, 400);
}
};
hideCaptions = function(el){
var $this = el;
if ($this.find('.caption-top').length) {
$this.find('.caption-top')
.stop()
.animate({ top: -50, opacity: 0 }, 350, function(){
$this.find('.caption-top').hide(); });
}
if ($this.find('.caption-right').length) {
$this.find('.caption-right')
.stop()
.animate({ right: -150, opacity: 0 }, 350, function(){
$this.find('.caption-right').hide(); });
}
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.stop()
.animate({ bottom: -50, opacity: 0 }, 350, function(){
$this.find('.caption-bottom').hide(); });
}
if ($this.find('.caption-left').length) {
$this.find('.caption-left')
.stop()
.animate({ left: -150, opacity: 0 }, 350, function(){
$this.find('.caption-left').hide(); });
}
};
// hide all captions initially
hideCaptions( $('#slider3 .panel') );
});</code></pre>
</div>
<h3><a href="#">Script - FX addon, using base FX</a></h3>
<div><pre><code>$(function(){
$('#slider3')
.anythingSlider()
.anythingSliderFx({
// '.selector' : [ 'caption', 'distance/size', 'time', 'easing' ]
// 'distance/size', 'time' and 'easing' are optional parameters
'.caption-top' : [ 'caption-Top', '50px' ],
'.caption-right' : [ 'caption-Right', '130px', '1000', 'easeOutBounce' ],
'.caption-bottom' : [ 'caption-Bottom', '50px' ],
'.caption-left' : [ 'caption-Left', '130px', '1000', 'easeOutBounce' ]
})
/* add a close button (x) to the caption */
.find('div[class*=caption]')
.css({ position: 'absolute' })
.prepend('&lt;span class="close"&gt;x&lt;/span&gt;')
.find('.close').click(function(){
var cap = $(this).parent(),
ani = { bottom : -50 }; // bottom
if (cap.is('.caption-top')) { ani = { top: -50 }; }
if (cap.is('.caption-left')) { ani = { left: -150 }; }
if (cap.is('.caption-right')) { ani = { right: -150 }; }
cap.animate(ani, 400, function(){ cap.hide(); } );
});
});</code></pre>
</div>
<h3><a href="#">Script - FX addon, using custom FX</a></h3>
<div><pre><code>$(function(){
$('#slider3')
.anythingSlider()
/* this "custom" code is the equivalent of the base caption functions */
.anythingSliderFx({
inFx: {
'.caption-top' : { top: 0, opacity: 0.8, duration: 400 },
'.caption-right' : { right: 0, opacity: 0.8, duration: 400 },
'.caption-bottom' : { bottom: 0, opacity: 0.8, duration: 400 },
'.caption-left' : { left: 0, opacity: 0.8, duration: 400 }
},
outFx: {
'.caption-top' : { top: -50, opacity: 0, duration: 350 },
'.caption-right' : { right: -150, opacity: 0, duration: 350 },
'.caption-bottom' : { bottom: -50, opacity: 0, duration: 350 },
'.caption-left' : { left: -150, opacity: 0, duration: 350 }
}
})
/* add a close button (x) to the caption */
.find('div[class*=caption]')
.css({ position: 'absolute' })
.prepend('&lt;span class="close"&gt;x&lt;/span&gt;')
.find('.close').click(function(){
var cap = $(this).parent(),
ani = { bottom : -50 }; // bottom
if (cap.is('.caption-top')) { ani = { top: -50 }; }
if (cap.is('.caption-left')) { ani = { left: -150 }; }
if (cap.is('.caption-right')) { ani = { right: -150 }; }
cap.animate(ani, 400, function(){ cap.hide(); } );
});
});</code></pre>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider Expanding Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<script>
$(function () {
$('#slider1').anythingSlider({
// theme : 'metallic',
expand : true,
autoPlay : true
});
$('#slider2').anythingSlider({
expand : true,
showMultiple : 2,
changeBy : 2
});
});
</script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body id="expand">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a class="current" href="expand.html">Expand Demo</a>
<a href="video.html">Video Demo</a>
<a href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<!-- End Links -->
<h1>Expanding Slider Demo*</h1>
<h3>* Resize the browser window</h3>
<br>
<h2>Full page width</h2>
<!-- Expanding AnythingSlider 100% width -->
<div id="wrapper1">
<ul id="slider1">
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul>
</div>
<!-- END AnythingSlider -->
<br><br><br><br>
<h2>Half page width with two images showing</h2>
<!-- Expanding AnythingSlider 50% width -->
<div id="wrapper2">
<ul id="slider2">
<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
</ul>
</div>
<!-- END AnythingSlider -->
</body>
</html>

View File

@@ -0,0 +1,497 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Anything Slider optional plugins -->
<script src="js/jquery.easing.1.2.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css" media="screen">
<!-- AnythingSlider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<!-- Ideally, add the stylesheet(s) you are going to use here,
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
<link rel="stylesheet" href="css/theme-metallic.css">
<link rel="stylesheet" href="css/theme-minimalist-round.css">
<link rel="stylesheet" href="css/theme-minimalist-square.css">
<link rel="stylesheet" href="css/theme-construction.css">
<link rel="stylesheet" href="css/theme-cs-portfolio.css">
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<script>
// Demo functions
// **************
$(function(){
// External Link with callback function
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
return false;
});
// External Link
$("a.muppet").click(function(){
$('#slider1').anythingSlider(5);
$(document).scrollTop(0); // make the page scroll to the top so you can watch the video
return false;
});
// Report Events to console & features list
$('#slider1, #slider2').bind('before_initialize initialized swf_completed slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete', function(e, slider){
// show object ID + event (e.g. "slider1: slide_begin")
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
$('#status').text(txt);
if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
});
// Theme Selector (This is really for demo purposes only)
var themes = ['minimalist-round','minimalist-square','metallic','construction','cs-portfolio'];
$('#currentTheme').change(function(){
var theme = $(this).val();
$('#slider1').closest('div.anythingSlider')
.removeClass( $.map(themes, function(t){ return 'anythingSlider-' + t; }).join(' ') )
.addClass('anythingSlider-' + theme);
$('#slider1').anythingSlider(); // update slider - needed to fix navigation tabs
});
// Add a slide
var imageNumber = 1;
$('button.add').click(function(){
$('#slider1')
.append('<li><img src="demos/images/slide-tele-' + (++imageNumber%2 + 1) + '.jpg" alt="" /></li>')
.anythingSlider(); // update the slider
});
$('button.remove').click(function(){
$('#slider1 > li:not(.cloned):last').remove();
$('#slider1').anythingSlider(); // update the slider
});
});
</script>
<script>
// Set up Sliders
// **************
$(function(){
$('#slider1').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
$('#slider2').anythingSlider({
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
},
onSlideComplete: function(slider) {
// keep the current navigation tab in view
slider.navWindow( slider.currentPage );
},
});
});
</script>
</head>
<body id="main">
<div id="page-wrap">
<div id="nav">
<a class="current" href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a href="expand.html">Expand Demo</a>
<a href="video.html">Video Demo</a>
<a href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>,
expanded upon by <a href="https://github.com/ProLoser/AnythingSlider/wiki/Credits">many others</a></h5>
<h1>AnythingSlider</h1>
<div class="themeselector">
Theme:
<select id="currentTheme">
<option value="default">Default</option>
<option value="minimalist-round">Minimalist-Round</option>
<option value="minimalist-square">Minimalist-Square</option>
<option value="metallic" selected="selected">Metallic</option>
<option value="construction">Construction</option>
<option value="cs-portfolio">CS-Portfolio</option>
</select>
<button class="add">Add Slide</button>
<button class="remove">Remove Slide</button>
</div>
<br><br>
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li class="panel5">
<div>
<div class="textSlide">
<span class="rightside"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></span>
<h3>Other Information</h3>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
</ul>
</div>
</div>
</li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul> <!-- END AnythingSlider #1 -->
<br><br>
<!-- AnythingSlider #2 -->
<ul id="slider2">
<li class="panel1">
<div>
<div class="textSlide">
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px; width: 250px; height: 250px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>
<li class="panel3">
<img src="demos/images/slide-tele-1.jpg" alt="">
</li>
<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you&#8217;re talking to someone you&#8217;ve probably never met so it&#8217;s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li class="panel5">
<img src="demos/images/slide-tele-2.jpg" alt="">
</li>
</ul>
<!-- END AnythingSlider #2 -->
<br>
<h2>Features</h2>
<ul>
<li>Panels are HTML Content (can be anything).</li>
<li>Multiple AnythingSliders allowable per-page.</li>
<li>Add or remove content, then easily update the slider.</li>
<li>Themes can be applied to individual sliders.</li>
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide). This can be disabled.</li>
<li>Show multiple slides within AnythingSlider at once. <span class="attention">*New in version 1.5.14*</span></li>
<li>Expand the slider to fit inside of its container (so it now works with full width or any percentage width fluid layouts). <span class="attention">*New in version 1.5.16*</span></li>
<li>Optionally resize each panel (specified per panel in css).</li>
<li>Optional Next / Previous Panel Arrows.</li>
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of panels).</li>
<li>Link to specific slides or go forward or back one slide from static text links - go to <a href="#" id="slide-jump">Slide 4</a> (Quote #2) in second example.</li>
<li>Each panel has a hashtag (can link directly to specific panels) or use the ID of an element inside the panel.</li>
<li>Optional custom function for <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">formatting navigation text</a>.</li>
<li>Auto-playing slideshow (optional feature, can start playing or stopped).</li>
<li>Pauses slideshow on hover (optional).</li>
<li>Optionally play the slideshow once through, stopping on the last page.</li>
<li>Extend the script by binding to custom events, last triggered event: <span id="status">none</span></li>
<li>Optional FX extension to add animation to panels elements as they scroll into and out of view. See the <a href="demos.html">demo page</a>.</li>
<li>Optional Video extension allows video to pauses playing when not in view and resumes when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video. <span class="attention">*New in version 1.6*</span></li>
<li>Works with jQuery 1.4.2+.</li>
</ul>
<h2>Default Options</h2>
See the documentation for complete description of these options (<a href="https://github.com/ProLoser/AnythingSlider/wiki/Appearance-Options">appearance</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">navigation</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Slideshow-Options">slideshow</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">callbacks &amp; events</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Video">video</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Interactivity-and-Miscellaneous-Options">interativity &amp; misc</a>).<br>
<br>
<blockquote>
<pre>$('#slider').anythingSlider({
// Appearance
theme : "default", // Theme name
expand : false, // If true, the entire slider will expand to fit the parent element
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
vertical : false, // If true, all panels will slide vertically; they slide horizontally otherwise
showMultiple : false, // Set this value to a number and it will show that many slides at once
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
buildArrows : true, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
buildStartStop : true, // If true, builds the start/stop button
appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
forwardText : "&amp;raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "&amp;laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
// Function
enableArrows : true, // if false, arrows will be visible, but not clickable.
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
// Navigation
startPanel : 1, // This sets the initial panel
changeBy : 1, // Amount to go forward or back when changing panels.
hashTags : true, // Should links change the hashtag in the URL?
infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
navigationSize : false, // Set this to the maximum number of visible navigation tabs; false to disable
// Slideshow options
autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
playRtl : false, // If true, the slideshow will move right-to-left
// Times
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
delayBeforeAnimate : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
// Callbacks
onBeforeInitialize : function(e, slider) {}, // Callback before the plugin initializes
onInitialized : function(e, slider) {}, // Callback when the plugin finished initializing
onShowStart : function(e, slider) {}, // Callback on slideshow start
onShowStop : function(e, slider) {}, // Callback after slideshow stops
onShowPause : function(e, slider) {}, // Callback when slideshow pauses
onShowUnpause : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
onSlideInit : function(e, slider) {}, // Callback when slide initiates, before control animation
onSlideBegin : function(e, slider) {}, // Callback before slide animates
onSlideComplete : function(slider) {}, // Callback when slide completes; this is the only callback without an event "e" variable
// Interactivity
clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
clickControls : "click focusin", // Events used to activate navigation control functionality
clickSlideshow : "click", // Event used to activate slideshow play/stop button
// Video
resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
});</pre>
</blockquote>
<h2>Known Issues</h2>
<ul>
<li>Please refer to the <a href="https://github.com/ProLoser/AnythingSlider/wiki">documentation</a>.</li>
</ul>
<h2>Changelog</h2>
Only the latest versions will be shown here. See the <a href="https://github.com/ProLoser/AnythingSlider/wiki/Change-Log">full change log here</a>.<br>
<br>
<h3>Version 1.7.16</h3>
<ul>
<li>Ok, I didn't like changing the video option as it was below, so I moved the option into the core plugin. The option is now called <code>resumeOnVisible</code>.</li>
</ul>
<h3>Version 1.7.15.1</h3>
<ul>
<li>Fixed an issue in the video extension where watching a related YouTube video in the slider would cause javascript errors.</li>
<li>Added another known issue with the video extension - Watching a related video breaks the ability if the slider to continue playing and pause the slideshow while playing these videos. This is because the iframe does not update the video URL and there is no way, that I know of, of determining which iframe is reporting a status change.</li>
<li>Added a video option named <code>resumeVideo</code> which when false, does not continue playing a paused video. Change this option as follows (inside of a document ready call and before the slider is initialized):
<pre><code>$.anythingSliderVideoDefaults.resumeVideo = false;</code></pre>
</li>
</ul>
<h3>Version 1.7.15</h3>
<ul>
<li>Fix an issue with calling the navigation window function which isn't initialized when the number of tabs shown equals the `navigationSize` value. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/209">issue #209</a>.</li>
</ul>
<h3>Version 1.7.14</h3>
<ul>
<li>Attempted to fix an issue with adding slider content based on the error reported in <a href="https://github.com/ProLoser/AnythingSlider/issues/207">issue #207</a>.</li>
<li>Links in nested sliders should now work properly. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/208">issue #208</a>.</li>
<li>Changed YouTube video status updating, to hopefully fix <a href="https://github.com/ProLoser/AnythingSlider/issues/191">issue #191</a>. But I noticed a few other problems in Safari, so I will address those soon.</li>
<li>Fixed a problem with setting the slider height if it was undefined, or set before the image completely loaded. This was introduced in v1.7.13.</li>
</ul>
<h3>Version 1.7.13</h3>
<ul>
<li>Updated the plugin so that if panel sizes aren't defined in the css, it will default to the slider size. This should fix the problem with the slider initializing with a zero width or height.</li>
<li>Added a "targetPage" callback variable which contains the targeted page number; "$targetPage" still contains the jQuery object of the targeted page. This can be used in event or callbacks:
<pre><code>$('#slider').bind('slide_begin', function(event, slider){
console.debug( 'The target page is #' + slider.targetPage );
console.debug( 'The title of the target page is: ' + slider.$targetPage.find('h1').text() );
// Do something else
});</code></pre>Note that the targetPage variable contains the correct page before the slider animates, whereas "slider.currentPage" contains the current slide and is not updated until after the animation completes. See the "<a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">Callback Arguments</a>" section in the wiki documents for a full list.</li>
</ul>
<h3>Version 1.7.12</h3>
<ul>
<li>Clicking links inside of a slide when mulitple slides are showing will no longer change the slider. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/187">issue #187</a>.</li>
<li>Updated how the navigation width was calculated when <code>navigationSize</code> is set so the <a href="https://github.com/Mottie/AnythingSlider-Themes">new tabs-light and tabs-dark themes</a> tab widths are calculated a bit more accurately - but it's still not perfect.</li>
</ul>
<h3>Version 1.7.11.5</h3>
<ul>
<li>Updated the AnythingSlider css file to restore the overflow setting after the slider has initialized. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/183">issue #183</a>. Thanks sawmac!</li>
<li>This fixes a problem created in the previous update.</li>
</ul>
<h3>Version 1.7.11.4</h3>
<ul>
<li>Updated the AnythingSlider css file to include the flash of unstyled content (FOUC) method 1 from the <a href="https://github.com/ProLoser/AnythingSlider/wiki/FAQ">FAQ page</a></li>
</ul>
<h3>Version 1.7.11.3</h3>
<ul>
<li>Updated the FX extension
<ul>
<li>When the <code>animationTime</code> is set to zero, the "fade" out effect occurred immediately. The fx extension has been updated to use the default time instead.</li>
<li>Updated the <a href="http://jsfiddle.net/Mottie/Cm479/2144/">fade FX demo</a> to use <code>delayBeforeAnimate</code> to allow the current image to fade out before transitioning.</li>
</ul>
</li>
</ul>
<h3>Version 1.7.11.2</h3>
<ul>
<li>Added a local copy of jQuery with fallback.</li>
</ul>
<h3>Version 1.7.11.1</h3>
<ul>
<li>Fixed a problem with the "fade" fx. See <a href="https://github.com/ProLoser/AnythingSlider/issues/171">issue #171</a>.
<ul>
<li>In older versions, the size parameter was ignored; but with the changes in 1.7.11, it became required and now follows the same format as all of the other effects.</li>
<li>The value is actually an opacity to use and must be included if adding a time or easing effect.
<pre><code>// '.selector' : [ 'fade', 'opacity', 'time', 'easing' ]
'.selector' : [ 'fade', '', 500, 'easeInOutCirc' ] // opacity number between 0 and 1 (default is 1, so using '' will set the value to 1)
</code></pre>
</li>
</ul>
</li>
</ul>
<h3>Version 1.7.11</h3>
<ul>
<li>Updated the FX extension:
<ul>
<li>Added <code>grow</code> option that allows for growing text - like in the movies! *popcorn*</li>
<li>Allow ability to set multiple sizes for the grow and expand fx by simply separating the two values with a comma. If only one value is present, the fx will use that value (left side of the comma) as described below.
<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
'.selector' : [ 'grow', '24px, 80px' ] // 'original text size, fx size'
'.selector' : [ 'expand', '10%, 100%' ], // 'fx size, original size'</code></pre>
</li>
<li>The difference between grow and expand is that grow changes the font size whereas expand changes the width and height.</li>
<li>Added ability to set the <code>fade</code> ending opacity.
<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
'.selector' : [ 'fade', '0.8' ] // opacity number between 0 and 1
</code></pre>
</li>
<li>Changed the intro fx from being initialized immediately to occurring when the page has finished loading.</li>
</ul>
</li>
<li>Fixed a problem that occurs when <code>resizeContents</code> is false and the slide content has padding and/or margins.</li>
</ul>
<h3>Version 1.7.10</h3>
<ul>
<li>Fixed a problem where setting the <code>animationTime</code> to zero would not trigger any callbacks, thus preventing the FX extension from working.</li>
</ul>
<h3>Version 1.7.9</h3>
<ul>
<li>Added <code>vertical</code> option
<ul>
<li>When true, all of the content in the slider will scroll vertically.</li>
<li>Included up &amp; down keyboard keys to navigate, but only when the vertical option is true.</li>
<li>The <code>showMultiple</code> option does not currently work when the content is vertical. I may fix this in future versions.</li>
<li>Thanks to Caroline-Elisa for the suggestion - in <a href="https://github.com/ProLoser/AnythingSlider/issues/166">issue #166</a>.</li>
</ul>
</li>
<li>AnythingSlider will now accept an ID or classname to target a specific panel in the slider. Callbacks can also be included. Here is an example:
<pre><code>// original method
$('#slider').anythingSlider(4);
// additional method
$('#slider').anythingSlider('#quotes');</code></pre>
</li>
<li>Updated FX extension
<ul>
<li>Fixed a problem with the "expand" effect in the FX extension where the height would not change in some browsers.</li>
<li>Added <code>outFxBind</code> and <code>inFxBind</code> options which set which AnythingSlider callbacks are used. This might be more useful if binding FX on slide begin so the element is already animating when the slide comes into view.</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,165 @@
/*
* AnythingSlider Slide FX 1.5.7 for AnythingSlider v1.7.11+
* By Rob Garrison (aka Mottie & Fudgey)
* Dual licensed under the MIT and GPL licenses.
*/
(function($) {
$.fn.anythingSliderFx = function(effects, options){
// variable sizes shouldn't matter - it's just to get an idea to get the elements out of view
var wrap = $(this).closest('.anythingSlider'),
sliderWidth = wrap.width(),
sliderHeight = wrap.height(),
getBaseFx = function(s){
var size = s, size2;
// allow for start and end sizes/dimensions
if (s && typeof s === 'string' && s.indexOf(',') > 0) {
s = s.split(',');
size = $.trim(s[0]); size2 = $.trim(s[1]);
}
return {
// 'name' : [{ inFx: {effects}, { outFx: {effects} }, selector: []]
'top' : [{ inFx: { top: 0 }, outFx: { top: '-' + (size || sliderHeight) } }],
'bottom' : [{ inFx: { top: 0 }, outFx: { top: (size || sliderHeight) } }],
'left' : [{ inFx: { left: 0 }, outFx: { left: '-' + (size || sliderWidth) } }],
'right' : [{ inFx: { left: 0 }, outFx: { left: (size || sliderWidth) } }],
'fade' : [{ inFx: { opacity: size || 1 }, outFx: { opacity: 0 } }],
'expand' : [{ inFx: { width: size2 || '100%', height: size2 || '100%', top: '0%', left: '0%' } , outFx: { width: (size || '10%'), height: (size || '10%'), top: '50%', left: '50%' } }],
'grow' : [{ inFx: { top: 0, fontSize: size || '16px', opacity : 1 }, outFx: { top: '-200px', fontSize: size2 || '80px', opacity: 0 } }],
'listLR' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':odd', ':even'] }],
'listRL' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':even', ':odd'] }],
'caption-Top' : [{ inFx: { top: 0, opacity: 0.8 }, outFx: { top: ( '-' + size || -50 ), opacity: 0 } }],
'caption-Right' : [{ inFx: { right: 0, opacity: 0.8 }, outFx: { right: ( '-' + size || -150 ), opacity: 0 } }],
'caption-Bottom' : [{ inFx: { bottom: 0, opacity: 0.8 }, outFx: { bottom: ( '-' + size || -50 ), opacity: 0 } }],
'caption-Left' : [{ inFx: { left: 0, opacity: 0.8 }, outFx: { left: ( '-' + size || -150 ), opacity: 0 } }]
};
};
return this.each(function(){
$(this).data('AnythingSlider').fx = effects; // store fx list to allow dynamic modification
var defaults = $.extend({
easing : 'swing', // Default FX easing
timeIn : 400, // Default time for in FX animation
timeOut : 350, // Default time for out FX animation - when using predefined FX, this number gets divided by 2
stopRepeat : false, // stops repeating FX animation when clicking on the same navigation tab
outFxBind : 'slide_init', // When outFx animations are called
inFxBind : 'slide_complete' // When inFx animations are called
}, options),
baseFx = getBaseFx(), // get base FX with standard sizes
// Animate FX
animateFx = function(el, opt, isOut, time){
if (el.length === 0 || typeof opt === 'undefined') { return; } // no fx
var o = opt[0] || opt,
s = o[1] || '',
// time needs to be a number, not a string
t = time || parseInt( ((s === '') ? o.duration : o[0].duration), 10);
if (isOut) {
// don't change caption position from absolute
if (el.css('position') !== 'absolute') { el.css({ position : 'relative' }); }
el.stop();
// multiple selectors for out animation
if (s !== ''){
el.filter(opt[1][0]).animate(o[0], { queue : false, duration : t, easing : o[0].easing });
el.filter(opt[1][1]).animate(s, { queue : true, duration : t, easing : o[0].easing });
return;
}
}
// animation for no extra selectors
el.animate(o, { queue : true, duration : t, easing : o.easing });
},
// Extract FX
getFx = function(opts, isOut){
// example: '.textSlide h3' : [ 'top fade', '200px' '500', 'easeOutBounce' ],
var tmp, bfx2,
ex = (isOut) ? 'outFx' : 'inFx', // object key
bfx = {}, // base effects
time = (isOut) ? defaults.timeOut : defaults.timeIn, // default duration settings
// split & process multiple built-in effects (e.g. 'top fade')
fx = $.trim(opts[0].replace(/\s+/g,' ')).split(' ');
// look for multiple selectors in the Out effects
if (isOut && fx.length === 1 && baseFx.hasOwnProperty(fx) && typeof (baseFx[fx][0].selector) !== 'undefined') {
bfx2 = baseFx[fx][0].outFx;
// add time and easing to first set, the animation will use it for both
bfx2[0].duration = opts[2] || defaults.timeOut;
bfx2[0].easing = opts[3] || defaults.easing;
return [bfx2, baseFx[fx][0].selector || [] ];
}
// combine base effects
$.each(fx, function(i,f){
// check if built-in effect exists
if (baseFx.hasOwnProperty(f)) {
var t = typeof opts[1] === 'undefined' || opts[1] === '',
// if size option is defined, get new base fx
tmp = (t) ? baseFx : getBaseFx(opts[1]);
$.extend(true, bfx, tmp[f][0][ex]);
t = opts[2] || bfx.duration || time; // user set time || built-in time || default time set above
bfx.duration = (isOut) ? t/2 : t; // out animation time is 1/2 of in time for predefined fx only
bfx.easing = isNaN(opts[3]) ? opts[3] || defaults.easing : opts[4] || defaults.easing;
}
});
return [bfx];
},
base = $(this)
// bind events for "OUT" effects - occur when leaving a page
.bind(defaults.outFxBind, function(e, slider){
if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
var el, elOut, time, page = slider.$lastPage.add( slider.$items.eq(slider.exactPage) ).add( slider.$targetPage ),
FX = slider.fx; // allow dynamically added FX
if (slider.exactPage === 0) { page = page.add( slider.$items.eq( slider.pages ) ); } // add last (non-cloned) page if on first
if (slider.options.animationTime < defaults.timeOut) {
time = slider.options.animationTime || defaults.timeOut;
}
page = page.find('*').andSelf(); // include the panel in the selectors
for (el in FX) {
if (el === 'outFx') {
// process "out" custom effects
for (elOut in FX.outFx) {
// animate current/last slide, unless it's a clone, then effect the original
if (page.filter(elOut).length) { animateFx( page.filter(elOut), FX.outFx[elOut], true); }
}
} else if (el !== 'inFx') {
// Use built-in effects
if ($.isArray(FX[el]) && page.filter(el).length) {
animateFx( page.filter(el), getFx(FX[el],true), true, time);
}
}
}
})
// bind events for "IN" effects - occurs on target page
.bind(defaults.inFxBind, function(e, slider){
if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
var el, elIn, page = slider.$currentPage.add( slider.$items.eq(slider.exactPage) ),
FX = slider.fx; // allow dynamically added FX
page = page.find('*').andSelf(); // include the panel in the selectors
for (el in FX) {
if (el === 'inFx') {
// process "in" custom effects
for (elIn in FX.inFx) {
// animate current page
if (page.filter(elIn).length) { animateFx( page.filter(elIn), FX.inFx[elIn], false); }
}
// Use built-in effects
} else if (el !== 'outFx' && $.isArray(FX[el]) && page.filter(el).length) {
animateFx( page.filter(el), getFx(FX[el],false), false);
}
}
})
.data('AnythingSlider');
// call gotoPage to trigger intro animation
$(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });
});
};
})(jQuery);

View File

@@ -0,0 +1,6 @@
/*
* AnythingSlider Slide FX 1.5.7 minified for AnythingSlider v1.7.11+
* By Rob Garrison (aka Mottie & Fudgey)
* Dual licensed under the MIT and GPL licenses.
*/
(function(i){i.fn.anythingSliderFx=function(q,r){var n=i(this).closest(".anythingSlider"),g=n.width(),o=n.height(),p=function(c){var a=c,l;c&&typeof c==="string"&&c.indexOf(",")>0&&(c=c.split(","),a=i.trim(c[0]),l=i.trim(c[1]));return{top:[{inFx:{top:0},outFx:{top:"-"+(a||o)}}],bottom:[{inFx:{top:0},outFx:{top:a||o}}],left:[{inFx:{left:0},outFx:{left:"-"+(a||g)}}],right:[{inFx:{left:0},outFx:{left:a||g}}],fade:[{inFx:{opacity:a||1},outFx:{opacity:0}}],expand:[{inFx:{width:l||"100%",height:l||"100%", top:"0%",left:"0%"},outFx:{width:a||"10%",height:a||"10%",top:"50%",left:"50%"}}],grow:[{inFx:{top:0,fontSize:a||"16px",opacity:1},outFx:{top:"-200px",fontSize:l||"80px",opacity:0}}],listLR:[{inFx:{left:0,opacity:1},outFx:[{left:a||g,opacity:0},{left:"-"+(a||g),opacity:0}],selector:[":odd",":even"]}],listRL:[{inFx:{left:0,opacity:1},outFx:[{left:a||g,opacity:0},{left:"-"+(a||g),opacity:0}],selector:[":even",":odd"]}],"caption-Top":[{inFx:{top:0,opacity:0.8},outFx:{top:"-"+a||-50,opacity:0}}],"caption-Right":[{inFx:{right:0, opacity:0.8},outFx:{right:"-"+a||-150,opacity:0}}],"caption-Bottom":[{inFx:{bottom:0,opacity:0.8},outFx:{bottom:"-"+a||-50,opacity:0}}],"caption-Left":[{inFx:{left:0,opacity:0.8},outFx:{left:"-"+a||-150,opacity:0}}]}};return this.each(function(){i(this).data("AnythingSlider").fx=q;var c=i.extend({easing:"swing",timeIn:400,timeOut:350,stopRepeat:!1,outFxBind:"slide_init",inFxBind:"slide_complete"},r),a=p(),l=function(a,b,e,c){if(!(a.length===0||typeof b==="undefined")){var d=b[0]||b,f=d[1]||"",c=c|| parseInt(f===""?d.duration:d[0].duration,10);if(e&&(a.css("position")!=="absolute"&&a.css({position:"relative"}),a.stop(),f!=="")){a.filter(b[1][0]).animate(d[0],{queue:!1,duration:c,easing:d[0].easing});a.filter(b[1][1]).animate(f,{queue:!0,duration:c,easing:d[0].easing});return}a.animate(d,{queue:!0,duration:c,easing:d.easing})}},g=function(k,b){var e,j=b?"outFx":"inFx",d={},f=b?c.timeOut:c.timeIn,h=i.trim(k[0].replace(/\s+/g," ")).split(" ");if(b&&h.length===1&&a.hasOwnProperty(h)&&typeof a[h][0].selector!== "undefined")return e=a[h][0].outFx,e[0].duration=k[2]||c.timeOut,e[0].easing=k[3]||c.easing,[e,a[h][0].selector||[]];i.each(h,function(e,h){if(a.hasOwnProperty(h)){var g=typeof k[1]==="undefined"||k[1]==="",g=g?a:p(k[1]);i.extend(!0,d,g[h][0][j]);g=k[2]||d.duration||f;d.duration=b?g/2:g;d.easing=isNaN(k[3])?k[3]||c.easing:k[4]||c.easing}});return[d]},m=i(this).bind(c.outFxBind,function(a,b){if(!(c.stopRepeat&&b.$lastPage[0]===b.$targetPage[0])){var e,j,d,f=b.$lastPage.add(b.$items.eq(b.exactPage)).add(b.$targetPage), h=b.fx;b.exactPage===0&&(f=f.add(b.$items.eq(b.pages)));b.options.animationTime<c.timeOut&&(d=b.options.animationTime||c.timeOut);f=f.find("*").andSelf();for(e in h)if(e==="outFx")for(j in h.outFx)f.filter(j).length&&l(f.filter(j),h.outFx[j],!0);else e!=="inFx"&&i.isArray(h[e])&&f.filter(e).length&&l(f.filter(e),g(h[e],!0),!0,d)}}).bind(c.inFxBind,function(a,b){if(!(c.stopRepeat&&b.$lastPage[0]===b.$targetPage[0])){var e,j,d=b.$currentPage.add(b.$items.eq(b.exactPage)),f=b.fx,d=d.find("*").andSelf(); for(e in f)if(e==="inFx")for(j in f.inFx)d.filter(j).length&&l(d.filter(j),f.inFx[j],!1);else e!=="outFx"&&i.isArray(f[e])&&d.filter(e).length&&l(d.filter(e),g(f[e],!1),!1)}}).data("AnythingSlider");i(window).load(function(){m.gotoPage(m.currentPage,m.playing)})})}})(jQuery);

View File

@@ -0,0 +1,795 @@
/*
AnythingSlider v1.7.16
Original by Chris Coyier: http://css-tricks.com
Get the latest version: https://github.com/ProLoser/AnythingSlider
To use the navigationFormatter function, you must have a function that
accepts two paramaters, and returns a string of HTML text.
index = integer index (1 based);
panel = jQuery wrapped LI item this tab references
@return = Must return a string of HTML/Text
navigationFormatter: function(index, panel){
return "Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
}
*/
(function($) {
$.anythingSlider = function(el, options) {
var base = this, o;
// Wraps the ul in the necessary divs and then gives Access to jQuery element
base.el = el;
base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');
// Add a reverse reference to the DOM object
base.$el.data("AnythingSlider", base);
base.init = function(){
// Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
base.options = o = $.extend({}, $.anythingSlider.defaults, options);
base.initialized = false;
if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
base.$el.trigger('before_initialize', base);
// Cache existing DOM elements for later
// base.$el = original ul
// for wrap - get parent() then closest in case the ul has "anythingSlider" class
base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
base.$window = base.$el.closest('div.anythingWindow');
base.win = window;
base.$win = $(base.win);
base.$controls = $('<div class="anythingControls"></div>').appendTo( (o.appendControlsTo !== null && $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper);
base.$startStop = $('<a href="#" class="start-stop"></a>');
if (o.buildStartStop) {
base.$startStop.appendTo( (o.appendStartStopTo !== null && $(o.appendStartStopTo).length) ? $(o.appendStartStopTo) : base.$controls );
}
base.$nav = $('<ul class="thumbNav" />').appendTo( (o.appendNavigationTo !== null && $(o.appendNavigationTo).length) ? $(o.appendNavigationTo) : base.$controls );
// Set up a few defaults & get details
base.flag = false; // event flag to prevent multiple calls (used in control click/focusin)
base.playing = o.autoPlay; // slideshow state; removed "startStopped" option
base.slideshow = false; // slideshow flag needed to correctly trigger slideshow events
base.hovered = false; // actively hovering over the slider
base.panelSize = []; // will contain dimensions and left position of each panel
base.currentPage = o.startPanel = parseInt(o.startPanel,10) || 1; // make sure this isn't a string
o.changeBy = parseInt(o.changeBy,10) || 1;
base.adj = (o.infiniteSlides) ? 0 : 1; // adjust page limits for infinite or limited modes
base.width = base.$el.width();
base.height = base.$el.height();
base.outerPad = [ base.$wrapper.innerWidth() - base.$wrapper.width(), base.$wrapper.innerHeight() - base.$wrapper.height() ];
if (o.playRtl) { base.$wrapper.addClass('rtl'); }
// Expand slider to fit parent
if (o.expand) {
base.$outer = base.$wrapper.parent();
base.$window.css({ width: '100%', height: '100%' }); // needed for Opera
base.checkResize();
}
// Build start/stop button
if (o.buildStartStop) { base.buildAutoPlay(); }
// Build forwards/backwards buttons
if (o.buildArrows) { base.buildNextBackButtons(); }
// can't lock autoplay it if it's not enabled
if (!o.autoPlay) { o.autoPlayLocked = false; }
base.updateSlider();
base.$lastPage = base.$currentPage;
// Get index (run time) of this slider on the page
base.runTimes = $('div.anythingSlider').index(base.$wrapper) + 1;
base.regex = new RegExp('panel' + base.runTimes + '-(\\d+)', 'i'); // hash tag regex
if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active
// Make sure easing function exists.
if (!$.isFunction($.easing[o.easing])) { o.easing = "swing"; }
// If pauseOnHover then add hover effects
if (o.pauseOnHover) {
base.$wrapper.hover(function() {
if (base.playing) {
base.$el.trigger('slideshow_paused', base);
base.clearTimer(true);
}
}, function() {
if (base.playing) {
base.$el.trigger('slideshow_unpaused', base);
base.startStop(base.playing, true);
}
});
}
// If a hash can not be used to trigger the plugin, then go to start panel
base.setCurrentPage(base.gotoHash() || o.startPage, false);
// Hide/Show navigation & play/stop controls
base.slideControls(false);
base.$wrapper.bind('mouseenter mouseleave', function(e){
base.hovered = (e.type === "mouseenter") ? true : false;
base.slideControls( base.hovered, false );
});
// Add keyboard navigation
$(document).keyup(function(e){
// Stop arrow keys from working when focused on form items
if (o.enableKeyboard && base.$wrapper.is('.activeSlider') && !e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
if (!o.vertical && (e.which === 38 || e.which === 40)) { return; }
switch (e.which) {
case 39: case 40: // right & down arrow
base.goForward();
break;
case 37: case 38: // left & up arrow
base.goBack();
break;
}
}
});
// Fix tabbing through the page, but don't change the view if the link is in view (showMultiple = true)
base.$items.delegate('a', 'focus.AnythingSlider', function(e){
var panel = $(this).closest('.panel'),
indx = base.$items.index(panel) + base.adj; // index can be -1 in nested sliders - issue #208
base.$items.find('.focusedLink').removeClass('focusedLink');
$(this).addClass('focusedLink');
base.$window.scrollLeft(0);
if ( ( indx !== -1 && (indx >= base.currentPage + o.showMultiple || indx < base.currentPage) ) ) {
base.gotoPage(indx);
e.preventDefault();
}
});
// Binds events
var triggers = "slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
$.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "), function(i,f){
if ($.isFunction(o[f])){
base.$el.bind(triggers[i], o[f]);
}
});
if ($.isFunction(o.onSlideComplete)){
// Added setTimeout (zero time) to ensure animation is complete... see this bug report: http://bugs.jquery.com/ticket/7157
base.$el.bind('slide_complete', function(){
setTimeout(function(){ o.onSlideComplete(base); }, 0);
});
}
base.initialized = true;
base.$el.trigger('initialized', base);
// trigger the slideshow
base.startStop(base.playing);
};
// called during initialization & to update the slider if a panel is added or deleted
base.updateSlider = function(){
// needed for updating the slider
base.$el.children('.cloned').remove();
base.$nav.empty();
// set currentPage to 1 in case it was zero - occurs when adding slides after removing them all
base.currentPage = base.currentPage || 1;
base.$items = base.$el.children();
base.pages = base.$items.length;
base.dir = (o.vertical) ? 'top' : 'left';
o.showMultiple = (o.vertical) ? 1 : parseInt(o.showMultiple,10) || 1; // only integers allowed
o.navigationSize = (o.navigationSize === false) ? 0 : parseInt(o.navigationSize,10) || 0;
if (o.showMultiple > 1) {
if (o.showMultiple > base.pages) { o.showMultiple = base.pages; }
base.adjustMultiple = (o.infiniteSlides && base.pages > 1) ? 0 : o.showMultiple - 1;
base.pages = base.$items.length - base.adjustMultiple;
}
// Hide navigation & player if there is only one page
base.$controls
.add(base.$nav)
.add(base.$startStop)
.add(base.$forward)
.add(base.$back)[(base.pages <= 1) ? 'hide' : 'show']();
if (base.pages > 1) {
// Build/update navigation tabs
base.buildNavigation();
}
// Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
// This supports the "infinite" scrolling, also ensures any cloned elements don't duplicate an ID
// Moved removeAttr before addClass otherwise IE7 ignores the addClass: http://bugs.jquery.com/ticket/9871
if (o.infiniteSlides && base.pages > 1) {
base.$el.prepend( base.$items.filter(':last').clone().removeAttr('id').addClass('cloned') );
// Add support for multiple sliders shown at the same time
if (o.showMultiple > 1) {
base.$el.append( base.$items.filter(':lt(' + o.showMultiple + ')').clone().removeAttr('id').addClass('cloned').addClass('multiple') );
} else {
base.$el.append( base.$items.filter(':first').clone().removeAttr('id').addClass('cloned') );
}
base.$el.find('.cloned').each(function(){
// disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
$(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
$(this).find('[id]').removeAttr('id');
});
}
// We just added two items, time to re-cache the list, then get the dimensions of each panel
base.$items = base.$el.children().addClass('panel' + (o.vertical ? ' vertical' : ''));
base.setDimensions();
// Set the dimensions of each panel
if (o.resizeContents) {
base.$items.css('width', base.width);
base.$wrapper.css('width', base.getDim(base.currentPage)[0]);
base.$wrapper.add(base.$items).css('height', base.height);
} else {
base.$win.load(function(){ base.setDimensions(); }); // set dimensions after all images load
}
if (base.currentPage > base.pages) {
base.currentPage = base.pages;
}
base.setCurrentPage(base.currentPage, false);
base.$nav.find('a').eq(base.currentPage - 1).addClass('cur'); // update current selection
};
// Creates the numbered navigation links
base.buildNavigation = function() {
if (o.buildNavigation && (base.pages > 1)) {
var t, $a;
base.$items.filter(':not(.cloned)').each(function(i) {
var index = i + 1;
t = ((index === 1) ? 'first' : '') + ((index === base.pages) ? 'last' : '');
$a = $('<a href="#"></a>').addClass('panel' + index).wrap('<li class="' + t + '" />');
base.$nav.append($a.parent()); // use $a.parent() so it will add <li> instead of only the <a> to the <ul>
// If a formatter function is present, use it
if ($.isFunction(o.navigationFormatter)) {
t = o.navigationFormatter(index, $(this));
$a.html('<span>' + t + '</span>');
// Add formatting to title attribute if text is hidden
if (parseInt($a.find('span').css('text-indent'),10) < 0) { $a.addClass(o.tooltipClass).attr('title', t); }
} else {
$a.html('<span>' + index + '</span>');
}
$a.bind(o.clickControls, function(e) {
if (!base.flag && o.enableNavigation) {
// prevent running functions twice (once for click, second time for focusin)
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
base.gotoPage(index);
if (o.hashTags) { base.setHash(index); }
}
e.preventDefault();
});
});
// Add navigation tab scrolling - use !! in case someone sets the size to zero
if (!!o.navigationSize && o.navigationSize < base.pages) {
if (!base.$controls.find('.anythingNavWindow').length){
base.$nav
.before('<ul><li class="prev"><a href="#"><span>' + o.backText + '</span></a></li></ul>')
.after('<ul><li class="next"><a href="#"><span>' + o.forwardText + '</span></a></li></ul>')
.wrap('<div class="anythingNavWindow"></div>');
}
// include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect)
base.navWidths = base.$nav.find('li').map(function(){
return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0);
}).get();
base.navLeft = 1;
// add 5 pixels to make sure the tabs don't wrap to the next line
base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 );
base.$controls.find('.anythingNavWindow')
.width( base.navWidth( 1, o.navigationSize + 1 ) ).end()
.find('.prev,.next').bind(o.clickControls, function(e) {
if (!base.flag) {
base.flag = true; setTimeout(function(){ base.flag = false; }, 200);
base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) );
}
e.preventDefault();
});
}
}
};
base.navWidth = function(x,y){
var i, s = Math.min(x,y),
e = Math.max(x,y),
w = 0;
for (i = s; i < e; i++) {
w += base.navWidths[i-1] || 0;
}
return w;
};
base.navWindow = function(n){
if (!!o.navigationSize && o.navigationSize < base.pages && base.navWidths) {
var p = base.pages - o.navigationSize + 1;
n = (n <= 1) ? 1 : (n > 1 && n < p) ? n : p;
if (n !== base.navLeft) {
base.$controls.find('.anythingNavWindow').animate(
{ scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) },
{ queue: false, duration: o.animationTime });
base.navLeft = n;
}
}
};
// Creates the Forward/Backward buttons
base.buildNextBackButtons = function() {
base.$forward = $('<span class="arrow forward"><a href="#"><span>' + o.forwardText + '</span></a></span>');
base.$back = $('<span class="arrow back"><a href="#"><span>' + o.backText + '</span></a></span>');
// Bind to the forward and back buttons
base.$back.bind(o.clickBackArrow, function(e) {
// prevent running functions twice (once for click, second time for swipe)
if (o.enableArrows && !base.flag) {
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
base.goBack();
}
e.preventDefault();
});
base.$forward.bind(o.clickForwardArrow, function(e) {
// prevent running functions twice (once for click, second time for swipe)
if (o.enableArrows && !base.flag) {
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
base.goForward();
}
e.preventDefault();
});
// using tab to get to arrow links will show they have focus (outline is disabled in css)
base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){
$(this).toggleClass('hover');
});
// Append elements to page
base.$back.appendTo( (o.appendBackTo !== null && $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper );
base.$forward.appendTo( (o.appendForwardTo !== null && $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );
base.$arrowWidth = base.$forward.width(); // assuming the left & right arrows are the same width - used for toggle
};
// Creates the Start/Stop button
base.buildAutoPlay = function(){
base.$startStop
.html('<span>' + (base.playing ? o.stopText : o.startText) + '</span>')
.bind(o.clickSlideshow, function(e) {
if (o.enableStartStop) {
base.startStop(!base.playing);
base.makeActive();
if (base.playing && !o.autoPlayDelayed) {
base.goForward(true);
}
}
e.preventDefault();
})
// show button has focus while tabbing
.bind('focusin focusout',function(){
$(this).toggleClass('hover');
});
};
// Adjust slider dimensions on parent element resize
base.checkResize = function(stopTimer){
clearTimeout(base.resizeTimer);
base.resizeTimer = setTimeout(function(){
var w = base.$outer.width() - base.outerPad[0],
h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1];
// base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows.
if (base.width * o.showMultiple !== w || base.height !== h) {
base.setDimensions(); // adjust panel sizes
// make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0)
base.gotoPage(base.currentPage, base.playing, null, -1);
}
if (typeof(stopTimer) === 'undefined'){ base.checkResize(); }
}, 500);
};
// Set panel dimensions to either resize content or adjust panel to content
base.setDimensions = function(){
var w, h, c, edge = 0,
fullsize = { width: '100%', height: '100%' },
// determine panel width
pw = (o.showMultiple > 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(),
winw = base.$win.width();
if (o.expand){
w = base.$outer.width() - base.outerPad[0];
base.height = h = base.$outer.height() - base.outerPad[1];
base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h });
base.width = pw = (o.showMultiple > 1) ? w/o.showMultiple : w;
}
base.$items.each(function(i){
c = $(this).children();
if (o.resizeContents){
// resize panel
w = base.width;
h = base.height;
$(this).css({ width: w, height: h });
if (c.length) {
if (c[0].tagName === "EMBED") { c.attr(fullsize); } // needed for IE7; also c.length > 1 in IE7
if (c[0].tagName === "OBJECT") { c.find('embed').attr(fullsize); }
// resize panel contents, if solitary (wrapped content or solitary image)
if (c.length === 1){ c.css(fullsize); }
}
} else {
// get panel width & height and save it
w = $(this).width() || base.width; // if image hasn't finished loading, width will be zero, so set it to base width instead
if (c.length === 1 && w >= winw){
w = (c.width() >= winw) ? pw : c.width(); // get width of solitary child
c.css('max-width', w); // set max width for all children
}
$(this).css('width', w); // set width of panel
h = (c.length === 1 ? c.outerHeight(true) : $(this).height()); // get height after setting width
if (h <= base.outerPad[1]) { h = base.height; } // if height less than the outside padding, then set it to the preset height
$(this).css('height', h);
}
base.panelSize[i] = [w,h,edge];
edge += (o.vertical) ? h : w;
});
// Set total width of slider, Note that this is limited to 32766 by Opera - option removed
base.$el.css((o.vertical ? 'height' : 'width'), edge);
};
// get dimension of multiple panels, as needed
base.getDim = function(page){
if (base.pages < 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty
page = (o.infiniteSlides && base.pages > 1) ? page : page - 1;
var i,
w = base.panelSize[page][0],
h = base.panelSize[page][1];
if (o.showMultiple > 1) {
for (i=1; i < o.showMultiple; i++) {
w += base.panelSize[(page + i)%o.showMultiple][0];
h = Math.max(h, base.panelSize[page + i][1]);
}
}
return [w,h];
};
base.goForward = function(autoplay) {
base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay);
};
base.goBack = function(autoplay) {
base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay);
};
base.gotoPage = function(page, autoplay, callback, time) {
if (autoplay !== true) {
autoplay = false;
base.startStop(false);
base.makeActive();
}
// check if page is an id or class name
if (/^[#|.]/.test(page) && $(page).length) {
page = $(page).closest('.panel').index() + base.adj;
}
// rewind effect occurs here when changeBy > 1
if (o.changeBy !== 1){
if (page < 0) { page += base.pages; }
if (page > base.pages) { page -= base.pages; }
}
if (base.pages <= 1) { return; } // prevents animation
base.$lastPage = base.$currentPage;
if (typeof(page) !== "number") {
page = o.startPanel;
base.setCurrentPage(page);
}
// pause YouTube videos before scrolling or prevent change if playing
if (autoplay && o.isVideoPlaying(base)) { return; }
if (page > base.pages + 1 - base.adj) { page = (!o.infiniteSlides && !o.stopAtEnd) ? 1 : base.pages; }
if (page < base.adj ) { page = (!o.infiniteSlides && !o.stopAtEnd) ? base.pages : 1; }
base.currentPage = ( page > base.pages ) ? base.pages : ( page < 1 ) ? 1 : base.currentPage;
base.$currentPage = base.$items.eq(base.currentPage - base.adj);
base.exactPage = page;
base.targetPage = (page === 0) ? base.pages - base.adj : (page > base.pages) ? 1 - base.adj : page - base.adj;
base.$targetPage = base.$items.eq( base.targetPage );
time = time || o.animationTime;
// don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize
if (time >= 0) { base.$el.trigger('slide_init', base); }
base.slideControls(true, false);
// When autoplay isn't passed, we stop the timer
if (autoplay !== true) { autoplay = false; }
// Stop the slider when we reach the last page, if the option stopAtEnd is set to true
if (!autoplay || (o.stopAtEnd && page === base.pages)) { base.startStop(false); }
if (time >= 0) { base.$el.trigger('slide_begin', base); }
// delay starting slide animation
setTimeout(function(d){
// resize slider if content size varies
if (!o.resizeContents) {
// animating the wrapper resize before the window prevents flickering in Firefox
d = base.getDim(page);
base.$wrapper.filter(':not(:animated)').animate(
// prevent animating a dimension to zero
{ width: d[0] || base.width, height: d[1] || base.height },
{ queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
);
}
d = {};
d[base.dir] = -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2];
// Animate Slider
base.$el.filter(':not(:animated)').animate(
d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } }
);
}, parseInt(o.delayBeforeAnimate, 10) || 0);
};
base.endAnimation = function(page, callback, time){
if (page === 0) {
base.$el.css( base.dir, -base.panelSize[base.pages][2]);
page = base.pages;
} else if (page > base.pages) {
// reset back to start position
base.$el.css( base.dir, -base.panelSize[1][2]);
page = 1;
}
base.exactPage = page;
base.setCurrentPage(page, false);
// Add active panel class
base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
if (!base.hovered) { base.slideControls(false); }
if (time >= 0) { base.$el.trigger('slide_complete', base); }
// callback from external slide control: $('#slider').anythingSlider(4, function(slider){ })
if (typeof callback === 'function') { callback(base); }
// Continue slideshow after a delay
if (o.autoPlayLocked && !base.playing) {
setTimeout(function(){
base.startStop(true);
// subtract out slide delay as the slideshow waits that additional time.
}, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0));
}
};
base.setCurrentPage = function(page, move) {
page = parseInt(page, 10);
if (base.pages < 1 || page === 0 || isNaN(page)) { return; }
if (page > base.pages + 1 - base.adj) { page = base.pages - base.adj; }
if (page < base.adj ) { page = 1; }
// Set visual
if (o.buildNavigation){
base.$nav
.find('.cur').removeClass('cur').end()
.find('a').eq(page - 1).addClass('cur');
}
// hide/show arrows based on infinite scroll mode
if (!o.infiniteSlides && o.stopAtEnd){
base.$wrapper
.find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end()
.find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled');
if (page === base.pages && base.playing) { base.startStop(); }
}
// Only change left if move does not equal false
if (!move) {
var d = base.getDim(page);
base.$wrapper
.css({ width: d[0], height: d[1] })
.add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant
base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2] );
}
// Update local variable
base.currentPage = page;
base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
};
base.makeActive = function(){
// Set current slider as active so keyboard navigation works properly
if (!base.$wrapper.is('.activeSlider')){
$('.activeSlider').removeClass('activeSlider');
base.$wrapper.addClass('activeSlider');
}
};
// This method tries to find a hash that matches an ID and panel-X
// If either found, it tries to find a matching item
// If that is found as well, then it returns the page number
base.gotoHash = function(){
var h = base.win.location.hash,
i = h.indexOf('&'),
n = h.match(base.regex);
if (n === null && !/^#&/.test(h)) {
// #quote2&panel1-3&panel3-3
h = h.substring(0, (i >= 0 ? i : h.length));
// ensure the element is in the same slider
n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null;
} else if (n !== null) {
// #&panel1-3&panel3-3
n = (o.hashTags) ? parseInt(n[1],10) : null;
}
return n;
};
base.setHash = function(n){
var s = 'panel' + base.runTimes + '-',
h = base.win.location.hash;
if ( typeof h !== 'undefined' ) {
base.win.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n;
}
};
// Slide controls (nav and play/stop button up or down)
base.slideControls = function(toggle){
var dir = (toggle) ? 'slideDown' : 'slideUp',
t1 = (toggle) ? 0 : o.animationTime,
t2 = (toggle) ? o.animationTime: 0,
op = (toggle) ? 1 : 0,
sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden
if (o.toggleControls) {
base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2);
}
if (o.buildArrows && o.toggleArrows) {
if (!base.hovered && base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow
base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
}
};
base.clearTimer = function(paused){
// Clear the timer only if it is set
if (base.timer) {
base.win.clearInterval(base.timer);
if (!paused && base.slideshow) {
base.$el.trigger('slideshow_stop', base);
base.slideshow = false;
}
}
};
// Pass startStop(false) to stop and startStop(true) to play
base.startStop = function(playing, paused) {
if (playing !== true) { playing = false; } // Default if not supplied is false
base.playing = playing;
if (playing && !paused) {
base.$el.trigger('slideshow_start', base);
base.slideshow = true;
}
// Toggle playing and text
if (o.buildStartStop) {
base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText );
// add button text to title attribute if it is hidden by text-indent
if (parseInt(base.$startStop.find('span').css('text-indent'),10) < 0) {
base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText );
}
}
// Pause slideshow while video is playing
if (playing){
base.clearTimer(true); // Just in case this was triggered twice in a row
base.timer = base.win.setInterval(function() {
// prevent autoplay if video is playing
if ( !o.isVideoPlaying(base) ) {
base.goForward(true);
// stop slideshow if resume if false
} else if (!o.resumeOnVideoEnd) {
base.startStop();
}
}, o.delay);
} else {
base.clearTimer();
}
};
// Trigger the initialization
base.init();
};
$.anythingSlider.defaults = {
// Appearance
theme : "default", // Theme name, add the css stylesheet manually
expand : false, // If true, the entire slider will expand to fit the parent element
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
vertical : false, // If true, all panels will slide vertically; they slide horizontally otherwise
showMultiple : false, // Set this value to a number and it will show that many slides at once
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
buildArrows : true, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
buildStartStop : true, // ** If true, builds the start/stop button
appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
forwardText : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
// Function
enableArrows : true, // if false, arrows will be visible, but not clickable.
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
// Navigation
startPanel : 1, // This sets the initial panel
changeBy : 1, // Amount to go forward or back when changing panels.
hashTags : true, // Should links change the hashtag in the URL?
infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
navigationSize : false, // Set this to the maximum number of visible navigation tabs; false to disable
// Slideshow options
autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
playRtl : false, // If true, the slideshow will move right-to-left
// Times
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
delayBeforeAnimate : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
// Callbacks - removed from options to reduce size - they still work
// Interactivity
clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
clickControls : "click focusin", // Events used to activate navigation control functionality
clickSlideshow : "click", // Event used to activate slideshow play/stop button
// Video
resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
resumeOnVisible : true, // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
};
$.fn.anythingSlider = function(options, callback) {
return this.each(function(){
var page, anySlide = $(this).data('AnythingSlider');
// initialize the slider but prevent multiple initializations
if ((typeof(options)).match('object|undefined')){
if (!anySlide) {
(new $.anythingSlider(this, options));
} else {
anySlide.updateSlider();
}
// If options is a number, process as an external link to page #: $(element).anythingSlider(#)
} else if (/\d/.test(options) && !isNaN(options) && anySlide) {
page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts " 2 "
// ignore out of bound pages
if ( page >= 1 && page <= anySlide.pages ) {
anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback
}
// Accept id or class name
} else if (/^[#|.]/.test(options) && $(options).length) {
anySlide.gotoPage(options, false, callback);
}
});
};
})(jQuery);

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,379 @@
/*
* AnythingSlider Video Controller 1.3 beta for AnythingSlider v1.6+
* By Rob Garrison (aka Mottie & Fudgey)
* Dual licensed under the MIT and GPL licenses.
*/
(function($) {
$.fn.anythingSliderVideo = function(options){
//Set the default values, use comma to separate the settings, example:
var defaults = {
videoID : 'asvideo' // id prefix
};
return this.each(function(){
// make sure a AnythingSlider is attached
var video, tmp, service, sel, base = $(this).data('AnythingSlider');
if (!base) { return; }
video = base.video = {};
// Next update, I may just force users to call the video extension instead of it auto-running on window load
// then they can change the video options in that call instead of the base defaults, and maybe prevent the
// videos being initialized twice on startup (once as a regular video and second time with the API string)
video.options = $.extend({}, defaults, options);
// check if SWFObject is loaded
video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function') ? true : false;
video.list = {};
video.hasVid = false;
video.hasEmbed = false;
video.services = $.fn.anythingSliderVideo.services;
video.len = 0; // used to add a unique ID to videos "asvideo#"
video.hasEmbedCount = 0;
video.hasiframeCount = 0;
video.$items = base.$items.filter(':not(.cloned)');
// find and save all known videos
for (service in video.services) {
if (typeof(service) === 'string') {
sel = video.services[service].selector;
video.$items.find(sel).each(function(){
tmp = $(this);
// save panel and video selector in the list
tmp.attr('id', video.options.videoID + video.len);
video.list[video.len] = {
id : video.options.videoID + video.len++,
panel : tmp.closest('.panel')[0],
service : service,
selector : sel,
status : -1 // YouTube uses -1 to mean the video is unstarted
};
video.hasVid = true;
if (sel.match('embed|object')) {
video.hasEmbed = true;
video.hasEmbedCount++;
} else if (sel.match('iframe')) {
video.hasiframeCount++;
}
});
}
}
// Initialize each video, as needed
$.each(video.list, function(i,s){
// s.id = ID, s.panel = slider panel (DOM), s.selector = 'jQuery selector'
var tmp, $tar, vidsrc, opts,
$vid = $(s.panel).find(s.selector),
service = video.services[s.service],
api = service.initAPI || '';
// Initialize embeded video javascript api using SWFObject, if loaded
if (video.hasEmbed && video.hasSwfo && s.selector.match('embed|object')) {
$vid.each(function(){
// Older IE doesn't have an object - just make sure we are wrapping the correct element
$tar = ($(this).parent()[0].tagName === 'OBJECT') ? $(this).parent() : $(this);
vidsrc = ($tar[0].tagName === 'EMBED') ? $tar.attr('src') : $tar.find('embed').attr('src') || $tar.children().filter('[name=movie]').attr('value');
opts = $.extend(true, {}, {
flashvars : null,
params : { allowScriptAccess: 'always', wmode : base.options.addWmodeToObject, allowfullscreen : true },
attr : { 'class' : $tar.attr('class'), 'style' : $tar.attr('style'), 'data-url' : vidsrc }
}, service.embedOpts);
$tar.wrap('<div id="' + s.id + '"></div>');
// use SWFObject if it exists, it replaces the wrapper with the object/embed
swfobject.embedSWF(vidsrc + (api === '' ? '': api + s.id), s.id,
$tar.attr('width'), $tar.attr('height'), '10', null,
opts.flashvars, opts.params, opts.attr, function(){
// run init code if it exists
if (service.hasOwnProperty('init')) {
video.list[i].player = service.init(base, s.id, i);
}
if (i >= video.hasEmbedCount) {
base.$el.trigger('swf_completed', base); // swf callback
}
}
);
});
} else if (s.selector.match('iframe')) {
$vid.each(function(i,v){
vidsrc = $(this).attr('src');
tmp = (vidsrc.match(/\?/g) ? '' : '?') + '&wmode=' + base.options.addWmodeToObject; // string connector & wmode
$(this).attr('src', function(i,r){ return r + tmp + (api === '' ? '': api + s.id); });
});
}
});
// Returns URL parameter; url: http://www.somesite.com?name=hello&id=11111
// Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
video.gup = function(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s || window.location.href);
return (p===null) ? "" : p[1];
};
// postMessage to iframe - http://benalman.com/projects/jquery-postmessage-plugin/ (FOR IE7)
video.postMsg = function(data, vid){
var $vid = $('#' + vid);
if ($vid.length){
$vid[0].contentWindow.postMessage(data, $vid.attr('src').split('?')[0]);
}
};
// receive message from iframe
// no way to figure out which iframe since the message is from the window
video.message = function(e){
if (e.data) {
if (/infoDelivery/g.test(e.data)) { return; } // ignore youtube video loading spam
var data = $.parseJSON(e.data);
$.each(video.list, function(i,s){
if (video.services[video.list[i].service].hasOwnProperty('message')) {
video.services[video.list[i].service].message(base, data);
}
});
}
};
// toDO = 'cont', 'pause' or 'isPlaying'
video.control = function(toDo){
var i,
s = video.list,
slide = (toDo === 'pause') ? base.$lastPage[0] : base.$currentPage[0],
isPlaying = false;
for (i=0; i < video.len; i++){
if (s[i].panel === slide && video.services[s[i].service].hasOwnProperty(toDo)){
isPlaying = video.services[s[i].service][toDo](base, s[i].id, i);
}
}
return isPlaying;
};
// iframe event listener
if (video.hasiframeCount){
if (window.addEventListener){
window.addEventListener('message', video.message, false);
} else { // IE
window.attachEvent('onmessage', video.message, false);
}
}
// bind to events
base.$el
.bind('slide_init', function(){
video.control('pause');
})
.bind('slide_complete', function(){
video.control('cont');
});
base.options.isVideoPlaying = function(){ return video.control('isPlaying'); };
});
};
/* Each video service is set up as follows
* service-name : {
* // initialization
* selector : 'object[data-url*=service], embed[src*=service]', // required: jQuery selector used to find the video ('video' or 'iframe[src*=service]' are other examples)
* initAPI : 'string added to the URL to initialize the API', // optional: the string must end with a parameter pointing to the video id (e.g. "&player_id=")
* embedOpts : { flashvars: {}, params: {}, attr: {} }, // optional: add any required flashvars, parameters or attributes to initialize the API
* // video startup functions
* init : function(base, vid, index){ }, // optional: include any additional initialization code here; function called AFTER the embeded video is added using SWFObject
* // required functions
* cont : function(base, vid, index){ }, // required: continue play if video was previously played
* pause : function(base, vid, index){ }, // required: pause ALL videos
* message : function(base, data){ }, // required for iframe: process data received from iframe and update the video status for the "isPlaying" function
* isPlaying : function(base, vid, index){ } // required: return true if video is playing and return false if not playing (paused or ended)
* }
*
* Function variables
* base (object) = plugin base, all video values/functions are stored in base.video
* vid (string) is the ID of the video: vid = "asvideo1"; so jQuery needs a "#" in front... "#" + videoID option default ("asvideo") + index (e.g. "1"); each video matching a service will have a unquie vid
* index (number) is the unique video number from the vid (starts from zero)
*
* var list = base.video.list[index]; list will contain:
* list.id = vid
* list.service = service name (e.g. 'video', 'vimeo1', 'vimeo2', etc)
* list.selector = 'jQuery selector' (e.g. 'video', 'object[data-url*=vimeo]', 'iframe[src*=vimeo]', etc)
* list.panel = AnythingSlider panel DOM object. So you can target the video using $(list[index].panel).find(list[index].service) or $('#' + vid)
* list.status = video status, updated by the iframe event listeners added in the video service "ready" function; see examples below
*/
$.fn.anythingSliderVideo.services = {
// *** HTML5 video ***
video : {
selector : 'video',
cont : function(base, vid, index){
var $vid = $('#' + vid);
if ($vid.length && $vid[0].paused && $vid[0].currentTime > 0 && !$vid[0].ended) {
$vid[0].play();
}
},
pause : function(base, vid){
// pause ALL videos on the page
$('video').each(function(){
if (typeof(this.pause) !== 'undefined') { this.pause(); } // throws an error in older ie without this
});
},
isPlaying : function(base, vid, index){
var $vid = $('#' + vid);
// media.paused seems to be the only way to determine if a video is playing
return ($vid.length && typeof($vid[0].pause) !== 'undefined' && !$vid[0].paused && !$vid[0].ended) ? true : false;
}
},
// *** Vimeo iframe *** isolated demo: http://jsfiddle.net/Mottie/GxwEX/
vimeo1 : {
selector : 'iframe[src*=vimeo]',
initAPI : '&api=1&player_id=', // video ID added to the end
cont : function(base, vid, index){
if (base.options.resumeOnVisible && base.video.list[index].status === 'pause'){
// Commands sent to the iframe originally had "JSON.stringify" applied to them,
// but not all browsers support this, so it's just as easy to wrap it in quotes.
base.video.postMsg('{"method":"play"}', vid);
}
},
pause : function(base, vid){
// pause ALL videos on the page
$('iframe[src*=vimeo]').each(function(){
base.video.postMsg('{"method":"pause"}', this.id);
});
},
message : function(base, data){
// *** VIMEO *** iframe uses data.player_id
var index, vid = data.player_id || ''; // vid = data.player_id (unique to vimeo)
if (vid !== ''){
index = vid.replace(base.video.options.videoID, '');
if (data.event === 'ready') {
// Vimeo ready, add additional event listeners for video status
base.video.postMsg('{"method":"addEventListener","value":"play"}', vid);
base.video.postMsg('{"method":"addEventListener","value":"pause"}', vid);
base.video.postMsg('{"method":"addEventListener","value":"finish"}', vid);
}
// update current status - vimeo puts it in data.event
if (base.video.list[index]) { base.video.list[index].status = data.event; }
}
},
isPlaying : function(base, vid, index){
return (base.video.list[index].status === 'play') ? true : false;
}
},
// *** Embeded Vimeo ***
// SWFObject adds the url to the object data
// using param as a selector, the script above looks for the parent if it sees "param"
vimeo2 : {
selector : 'object[data-url*=vimeo], embed[src*=vimeo]',
embedOpts : { flashvars : { api : 1 } },
cont : function(base, vid, index) {
if (base.options.resumeOnVisible) {
var $vid = $('#' + vid);
// continue video if previously played & not finished (api_finish doesn't seem to exist) - duration can be a decimal number, so subtract it and look at the difference (2 seconds here)
if (typeof($vid[0].api_play) === 'function' && $vid[0].api_paused() && $vid[0].api_getCurrentTime() !== 0 && ($vid[0].api_getDuration() - $vid[0].api_getCurrentTime()) > 2) {
$vid[0].api_play();
}
}
},
pause : function(base, vid){
// find ALL videos and pause them, just in case
$('object[data-url*=vimeo], embed[src*=vimeo]').each(function(){
var el = (this.tagName === 'EMBED') ? $(this).parent()[0] : this;
if (typeof(el.api_pause) === 'function') {
el.api_pause();
}
});
},
isPlaying : function(base, vid, index){
var $vid = $('#' + vid);
return (typeof($vid[0].api_paused) === 'function' && !$vid[0].api_paused()) ? true : false;
}
},
// *** iframe YouTube *** isolated demo: http://jsfiddle.net/Mottie/qk5MY/
youtube1 : {
selector : 'iframe[src*=youtube]',
// "iv_load_policy=3" should turn off annotations on init, but doesn't seem to
initAPI : '&iv_load_policy=3&enablejsapi=1&playerapiid=',
cont : function(base, vid, index){
if (base.options.resumeOnVisible && base.video.list[index].status === 2){
base.video.postMsg('{"event":"command","func":"playVideo"}', vid);
}
},
pause : function(base, vid, index){
// pause ALL videos on the page - in IE, pausing a video means it will continue when next seen =(
$('iframe[src*=youtube]').each(function(){
// if (this.id !== vid || (this.id === vid && base.video.list[index].status >= 0)) { // trying to fix the continue video problem; this only breaks it
base.video.postMsg('{"event":"command","func":"pauseVideo"}', vid);
// }
});
},
message : function(base, data){
if (data.event === 'infoDelivery') { return; } // ignore youtube video loading spam
// *** YouTube *** iframe returns an embeded url (data.info.videoUrl) but no video id...
if (data.info && data.info.videoUrl) {
// figure out vid for youtube
// data.info.videoURL = http://www.youtube.com/watch?v=###########&feature=player_embedded
var url = base.video.gup('v', data.info.videoUrl), // end up with ###########, now find it
v = $('iframe[src*=' + url + ']'), vid, index;
// iframe src changes when watching related videos; so there is no way to tell which video has an update
if (v.length) {
vid = v[0].id;
index = vid.replace(base.video.options.videoID, '');
// YouTube ready, add additional event listeners for video status. BUT this never fires off =(
// Fixing this may solve the continue problem
if (data.event === 'onReady') {
base.video.postMsg('{"event":"listening","func":"onStateChange"}', vid);
}
// Update status, so the "isPlaying" function can access it
if (data.event === 'onStateChange' && base.video.list[index]) {
// update list with current status; data.info.playerState = YouTube
base.video.list[index].status = data.info.playerState;
}
}
}
},
isPlaying : function(base, vid, index){
var status = base.video.list[index].status;
// state: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
return (status === 1 || status > 2) ? true : false;
}
},
// *** Embeded YouTube ***
// include embed for IE; SWFObject adds the url to the object data attribute
youtube2 : {
selector : 'object[data-url*=youtube], embed[src*=youtube]',
initAPI : '&iv_load_policy=3&enablejsapi=1&version=3&playerapiid=', // video ID added to the end
// YouTube - player states: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
cont : function(base, vid, index) {
if (base.options.resumeOnVisible) {
var $vid = $('#' + vid);
// continue video if previously played and not cued
if ($vid.length && typeof($vid[0].getPlayerState) === 'function' && $vid[0].getPlayerState() > 0) {
$vid[0].playVideo();
}
}
},
pause : function(base, vid){
// find ALL videos and pause them, just in case
$('object[data-url*=youtube], embed[src*=youtube]').each(function(){
var el = (this.tagName === 'EMBED') ? $(this).parent()[0] : this;
// player states: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
if (typeof(el.getPlayerState) === 'function' && el.getPlayerState() > 0) {
// pause video if not autoplaying (if already initialized)
el.pauseVideo();
}
});
},
isPlaying : function(base, vid){
var $vid = $('#' + vid);
return (typeof($vid[0].getPlayerState) === 'function' && ($vid[0].getPlayerState() === 1 || $vid[0].getPlayerState() > 2)) ? true : false;
}
}
};
})(jQuery);
// Initialize video extension automatically
jQuery(window).load(function(){
jQuery('.anythingBase').anythingSliderVideo();
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,140 @@
/*
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
*
* Uses the built In easIng capabilities added In jQuery 1.1
* to offer multiple easIng options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend( jQuery.easing,
{
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,165 @@
GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License.
"The Library" refers to a covered work governed by this License,
other than an Application or a Combined Work as defined below.
An "Application" is any work that makes use of an interface provided
by the Library, but which is not otherwise based on the Library.
Defining a subclass of a class defined by the Library is deemed a mode
of using an interface provided by the Library.
A "Combined Work" is a work produced by combining or linking an
Application with the Library. The particular version of the Library
with which the Combined Work was made is also called the "Linked
Version".
The "Minimal Corresponding Source" for a Combined Work means the
Corresponding Source for the Combined Work, excluding any source code
for portions of the Combined Work that, considered in isolation, are
based on the Application, and not on the Linked Version.
The "Corresponding Application Code" for a Combined Work means the
object code and/or source code for the Application, including any data
and utility programs needed for reproducing the Combined Work from the
Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a
facility refers to a function or data to be supplied by an Application
that uses the facility (other than as an argument passed when the
facility is invoked), then you may convey a copy of the modified
version:
a) under this License, provided that you make a good faith effort to
ensure that, in the event an Application does not supply the
function or data, the facility still operates, and performs
whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of
this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from
a header file that is part of the Library. You may convey such object
code under terms of your choice, provided that, if the incorporated
material is not limited to numerical parameters, data structure
layouts and accessors, or small macros, inline functions and templates
(ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the
Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license
document.
4. Combined Works.
You may convey a Combined Work under terms of your choice that,
taken together, effectively do not restrict modification of the
portions of the Library contained in the Combined Work and reverse
engineering for debugging such modifications, if you also do each of
the following:
a) Give prominent notice with each copy of the Combined Work that
the Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license
document.
c) For a Combined Work that displays copyright notices during
execution, include the copyright notice for the Library among
these notices, as well as a reference directing the user to the
copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this
License, and the Corresponding Application Code in a form
suitable for, and under terms that permit, the user to
recombine or relink the Application with a modified version of
the Linked Version to produce a modified Combined Work, in the
manner specified by section 6 of the GNU GPL for conveying
Corresponding Source.
1) Use a suitable shared library mechanism for linking with the
Library. A suitable mechanism is one that (a) uses at run time
a copy of the Library already present on the user's computer
system, and (b) will operate properly with a modified version
of the Library that is interface-compatible with the Linked
Version.
e) Provide Installation Information, but only if you would otherwise
be required to provide such information under section 6 of the
GNU GPL, and only to the extent that such information is
necessary to install and execute a modified version of the
Combined Work produced by recombining or relinking the
Application with a modified version of the Linked Version. (If
you use option 4d0, the Installation Information must accompany
the Minimal Corresponding Source and Corresponding Application
Code. If you use option 4d1, you must provide the Installation
Information in the manner specified by section 6 of the GNU GPL
for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the
Library side by side in a single library together with other library
facilities that are not Applications and are not covered by this
License, and convey such a combined library under terms of your
choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based
on the Library, uncombined with any other library facilities,
conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it
is a work based on the Library, and explaining where to find the
accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions
of the GNU Lesser General Public License from time to time. Such new
versions will be similar in spirit to the present version, but may
differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the
Library as you received it specifies that a certain numbered version
of the GNU Lesser General Public License "or any later version"
applies to it, you have the option of following the terms and
conditions either of that published version or of any later version
published by the Free Software Foundation. If the Library as you
received it does not specify a version number of the GNU Lesser
General Public License, you may choose any version of the GNU Lesser
General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide
whether future versions of the GNU Lesser General Public License shall
apply, that proxy's public statement of acceptance of any version is
permanent authorization for you to choose that version for the
Library.

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider Simple Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider optional extensions -->
<!-- <script src="js/jquery.anythingslider.fx.js"></script> -->
<!-- <script src="js/jquery.anythingslider.video.js"></script> -->
<!-- Define slider dimensions here -->
<style>
#slider { width: 700px; height: 390px; }
</style>
<!-- AnythingSlider initialization -->
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
});
</script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body id="simple">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a class="current" href="simple.html">Simple Demo</a>
<a href="expand.html">Expand Demo</a>
<a href="video.html">Video Demo</a>
<a href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<!-- Simple AnythingSlider -->
<ul id="slider">
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul>
<!-- END AnythingSlider -->
</body>
</html>

View File

@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider Video Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider({
resizeContents : true,
addWmodeToObject : 'transparent',
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
}
});
});
</script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<br>
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a href="expand.html">Expand Demo</a>
<a class="current" href="video.html">Video Demo</a>
<a href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<br><br>
<!-- START AnythingSlider -->
<ul id="slider">
<!-- Vimeo: iframe -->
<li class="panel1"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe></li>
<!-- Vimeo: Embeded -->
<li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>
<!-- YouTube: iframe -->
<li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>
<!-- YouTube: Embedded -->
<li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<!-- HTML5 Video -->
<li class="panel5">
<video width="320" height="240" controls="controls">
<source src="demos/video/movie.ogg" type="video/ogg">
<source src="demos/video/movie.mp4" type="video/mp4">
<source src="demos/video/movie.webm" type="video/webm">
Your browser does not support the video tag. But you could include an iframe/embeded video here.
</video>
</li>
</ul> <!-- END AnythingSlider -->
<br>
<!-- Video compatibility table -->
<div class="video-info">
<h2>AnythingSlider Video Extension Compatibility</h2>
<table border="1" class="data">
<thead>
<tr>
<th rowspan="2">Video Type</th>
<th rowspan="2">Function</th>
<th colspan="7">Browser</th>
</tr>
<tr>
<th class="header">FF</th>
<th class="header">C</th>
<th class="header">S</th>
<th class="header">O</th>
<th class="header">IE9</th>
<th class="header">IE8</th>
<th class="header">IE7</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">Vimeo iframe</th>
<td>Setup</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Continue</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr><td>Pause</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<td>Pause Slideshow</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<th rowspan="4">Vimeo embed</th>
<td>Setup</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Continue</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr><td>Pause</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Pause Slideshow</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<th rowspan="4">YouTube iframe</th>
<td>Setup</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Continue *</td>
<td class="prob"></td> <!-- Firefox -->
<td class="prob"></td> <!-- Chrome -->
<td class="prob"></td> <!-- Safari -->
<td class="bad"></td> <!-- Opera -->
<td class="prob"></td> <!-- IE9 -->
<td class="prob"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr><td>Pause</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<td>Pause Slideshow</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="bad"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<th rowspan="4">YouTube embed</th>
<td>Setup</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Continue</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr><td>Pause</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<td>Pause Slideshow</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="good"></td> <!-- IE8 -->
<td class="good"></td> <!-- IE7 -->
</tr>
<tr>
<th rowspan="4">HTML5 Video</th>
<td>Setup</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="prob"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="bad"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<td>Continue</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="bad"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr><td>Pause</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="bad"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
<tr>
<td>Pause Slideshow</td>
<td class="good"></td> <!-- Firefox -->
<td class="good"></td> <!-- Chrome -->
<td class="good"></td> <!-- Safari -->
<td class="good"></td> <!-- Opera -->
<td class="good"></td> <!-- IE9 -->
<td class="bad"></td> <!-- IE8 -->
<td class="bad"></td> <!-- IE7 -->
</tr>
</tbody>
</table>
<br>
<h3>Legend</h3>
<ul>
<li>(*) YouTube iframe
<ul>
<li>The video autoplays (continues) the second time the video comes into view, because it gets paused even though it hasn't started; oddly this isn't a problem in Firefox. Still working on a fix.</li>
<li>Watching a related video breaks the ability if the slider to continue playing and pause the slideshow while playing these videos. This is because the iframe does not update the video URL and there is no way, that I know of, of determining which iframe is reporting a status change.</li>
</ul>
</li>
<li>(FF) Firefox 3+ - No problems noted.</li>
<li>(C) Chrome - Ignore "Unsafe JavaScript attempt to access frame with URL" error.</li>
<li>(S) Safari 4+
<ul>
<li>HTML5 video shows up as a black box when it should be hidden by overflow (at least in Windows).</li>
<li>In Safari for Windows, including an HTML5 along with other videos appears to offset every video down and right (about 100px) for an unknown reason. For now, this issue can be solved by keeping HTML5 videos separate from other videos.</li>
</ul>
</li>
<li>(O) Opera 9+ - YouTube iframe does not update player status when the script controls it (<a href="https://groups.google.com/forum/#!msg/youtube-api-gdata/eaPsecXHVmc/NXNDQhMZcwsJ">reported</a>). So this breaks this extension's ability to resume a video and pause the slideshow.</li>
<li>(IE9) Internet Explorer 9 - See "*" Note above.</li>
<li>(IE8) Internet Explorer 8 - no support for HTML5.</li>
<li>(IE7) Internet Explorer 7 - no support for HTML5 and no support for iframe communication.</li>
</ul>
</div>
<br>
</body>
</html>

View File

@@ -0,0 +1,22 @@
Copyright (c) 2011 Tyler Smith
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,30 @@
jQuery FlexSlider v1.4
http://flex.madebymufffin.com
A responsive jQuery slider plugin. The plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options, and all the navigation options you would expect, including touch gestures. It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well.
Copyright (c) 2011 Tyler Smith.
Released on http://flex.madebymufffin.com and Smashing Magazine.
---
Changelog:
v1.4 (2011-08-23)
- Added "manualControls" property to allow for custom, non-dynamic control navigation
- Added "show" animation to allow for instant transitions between slides
v1.3 (2011-08-18)
- Made slide animation a continuous scroll effect, rather than jumping back to start/end
- Cleaned up code and created better test cases for different slider scenarios. The slider is a lot more bulletproof as of this update.
--
v1.2 (2011-08-16)
- Fixed some code redundancies
- Added "randomize" property to randomize slide oder on pageLoad
- Added "touchSwipe" property for swipe gestures on iOS and Android devices (no Android device to test this, but it should work)
- Fixed minor bugs in jQuery 1.3.2 where navigation was not appending correctly
--
v1.0 2011-08-14 (Release)
- Free to use under the MIT license

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>FlexSlider Demo</title>
<!-- FlexSlider pieces -->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<!-- Includes for this demo -->
<link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />
<!-- Hook up the FlexSlider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div id="container">
<h2>FlexSlider Demo - <a href="http://flex.madebymufffin.com">Visit the homepage for documentation details</a></h2>
<!--=============================
Markup for FADE animation
=================================-->
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
<!--============================
Markup for SLIDE animation
You need to add an extra container element for the overflow: hidden property on the slider
Update your flexslider() function with the following properties:
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flexslider-container"
});
});
</script>
=================================
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
</div>
==================================-->
</div>
</body>
</html>

View File

@@ -0,0 +1,39 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
.flexslider .slides li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider-container {position: relative;}
/* Caption style */
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px;}
/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} /* set negative margin-top equal to half the height on the directional-nav for perfect vertical centering */
.flex-direction-nav li a.next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li a.prev {background-position: 0 0; left: -21px;}
/* Control Nav */
.flex-control-nav {margin-left: -31px; position: absolute; bottom: -30px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */
.flex-control-nav li {margin: 0 0 0 5px; float: left;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

View File

@@ -0,0 +1,11 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* TouchWipe gesture credits: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
*/
(function(a){a.fn.extend({flexslider:function(q){var k={animation:"fade",slideshow:true,slideshowSpeed:7000,animationDuration:500,directionNav:true,controlNav:true,keyboardNav:true,touchSwipe:true,prevText:"Previous",nextText:"Next",randomize:false,slideToStart:0,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:""};var q=a.extend(k,q),d=this,c=a(".slides",d),b=a(".slides li",d),f=b.length;ANIMATING=false,currentSlide=q.slideToStart;if(q.randomize&&f>1){b.sort(function(){return(Math.round(Math.random())-0.5)});c.empty().append(b)}if(q.animation.toLowerCase()=="slide"&&f>1){d.css({overflow:"hidden"});c.append(b.filter(":first").clone().addClass("clone")).prepend(b.filter(":last").clone().addClass("clone"));c.width(((f+2)*d.width())+2000);var g=a(".slides li",d);setTimeout(function(){g.width(d.width()).css({"float":"left"}).show()},100);c.css({marginLeft:(-1*(currentSlide+1))*d.width()+"px"})}else{b.hide().eq(currentSlide).fadeIn(400)}function o(i){if(!ANIMATING){ANIMATING=true;if(q.animation.toLowerCase()=="slide"){if(currentSlide==0&&i==f-1){c.animate({marginLeft:"0px"},q.animationDuration,function(){c.css({marginLeft:(-1*f)*b.filter(":first").width()+"px"});ANIMATING=false;currentSlide=i})}else{if(currentSlide==f-1&&i==0){c.animate({marginLeft:(-1*(f+1))*b.filter(":first").width()+"px"},q.animationDuration,function(){c.css({marginLeft:-1*b.filter(":first").width()+"px"});ANIMATING=false;currentSlide=i})}else{c.animate({marginLeft:(-1*(i+1))*b.filter(":first").width()+"px"},q.animationDuration,function(){ANIMATING=false;currentSlide=i})}}}else{if(q.animation.toLowerCase()=="show"){b.eq(currentSlide).hide();b.eq(i).show();ANIMATING=false;currentSlide=i}else{d.css({minHeight:b.eq(currentSlide).height()});b.eq(currentSlide).fadeOut(q.animationDuration,function(){b.eq(i).fadeIn(q.animationDuration,function(){ANIMATING=false;currentSlide=i});d.css({minHeight:"inherit"})})}}}}if(q.controlNav&&f>1){if(q.manualControls!=""&&a(q.manualControls).length>0){var e=a(q.manualControls)}else{var e=a('<ol class="flex-control-nav"></ol>');var l=1;for(var m=0;m<f;m++){e.append("<li><a>"+l+"</a></li>");l++}if(q.controlsContainer!=""&&a(q.controlsContainer).length>0){a(q.controlsContainer).append(e)}else{d.append(e)}e=a(".flex-control-nav li a")}e.eq(currentSlide).addClass("active");e.click(function(j){j.preventDefault();if(a(this).hasClass("active")||ANIMATING){return}else{e.removeClass("active");a(this).addClass("active");var i=e.index(a(this));o(i);if(q.pauseOnAction){clearInterval(n)}}})}if(q.directionNav&&f>1){if(q.controlsContainer!=""&&a(q.controlsContainer).length>0){a(q.controlsContainer).append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}else{d.append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}a(".flex-direction-nav li a").click(function(i){i.preventDefault();if(ANIMATING){return}else{if(a(this).hasClass("next")){var j=(currentSlide==f-1)?0:currentSlide+1}else{var j=(currentSlide==0)?f-1:currentSlide-1}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}})}if(q.keyboardNav&&f>1){a(document).keyup(function(i){if(ANIMATING){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=(currentSlide==f-1)?0:currentSlide+1}else{if(i.keyCode==37){var j=(currentSlide==0)?f-1:currentSlide-1}}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}}})}if(q.slideshow&&f>1){var n;function p(){if(ANIMATING){return}else{var i=(currentSlide==f-1)?0:currentSlide+1;if(q.controlNav){e.removeClass("active");e.eq(i).addClass("active")}o(i)}}if(q.pauseOnHover){d.hover(function(){clearInterval(n)},function(){n=setInterval(p,q.slideshowSpeed)})}if(f>1){n=setInterval(p,q.slideshowSpeed)}}if(q.touchSwipe&&"ontouchstart" in document.documentElement&&f>1){d.each(function(){var i,j=20;isMoving=false;function t(){this.removeEventListener("touchmove",r);i=null;isMoving=false}function r(y){if(isMoving){var u=y.touches[0].pageX,v=i-u;if(Math.abs(v)>=j){t();if(v>0){var w=(currentSlide==f-1)?0:currentSlide+1}else{var w=(currentSlide==0)?f-1:currentSlide-1}if(q.controlNav){e.removeClass("active");e.eq(w).addClass("active")}o(w);if(q.pauseOnAction){clearInterval(n)}}}}function s(u){if(u.touches.length==1){i=u.touches[0].pageX;isMoving=true;this.addEventListener("touchmove",r,false)}}if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",s,false)}})}if(q.animation.toLowerCase()=="slide"&&f>1){var h;a(window).resize(function(){g.width(d.width());c.width(((f+2)*d.width())+2000);clearTimeout(h);h=setTimeout(function(){o(currentSlide)},300)})}}})})(jQuery);

View File

@@ -0,0 +1,340 @@
/*
* jQuery FlexSlider v1.4
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* TouchWipe gesture credits: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
*/
(function ($) {
$.fn.extend({
flexslider: function(options) {
//Plugin options and their default values
var defaults = {
animation: "fade", //Select your animation type (fade/slide/show)
slideshow: true, //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 500, //Set the speed of animations, in milliseconds
directionNav: true, //Create navigation for previous/next navigation? (true/false)
controlNav: true, //Create navigation for paging control of each clide? (true/false)
keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true, //Touch swipe gestures for left/right slide navigation (true/false)
prevText: "Previous", //Set the text for the "previous" directionNav item
nextText: "Next", //Set the text for the "next" directionNav item
randomize: false, //Randomize slide order on page load? (true/false)
slideToStart: 0, //The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
pauseOnHover: false, //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
controlsContainer: "", //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "" //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav" or "#tabs-nav", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously).
}
//Get slider, slides, and other useful variables
var options = $.extend(defaults, options),
slider = this,
container = $('.slides', slider),
slides = $('.slides li', slider),
length = slides.length;
ANIMATING = false,
currentSlide = options.slideToStart;
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: RANDOMIZE SLIDES
if (options.randomize && length > 1) {
slides.sort(function() { return (Math.round(Math.random())-0.5); });
container.empty().append(slides);
}
///////////////////////////////////////////////////////////////////
//Slider animation initialize
if (options.animation.toLowerCase() == "slide" && length > 1) {
slider.css({"overflow": "hidden"});
container.append(slides.filter(':first').clone().addClass('clone')).prepend(slides.filter(':last').clone().addClass('clone'));
container.width(((length + 2) * slider.width()) + 2000); //extra width to account for quirks
//Timeout function to give browser enough time to get proper width initially
var newSlides = $('.slides li', slider);
setTimeout(function() {
newSlides.width(slider.width()).css({"float": "left"}).show();
}, 100);
container.css({"marginLeft": (-1 * (currentSlide + 1))* slider.width() + "px"});
} else { //Default to fade
slides.hide().eq(currentSlide).fadeIn(400);
}
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: ANIMATION TYPE
function flexAnimate(target) {
if (!ANIMATING) {
ANIMATING = true;
if (options.animation.toLowerCase() == "slide") {
if (currentSlide == 0 && target == length - 1) {
container.animate({"marginLeft": "0px"}, options.animationDuration, function(){
container.css({"marginLeft": (-1 * length) * slides.filter(':first').width() + "px"});
ANIMATING = false;
currentSlide = target;
});
} else if (currentSlide == length - 1 && target == 0) {
container.animate({"marginLeft": (-1 * (length + 1)) * slides.filter(':first').width() + "px"}, options.animationDuration, function(){
container.css({"marginLeft": -1 * slides.filter(':first').width() + "px"});
ANIMATING = false;
currentSlide = target;
});
} else {
container.animate({"marginLeft": (-1 * (target + 1)) * slides.filter(':first').width() + "px"}, options.animationDuration, function(){
ANIMATING = false;
currentSlide = target;
});
}
} else if (options.animation.toLowerCase() == "show") {
slides.eq(currentSlide).hide();
slides.eq(target).show();
ANIMATING = false;
currentSlide = target;
} else { //Default to Fade
slider.css({"minHeight": slides.eq(currentSlide).height()});
slides.eq(currentSlide).fadeOut(options.animationDuration, function() {
slides.eq(target).fadeIn(options.animationDuration, function() {
ANIMATING = false;
currentSlide = target;
});
slider.css({"minHeight": "inherit"});
});
}
}
}
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// FLEXSLIDER: CONTROL NAV
if (options.controlNav && length > 1) {
if (options.manualControls != "" && $(options.manualControls).length > 0) {
var controlNav = $(options.manualControls);
} else {
var controlNav = $('<ol class="flex-control-nav"></ol>');
var j = 1;
for (var i = 0; i < length; i++) {
controlNav.append('<li><a>' + j + '</a></li>');
j++;
}
//extra children check for jquery 1.3.2 - Drupal 6
if (options.controlsContainer != "" && $(options.controlsContainer).length > 0) {
$(options.controlsContainer).append(controlNav);
} else {
slider.append(controlNav);
}
controlNav = $('.flex-control-nav li a');
}
controlNav.eq(currentSlide).addClass('active');
controlNav.click(function(event) {
event.preventDefault();
if ($(this).hasClass('active') || ANIMATING) {
return;
} else {
controlNav.removeClass('active');
$(this).addClass('active');
var selected = controlNav.index($(this));
flexAnimate(selected);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: DIRECTION NAV
if (options.directionNav && length > 1) {
//Create and append the nav
if (options.controlsContainer != "" && $(options.controlsContainer).length > 0) {
$(options.controlsContainer).append($('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + options.prevText + '</a></li><li><a class="next" href="#">' + options.nextText + '</a></li></ul>'));
} else {
slider.append($('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + options.prevText + '</a></li><li><a class="next" href="#">' + options.nextText + '</a></li></ul>'));
}
$('.flex-direction-nav li a').click(function(event) {
event.preventDefault();
if (ANIMATING) {
return;
} else {
if ($(this).hasClass('next')) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
} else {
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: KEYBOARD NAV
if (options.keyboardNav && length > 1) {
$(document).keyup(function(event) {
if (ANIMATING) {
return;
} else if (event.keyCode != 39 && event.keyCode != 37){
return;
} else {
if (event.keyCode == 39) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
} else if (event.keyCode == 37){
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: ANIMATION SLIDESHOW
if (options.slideshow && length > 1) {
var animatedSlides;
function animateSlides() {
if (ANIMATING) {
return;
} else {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
}
}
//pauseOnHover
if (options.pauseOnHover) {
slider.hover(function() {
clearInterval(animatedSlides);
}, function() {
animatedSlides = setInterval(animateSlides, options.slideshowSpeed);
});
}
//Initialize animation
if (length > 1) {
animatedSlides = setInterval(animateSlides, options.slideshowSpeed);
}
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: TOUCHSWIPE GESTURES
//Credit of concept: TouchSwipe - http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
if (options.touchSwipe && 'ontouchstart' in document.documentElement && length > 1) {
slider.each(function() {
var startX,
min_move_x = 20;
isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if (isMoving) {
var x = e.touches[0].pageX,
dx = startX - x;
if(Math.abs(dx) >= min_move_x) {
cancelTouch();
if(dx > 0) {
var target = (currentSlide == length - 1) ? 0 : currentSlide + 1;
}
else {
var target = (currentSlide == 0) ? length - 1 : currentSlide - 1;
}
if (options.controlNav) {
controlNav.removeClass('active');
controlNav.eq(target).addClass('active');
}
flexAnimate(target);
if (options.pauseOnAction) {
clearInterval(animatedSlides);
}
}
}
}
function onTouchStart(e) {
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//FLEXSLIDER: RESIZE FUNCTIONS (If necessary)
if (options.animation.toLowerCase() == "slide" && length > 1) {
var sliderTimer;
$(window).resize(function(){
newSlides.width(slider.width());
//clones.width(slider.width());
container.width(((length + 2) * slider.width()) + 2000); //extra width to account for quirks
//slider resize reset
clearTimeout(sliderTimer);
sliderTimer = setTimeout(function(){
flexAnimate(currentSlide);
}, 300);
});
}
//////////////////////////////////////////////////////////////////
}
});
})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,8 @@
jQuery bxSlider v3.0
http://bxslider.com
Copyright 2011, Steven Wanderski
http://bxcreative.com
Free to use and abuse under the MIT license.
http://www.opensource.org/licenses/mit-license.php

View File

@@ -0,0 +1,226 @@
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,205 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,24 @@
#
# Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
# For licensing, see LICENSE.html or http://ckeditor.com/license
#
#
# On some specific Linux installations you could face problems with Firefox.
# It could give you errors when loading the editor saying that some illegal
# characters were found (three strange chars in the beginning of the file).
# This could happen if you map the .js or .css files to PHP, for example.
#
# Those characters are the Byte Order Mask (BOM) of the Unicode encoded files.
# All FCKeditor files are Unicode encoded.
#
AddType application/x-javascript .js
AddType text/css .css
#
# If PHP is mapped to handle XML files, you could have some issues. The
# following will disable it.
#
AddType text/xml .xml

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,92 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Installation Guide - CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
h3
{
border-bottom: 1px solid #AAAAAA;
}
pre
{
background-color: #F9F9F9;
border: 1px dashed #2F6FAB;
padding: 1em;
line-height: 1.1em;
}
#footer hr
{
margin: 10px 0 15px 0;
height: 1px;
border: solid 1px gray;
border-bottom: none;
}
#footer p
{
margin: 0 10px 10px 10px;
float: left;
}
#footer #copy
{
float: right;
}
</style>
</head>
<body>
<h1>
CKEditor Installation Guide</h1>
<h3>
What&#39;s CKEditor?</h3>
<p>
CKEditor is a text editor to be used inside web pages. It&#39;s not a replacement
for desktop text editors like Word or OpenOffice, but a component to be used as
part of web applications and web sites.</p>
<h3>
Installation</h3>
<p>
Installing CKEditor is an easy task. Just follow these simple steps:</p>
<ol>
<li><strong>Download</strong> the latest version of the editor from our web site: <a
href="http://ckeditor.com">http://ckeditor.com</a>. You should have already completed
this step, but be sure you have the very latest version.</li>
<li><strong>Extract</strong> (decompress) the downloaded file into the root of your
web site.</li>
</ol>
<p>
<strong>Note:</strong> CKEditor is by default installed in the &quot;ckeditor&quot;
folder. You can place the files in whichever you want though.</p>
<h3>
Checking Your Installation
</h3>
<p>
The editor comes with a few sample pages that can be used to verify that installation
proceeded properly. Take a look at the <a href="_samples">_samples</a> directory.</p>
<p>
To test your installation, just call the following page at your web site:</p>
<pre>
http://&lt;your site&gt;/&lt;CKEditor installation path&gt;/_samples/index.html
For example:
http://www.example.com/ckeditor/_samples/index.html</pre>
<h3>
Documentation</h3>
<p>
The full editor documentation is available online at the following address:<br />
<a href="http://docs.cksource.com/ckeditor">http://docs.cksource.com/ckeditor</a></p>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8" ?>
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>com.ckeditor.air.sample</id>
<name>CKEditor - Adobe AIR Sample Application</name>
<version>1.0</version>
<filename>CKEditor AIR Samples</filename>
<description>This is a sample AIR application of CKEditor.</description>
<copyright>Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.</copyright>
<initialWindow>
<content>_samples/adobeair/sample.html</content>
<title>CKEditor - Adobe AIR Sample</title>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<resizable>true</resizable>
<x>100</x>
<y>80</y>
<width>950</width>
<height>700</height>
<minSize>900 600</minSize>
</initialWindow>
<installFolder>CKEditor/Sample AIR Application</installFolder>
<programMenuFolder>CKEditor/Sample AIR Application</programMenuFolder>
<customUpdateUI>false</customUpdateUI>
<allowBrowserInvocation>false</allowBrowserInvocation>
</application>

View File

@@ -0,0 +1,9 @@
@ECHO OFF
::
:: Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
:: For licensing, see LICENSE.html or http://ckeditor.com/license
::
:: Use this file to quickly run the sample in a Windows environment.
::
adl application.xml ../../

View File

@@ -0,0 +1,8 @@
#!/usr/bin/env bash
# Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
# For licensing, see LICENSE.html or http://ckeditor.com/license
# Use this file to quickly run the sample under Linux.
adl application.xml ../../

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textarea by Code - CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../../ckeditor.js"></script>
<link href="../sample.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { margin: 10px ; }
</style></head>
<body>
<h1 class="samples">
CKEditor - Adobe AIR Sample
</h1>
<p>
This is a sample HTML/JavaScript Adobe AIR application with CKEditor with default features.
</p>
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
//]]>
</script>
</p>
<div id="footer" style="position:absolute;bottom:0;left:0;right:0;width:100%;padding-bottom:10px;">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="#" onclick="window.runtime.flash.net.navigateToURL(new window.runtime.flash.net.URLRequest('http://ckeditor.com/'));return false;">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="#" onclick="window.runtime.flash.net.navigateToURL(new window.runtime.flash.net.URLRequest('http://cksource.com/'));return false;">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,98 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
var editor, html = '';
function createEditor()
{
if ( editor )
return;
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
editor = CKEDITOR.appendTo( 'editor', config, html );
}
function removeEditor()
{
if ( !editor )
return;
// Retrieve the editor contents. In an Ajax application, this data would be
// sent to the server or used in any other way.
document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
document.getElementById( 'contents' ).style.display = '';
// Destroy the editor.
editor.destroy();
editor = null;
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
</h1>
<div class="description">
<p>
This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
area will be displayed in a <code>&lt;div&gt;</code> element.
</p>
<p>
For details of how to create this setup check the source code of this sample page
for JavaScript code responsible for the creation and destruction of a CKEditor instance.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<p>Click the buttons to create and remove a CKEditor instance.</p>
<p>
<input onclick="createEditor();" type="button" value="Create Editor" />
<input onclick="removeEditor();" type="button" value="Remove Editor" />
</p>
<!-- This div will hold the editor. -->
<div id="editor">
</div>
<div id="contents" style="display: none">
<p>
Edited Contents:</p>
<!-- This div will be used to display the editor contents. -->
<div id="editorcontents">
</div>
</div>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,192 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>API Usage &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
// Show the editor name and description in the browser status bar.
document.getElementById( 'eMessage' ).innerHTML = '<p>Instance <code>' + ev.editor.name + '<\/code> loaded.<\/p>';
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
oEditor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function InsertText()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'txtArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert as plain text.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText
oEditor.insertText( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function SetContents()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Set editor contents (replace current contents).
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
oEditor.setData( value );
}
function GetContents()
{
// Get the editor instance that you want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Get editor contents
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
alert( oEditor.getData() );
}
function ExecuteCommand( commandName )
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Execute the command.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
oEditor.execCommand( commandName );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function CheckDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Checks whether the current editor contents present changes when compared
// to the contents loaded into the editor at startup
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty
alert( oEditor.checkDirty() );
}
function ResetDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Resets the "dirty state" of the editor (see CheckDirty())
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
oEditor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using CKEditor JavaScript API
</h1>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html">CKEditor JavaScript API</a>
to interact with the editor at runtime.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>
<div id="eMessage">
</div>
<div id="eButtons" style="display: none">
<input onclick="InsertHTML();" type="button" value="Insert HTML" />
<input onclick="SetContents();" type="button" value="Set Editor Contents" />
<input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)" />
<br />
<textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</textarea>
<br />
<br />
<input onclick="InsertText();" type="button" value="Insert Text" />
<br />
<textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces.
Second line of text preceded by two line breaks.</textarea>
<br />
<input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command" />
<input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command" />
<br />
<br />
<input onclick="CheckDirty();" type="button" value="checkDirty()" />
<input onclick="ResetDirty();" type="button" value="resetDirty()" />
</div>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,198 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<style id="styles" type="text/css">
.cke_button_myDialogCmd .cke_icon
{
display: none !important;
}
.cke_button_myDialogCmd .cke_label
{
display: inline !important;
}
</style>
<script type="text/javascript">
//<![CDATA[
// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if ( dialogName == 'link' )
{
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
// Add a text field to the "info" tab.
infoTab.add( {
type : 'text',
label : 'My Custom Field',
id : 'customField',
'default' : 'Sample!',
validate : function()
{
if ( /\d/.test( this.getValue() ) )
return 'My Custom Field must not contain digits';
}
});
// Remove the "Link Type" combo and the "Browser
// Server" button from the "info" tab.
infoTab.remove( 'linkType' );
infoTab.remove( 'browse' );
// Set the default value for the URL field.
var urlField = infoTab.get( 'url' );
urlField['default'] = 'www.example.com';
// Remove the "Target" tab from the "Link" dialog.
dialogDefinition.removeContents( 'target' );
// Add a new tab to the "Link" dialog.
dialogDefinition.addContents({
id : 'customTab',
label : 'My Tab',
accessKey : 'M',
elements : [
{
id : 'myField1',
type : 'text',
label : 'My Text Field'
},
{
id : 'myField2',
type : 'text',
label : 'Another Text Field'
}
]
});
// Rewrite the 'onFocus' handler to always focus 'url' field.
dialogDefinition.onFocus = function()
{
var urlField = this.getContentElement( 'info', 'url' );
urlField.select();
};
}
});
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using CKEditor Dialog API
</h1>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html">CKEditor Dialog API</a>
to customize CKEditor dialog windows without changing the original editor code.
The following customizations are being done in the example below:
</p>
<ol>
<li><strong>Adding dialog window tabs</strong> &ndash; "My Tab" in the "Link" dialog window.</li>
<li><strong>Removing a dialog window tab</strong> &ndash; "Target" tab from the "Link" dialog window.</li>
<li><strong>Adding dialog window fields</strong> &ndash; "My Custom Field" in the "Link" dialog window.</li>
<li><strong>Removing dialog window fields</strong> &ndash; "Link Type" and "Browse Server" in the "Link"
dialog window.</li>
<li><strong>Setting default values for dialog window fields</strong> &ndash; "URL" field in the
"Link" dialog window. </li>
<li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
</ol>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your
pages. -->
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1',
{
// Defines a simpler toolbar to be used in this sample.
// Note that we have added out "MyButton" button here.
toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]
});
// Listen for the "pluginsLoaded" event, so we are sure that the
// "dialog" plugin has been loaded and we are able to do our
// customizations.
editor.on( 'pluginsLoaded', function( ev )
{
// If our custom dialog has not been registered, do that now.
if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
{
// We need to do the following trick to find out the dialog
// definition file URL path. In the real world, you would simply
// point to an absolute path directly, like "/mydir/mydialog.js".
var href = document.location.href.split( '/' );
href.pop();
href.push( 'api_dialog', 'my_dialog.js' );
href = href.join( '/' );
// Finally, register the dialog.
CKEDITOR.dialog.add( 'myDialog', href );
}
// Register the command used to open the dialog.
editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
// Add the a custom toolbar buttons, which fires the above
// command..
editor.ui.addButton( 'MyButton',
{
label : 'My Dialog',
command : 'myDialogCmd'
} );
});
//]]>
</script>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,28 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.dialog.add( 'myDialog', function( editor )
{
return {
title : 'My Dialog',
minWidth : 400,
minHeight : 200,
contents : [
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab',
elements :
[
{
id : 'input1',
type : 'text',
label : 'Input 1'
}
]
}
]
};
} );

View File

@@ -0,0 +1,105 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label>Editor 1:</label><br/>
</p>
<%
' Create class instance.
dim editor, initialValue, code, textareaAttributes
set editor = New CKEditor
' Do not print the code directly to the browser, return it instead
editor.returnOutput = true
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Set global configuration (will be used by all instances of CKEditor).
editor.config("width") = 600
' Change default textarea attributes
set textareaAttributes = CreateObject("Scripting.Dictionary")
textareaAttributes.Add "rows", 10
textareaAttributes.Add "cols", 80
Set editor.textareaAttributes = textareaAttributes
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>. You are using <a href=""http://ckeditor.com/"">CKEditor</a>.</p>"
' Create first instance.
code = editor.editor("editor1", initialValue)
response.write code
%>
<p>
<label>Editor 2:</label><br/>
</p>
<%
' Configuration that will be used only by the second editor.
editor.instanceConfig("toolbar") = Array( _
Array( "Source", "-", "Bold", "Italic", "Underline", "Strike" ), _
Array( "Image", "Link", "Unlink", "Anchor" ) _
)
editor.instanceConfig("skin") = "v2"
' Create second instance.
response.write editor.editor("editor2", initialValue)
%>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label>Editor 1:</label><br/>
</p>
<%
''
' Adds global event, will hide "Target" tab in Link dialog in all instances.
'
function CKEditorHideLinkTargetTab(editor)
dim functionCode
functionCode = "function (ev) {" & vbcrlf & _
"// Take the dialog name and its definition from the event data" & vbcrlf & _
"var dialogName = ev.data.name;" & vbcrlf & _
"var dialogDefinition = ev.data.definition;" & vbcrlf & _
"" & vbcrlf & _
"// Check if the definition is from the Link dialog." & vbcrlf & _
"if ( dialogName == 'link' )" & vbcrlf & _
" dialogDefinition.removeContents('target')" & vbcrlf & _
"}" & vbcrlf
editor.addGlobalEventHandler "dialogDefinition", functionCode
end function
''
' Adds global event, will notify about opened dialog.
'
function CKEditorNotifyAboutOpenedDialog(editor)
dim functionCode
functionCode = "function (evt) {" & vbcrlf & _
"alert('Loading dialog: ' + evt.data.name);" & vbcrlf & _
"}"
editor.addGlobalEventHandler "dialogDefinition", functionCode
end function
dim editor, initialValue
' Create class instance.
set editor = new CKEditor
' Set configuration option for all editors.
editor.config("width") = 750
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>. You are using <a href=""http://ckeditor.com/"">CKEditor</a>.</p>"
' Event that will be handled only by the first editor.
editor.addEventHandler "instanceReady", "function (evt) { alert('Loaded editor: ' + evt.editor.name );}"
' Create first instance.
editor.editor "editor1", initialValue
' Clear event handlers, instances that will be created later will not have
' the 'instanceReady' listener defined a couple of lines above.
editor.clearEventHandlers empty
%>
<p>
<label>Editor 2:</label><br/>
</p>
<%
' Configuration that will be used only by the second editor.
editor.instanceConfig("width") = 600
editor.instanceConfig("toolbar") = "Basic"
' Add some global event handlers (for all editors).
CKEditorHideLinkTargetTab(editor)
CKEditorNotifyAboutOpenedDialog(editor)
' Event that will be handled only by the second editor.
editor.addInstanceEventHandler "instanceReady", "function (evt) { alert('Loaded second editor: ' + evt.editor.name );}"
' Create second instance.
editor.editor "editor2", initialValue
%>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ASP integration Samples List &mdash; CKEditor</title>
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples List for ASP &mdash; CKEditor Sample
</h1>
<h2 class="samples">
Overview
</h2>
<p>The ckeditor.asp file provides a wrapper to ease the work of creating CKEditor instances from classic Asp.</p>
<p>To use it, you must first include it into your page:
<code>
&lt;!-- #INCLUDE file="../../ckeditor.asp" --&gt;
</code>
Of course, you should adjust the path to make it point to the correct location, and maybe use a full path (with virtual="" instead of file="")
</p>
<p>After that script is included, you can use it in different ways, based on the following pattern:</p>
<ol>
<li>
Create an instance of the CKEditor class:
<pre class="samples">dim editor
set editor = New CKEditor</pre>
</li>
<li>
Set the path to the folder where CKEditor has been installed, by default it will use /ckeditor/
<pre class="samples">editor.basePath = "../../"</pre>
</li>
<li>
Now use one of the three main methods to create the CKEditor instances:
<ul class="samples">
<li>
Replace textarea with id (or name) "editor1".
<pre class="samples">editor.replaceInstance "editor1"</pre>
</li>
<li>
Replace all textareas with CKEditor.
<pre class="samples">editor.replaceAll empty</pre>
</li>
<li>
Create a textarea element and attach CKEditor to it.
<pre class="samples">editor.editor "editor1", initialValue</pre>
</li>
</ul>
</li>
</ol>
<p>Before step 3 you can use a number of methods and properties to adjust the behavior of this class and the CKEditor instances
that will be created:</p>
<ul class="samples">
<li>returnOutput : if set to true, the functions won't dump the code with response.write, but instead they will return it so
you can do anything you want</li>
<li>basePath: location of the CKEditor scripts</li>
<li>initialized: if you set it to true, it means that you have already included the CKEditor.js file into the page and it
doesn't have to be generated again.</li>
<li>textareaAttributes: You can set here a Dictionary object with the attributes that you want to output in the call to the "editor" method.</li>
<li>config: Allows to set config values for all the instances from now on.</li>
<li>instanceConfig: Allows to set config values just for the next instance.</li>
<li>addEventHandler: Adds an event handler for all the instances from now on.</li>
<li>addInstanceEventHandler: Adds an event handler just for the next instance.</li>
<li>addGlobalEventHandler: Adds an event handler for the global CKEDITOR object.</li>
<li>clearEventHandlers: Removes one or all the event handlers from all the instances from now on.</li>
<li>clearInstanceEventHandlers: Removes one or all the event handlers from the next instance.</li>
<li>clearGlobalEventHandlers: Removes one or all the event handlers from the global CKEDITOR object.</li>
</ul>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li><a class="samples" href="replace.asp">Replace existing textareas by code</a></li>
<li><a class="samples" href="replaceall.asp">Replace all textareas by code</a></li>
<li><a class="samples" href="standalone.asp">Create instances in asp</a></li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="advanced.asp">Advanced example</a></li>
<li><a class="samples" href="events.asp">Listening to events</a></li>
</ul>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<%
' Create class instance.
dim editor
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Replace textarea with id (or name) "editor1".
editor.replaceInstance "editor1"
%>
</body>
</html>

View File

@@ -0,0 +1,77 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2:</label><br/>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<%
' Create class instance.
dim editor
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Replace all textareas with CKEditor.
editor.replaceAll empty
%>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor - Posted Data
</h1>
<table border="1" cellspacing="0" id="outputSample">
<colgroup><col width="100" /></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<%
Dim sForm
For Each sForm in Request.Form
%>
<tr>
<th><%=Server.HTMLEncode( sForm )%></th>
<td><pre class="samples"><%=Server.HTMLEncode( Request.Form(sForm) )%></pre></td>
</tr>
<% Next %>
</table>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
Editor 1:
</p>
<p>
<%
dim initialValue, editor
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>.</p>"
' Create class instance.
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Create textarea element and attach CKEditor to it.
editor.editor "editor1", initialValue
%>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample &mdash; CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor &mdash; Posted Data
</h1>
<table border="1" cellspacing="0" id="outputSample">
<colgroup><col width="100" /></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<?php
if ( isset( $_POST ) )
$postArray = &$_POST ; // 4.1.0 or later, use $_POST
else
$postArray = &$HTTP_POST_VARS ; // prior to 4.1.0, use HTTP_POST_VARS
foreach ( $postArray as $sForm => $value )
{
if ( get_magic_quotes_gpc() )
$postedValue = htmlspecialchars( stripslashes( $value ) ) ;
else
$postedValue = htmlspecialchars( $value ) ;
?>
<tr>
<th style="vertical-align: top"><?php echo htmlspecialchars($sForm); ?></th>
<td><pre class="samples"><?php echo $postedValue?></pre></td>
</tr>
<?php
}
?>
</table>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,204 @@
/*
* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*
* Styles used by the XHTML 1.1 sample page (xhtml.html).
*/
/**
* Basic definitions for the editing area.
*/
body
{
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
color: #000000;
background-color: #ffffff;
padding: 5px;
margin: 0px;
}
/**
* Core styles.
*/
.Bold
{
font-weight: bold;
}
.Italic
{
font-style: italic;
}
.Underline
{
text-decoration: underline;
}
.StrikeThrough
{
text-decoration: line-through;
}
.Subscript
{
vertical-align: sub;
font-size: smaller;
}
.Superscript
{
vertical-align: super;
font-size: smaller;
}
/**
* Font faces.
*/
.FontComic
{
font-family: 'Comic Sans MS';
}
.FontCourier
{
font-family: 'Courier New';
}
.FontTimes
{
font-family: 'Times New Roman';
}
/**
* Font sizes.
*/
.FontSmaller
{
font-size: smaller;
}
.FontLarger
{
font-size: larger;
}
.FontSmall
{
font-size: 8pt;
}
.FontBig
{
font-size: 14pt;
}
.FontDouble
{
font-size: 200%;
}
/**
* Font colors.
*/
.FontColor1
{
color: #ff9900;
}
.FontColor2
{
color: #0066cc;
}
.FontColor3
{
color: #ff0000;
}
.FontColor1BG
{
background-color: #ff9900;
}
.FontColor2BG
{
background-color: #0066cc;
}
.FontColor3BG
{
background-color: #ff0000;
}
/**
* Indentation.
*/
.Indent1
{
margin-left: 40px;
}
.Indent2
{
margin-left: 80px;
}
.Indent3
{
margin-left: 120px;
}
/**
* Alignment.
*/
.JustifyLeft
{
text-align: left;
}
.JustifyRight
{
text-align: right;
}
.JustifyCenter
{
text-align: center;
}
.JustifyFull
{
text-align: justify;
}
/**
* Other.
*/
code
{
font-family: courier, monospace;
background-color: #eeeeee;
padding-left: 1px;
padding-right: 1px;
border: #c0c0c0 1px solid;
}
kbd
{
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}
blockquote
{
color: #808080;
}

View File

@@ -0,0 +1,70 @@
body
{
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #222;
background-color: #fff;
}
/* preserved spaces for rtl list item bullets. (#6249)*/
ol,ul,dl
{
padding-right:40px;
}
h1,h2,h3,h4
{
font-family: Georgia, Times, serif;
}
h1.lightBlue
{
color: #00A6C7;
font-size: 1.8em;
font-weight:normal;
}
h3.green
{
color: #739E39;
font-weight:normal;
}
span.markYellow { background-color: yellow; }
span.markGreen { background-color: lime; }
img.left
{
padding: 5px;
margin-right: 5px;
float:left;
border:2px solid #DDD;
}
img.right
{
padding: 5px;
margin-right: 5px;
float:right;
border:2px solid #DDD;
}
a.green
{
color:#739E39;
}
table.grey
{
background-color : #F5F5F5;
}
table.grey th
{
background-color : #DDD;
}
ul.square
{
list-style-type : square;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,108 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AutoGrow Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using AutoGrow Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>AutoGrow</strong> (<code>autogrow</code>) plugin that lets the editor window expand
and shrink depending on the amount and size of content entered in the editing area.
</p>
<p>
In its default implementation the <strong>AutoGrow feature</strong> can expand the
CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
</p>
<p>
It is also possible to set a maximum height for the editor window. Once CKEditor
editing area reaches the value in pixels specified in the <code>
<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoGrow_maxHeight">autoGrow_maxHeight</a>
</code> configuration setting, scrollbars will be added and the editor window will no longer expand.
</p>
<p>
To add a CKEditor instance using the <code>autogrow</code> plugin and its
<code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'autogrow',</strong>
autoGrow_maxHeight : 800,
// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
removePlugins : 'resize'
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor. The maximum height should
be given in pixels.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>autogrow</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1', {
extraPlugins : 'autogrow',
removePlugins : 'resize'
});
//]]>
</script>
</p>
<p>
<label for="editor2">
CKEditor using the <code>autogrow</code> plugin with maximum height set to 400 pixels:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor2', {
extraPlugins : 'autogrow',
autoGrow_maxHeight : 400,
removePlugins : 'resize'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,125 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BBCode Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; BBCode Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output <a href="http://en.wikipedia.org/wiki/BBCode">BBCode</a> format instead of HTML.
Please note that the editor configuration was modified to reflect what is needed in a BBCode editing environment.
Smiley images, for example, were stripped to the emoticons that are commonly used in some BBCode dialects.
</p>
<p>
Please note that currently there is no standard for the BBCode markup language, so its implementation
for different platforms (message boards, blogs etc.) can vary. This means that before using CKEditor to
output BBCode you may need to adjust the implementation to your own environment.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
a full definition:
</p>
<pre class="samples">
CKEDITOR.replace( 'editor1',
{
<strong>extraPlugins : 'bbcode',</strong>
toolbar :
[
['Source', '-', 'Save','NewPage','-','Undo','Redo'],
['Find','Replace','-','SelectAll','RemoveFormat'],
['Link', 'Unlink', 'Image'],
'/',
['FontSize', 'Bold', 'Italic','Underline'],
['NumberedList','BulletedList','-','Blockquote'],
['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
],
... <i>some other configurations omitted here</i>
}); </pre>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some [b]sample text[/b]. You are using [url=http://ckeditor.com/]CKEditor[/url].</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using the "bbcode" plugin, shaping some of the
// editor configuration to fit BBCode environment.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'bbcode',
// Remove unused plugins.
removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
// Width and height are not supported in the BBCode format, so object resizing is disabled.
disableObjectResizing : true,
// Define font sizes in percent values.
fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
toolbar :
[
['Source', '-', 'Save','NewPage','-','Undo','Redo'],
['Find','Replace','-','SelectAll','RemoveFormat'],
['Link', 'Unlink', 'Image', 'Smiley','SpecialChar'],
'/',
['Bold', 'Italic','Underline'],
['FontSize'],
['TextColor'],
['NumberedList','BulletedList','-','Blockquote'],
['Maximize']
],
// Strip CKEditor smileys to those commonly used in BBCode.
smiley_images :
[
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
'cry_smile.gif','kiss.gif'
],
smiley_descriptions :
[
'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
'indecision', 'angel', 'cool', 'crying', 'kiss'
]
} );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using DevTools Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Developer Tools Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
information about dialog window elements, including the name of the dialog window,
tab, and UI element. Please note that the tooltip also contains a link to the
<a href="http://docs.cksource.com/ckeditor_api/">CKEditor JavaScript API</a>
documentation for each of the selected elements.
</p>
<p>
This plugin is aimed at developers who would like to customize their CKEditor
instances and create their own plugins. By default it is turned off; it is
usually useful to only turn it on in the development phase. Note that it works with
all CKEditor dialog windows, including the ones that were created by custom plugins.
</p>
<p>
To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'devtools'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' ,
{
extraPlugins : 'devtools'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,154 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace DIV &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<style id="styles" type="text/css">
div.editable
{
border: solid 2px Transparent;
padding-left: 15px;
padding-right: 15px;
}
div.editable:hover
{
border-color: black;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function()
{
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
else if ( window.attachEvent )
document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev )
{
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do
{
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
replaceDiv( element );
}
var editor;
function replaceDiv( div )
{
if ( editor )
editor.destroy();
editor = CKEDITOR.replace( div );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace DIV with CKEditor on the Fly
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
with a CKEditor instance on the fly, following user's doubleclick. The content
that was previously placed inside the <code>&lt;div&gt;</code> element will now
be moved into CKEditor editing area.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<p>
Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
editor instances.</p>
<div class="editable">
<h3>
Part 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<div class="editable">
<h3>
Part 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
<p>
Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
</p>
</div>
<div class="editable">
<h3>
Part 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ENTER Key Configuration &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
var editor;
function changeEnter()
{
// If we already have an editor, let's destroy it first.
if ( editor )
editor.destroy( true );
// Create the editor again, with the appropriate settings.
editor = CKEDITOR.replace( 'editor1',
{
enterMode : Number( document.getElementById( 'xEnter' ).value ),
shiftEnterMode : Number( document.getElementById( 'xShiftEnter' ).value )
});
}
window.onload = changeEnter;
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; ENTER Key Configuration
</h1>
<div class="description">
<p>
This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
to perform actions specified in the
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode"><code>enterMode</code></a>
and <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.shiftEnterMode"><code>shiftEnterMode</code></a>
parameters, respectively.
You can choose from the following options:
</p>
<ul class="samples">
<li><strong><code>ENTER_P</code></strong> &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
<li><strong><code>ENTER_BR</code></strong> &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
<li><strong><code>ENTER_DIV</code></strong> &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
</ul>
<p>
The sample code below shows how to configure CKEditor to create a <code>&lt;div&gt;</code> block when <em>Enter</em> key is pressed.
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>enterMode : CKEDITOR.ENTER_DIV</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<div style="float: left; margin-right: 20px">
When <em>Enter</em> is pressed:<br />
<select id="xEnter" onchange="changeEnter();">
<option selected="selected" value="1">Create a new &lt;P&gt; (recommended)</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option value="2">Break the line with a &lt;BR&gt;</option>
</select>
</div>
<div style="float: left">
When <em>Shift+Enter</em> is pressed:<br />
<select id="xShiftEnter" onchange="changeEnter();">
<option value="1">Create a new &lt;P&gt;</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option selected="selected" value="2">Break the line with a &lt;BR&gt; (recommended)</option>
</select>
</div>
<br style="clear: both" />
<form action="sample_posteddata.php" method="post">
<p>
<br />
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full Page Editing with Document Properties Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Full Page Editing with Document Properties Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to edit entire HTML pages, from the
<code>&lt;html&gt;</code> tag to the <code>&lt;/html&gt;</code> tag.
</p>
<p>
The <strong>Document Properties</strong> (<code>docprops</code>) plugin is also turned on.
This plugin allows you to set the metadata of the page, including the page encoding, margins,
meta tags, or background.
</p>
<p>
The CKEditor instance below is inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>fullPage : true,
extraPlugins : 'docprops'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<label for="editor1">
CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
fullPage : true,
extraPlugins : 'docprops'
});
//]]>
</script>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,116 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CKEditor Samples</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link type="text/css" rel="stylesheet" href="sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples Site
</h1>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li>
<a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a><br />
Automatic replacement of all textarea elements of a given class with a CKEditor instance.
</li>
<li><a class="samples" href="replacebycode.html">Replace textarea elements by code</a><br />
Replacement of textarea elements with CKEditor instances by using a JavaScript call.
</li>
<li><a class="samples" href="fullpage.html">Full page support with the Document Properties plugin</a><br />
CKEditor inserted with a JavaScript call and used to edit the whole page from <code>&lt;html&gt;</code> to <code>&lt;/html&gt;</code>.
</li>
</ul>
<h2 class="samples">
Basic Customization
</h2>
<ul class="samples">
<li><a class="samples" href="skins.html">Skins</a><br />
Changing the CKEditor skin by adjusting a single configuration option.
</li>
<li><a class="samples" href="ui_color.html">User Interface color</a><br />
Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.
</li>
<li><a class="samples" href="ui_languages.html">User Interface languages</a><br />
Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.
</li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a><br />
Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.
</li>
<li><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a><br />
Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.
</li>
<li><a class="samples" href="api.html">Basic usage of the API</a><br />
Using the CKEditor JavaScript API to interact with the editor at runtime.
</li>
<li><a class="samples" href="api_dialog.html">Using the JavaScript API to customize dialog windows</a><br />
Using the dialog windows API to customize dialog windows without changing the original editor code.
</li>
<li><a class="samples" href="enterkey.html">Using the "Enter" key in CKEditor</a><br />
Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.
</li>
<li><a class="samples" href="sharedspaces.html">Shared toolbars</a><br />
Displaying multiple editor instances that share the toolbar and/or the elements path.
</li>
<li><a class="samples" href="jqueryadapter.html">jQuery adapter example</a><br />
Using the jQuery adapter to configure CKEditor.
</li>
<li><a class="samples" href="output_xhtml.html">Output XHTML</a><br />
Configuring CKEditor to produce XHTML 1.1 compliant code.
</li>
<li><a class="samples" href="output_html.html">Output HTML</a><br />
Configuring CKEditor to produce legacy HTML 4 code.
</li>
<li><a class="samples" href="output_for_flash.html">Output for Flash</a><br />
Configuring CKEditor to produce HTML code that can be used with Adobe Flash.
</li>
<li><a class="samples" href="readonly.html">Read-only mode</a><br />
Using the readOnly API to block introducing changes to the editor contents.
</li>
</ul>
<h2 class="samples">
Additional plugins
</h2>
<ul class="samples">
<li><a class="samples" href="autogrow.html">AutoGrow plugin</a><br />
Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.
</li>
<li><a class="samples" href="bbcode.html">Output for BBCode</a><br />
Configuring CKEditor to produce BBCode tags instead of HTML.
</li>
<li><a class="samples" href="stylesheetparser.html">Stylesheet Parser plugin</a><br />
Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.
</li>
<li><a class="samples" href="devtools.html">Developer Tools plugin</a><br />
Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.
</li>
<li><a class="samples" href="placeholder.html">Placeholder plugin</a><br />
Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
</li>
<li><a class="samples" href="tableresize.html">TableResize plugin</a><br />
Using the TableResize plugin to enable table column resizing.
</li>
</ul>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Adapter &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="../ckeditor.js"></script>
<script type="text/javascript" src="../adapters/jquery.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
$(function()
{
var config = {
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['UIColor']
]
};
// Initialize the editor.
// Callback function can be passed and executed after full instance creation.
$('.jquery_ckeditor').ckeditor(config);
});
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using jQuery Adapter
</h1>
<div class="description">
<p>
This sample shows how to load CKEditor and configure it using the
<a class="samples" href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter">jQuery adapter</a>.
In this case the jQuery adapter is responsible for transforming a <code>&lt;textarea&gt;</code>
element into a CKEditor instance and setting the configuration of the toolbar.
</p>
<p>
CKEditor instance with custom configuration set in jQuery can be inserted with the
following JavaScript code:
</p>
<pre class="samples">$(function()
{
var config = {
skin:'v2'
};
$('.<em>textarea_class</em>').ckeditor(config);
});</pre>
<p>
Note that <code><em>textarea_class</em></code> in the code above is the
<code>class</code> attribute of the <code>&lt;textarea&gt;</code> element to be replaced with
CKEditor. Any other jQuery selector can be used to match the target element.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML that you will usually find in your
pages. -->
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,275 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Output for Flash &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/swfobject.js"></script>
<script type="text/javascript">
function sendToFlash()
{
var html = CKEDITOR.instances.editor1.getData() ;
var flash = document.getElementById( 'ckFlash' ) ;
flash.setData( html ) ;
}
function init()
{
var so = new SWFObject("assets/output_for_flash.swf", "ckFlash", "550", "400", "8", "#ffffff") ;
so.addParam("wmode", "transparent");
so.write("ckFlashContainer") ;
}
</script>
</head>
<body onload="init()">
<h1 class="samples">
CKEditor Sample &mdash; Producing Flash Compliant HTML Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output
HTML code that can be used with
<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
Adobe Flash</a>.
The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
</p>
<p>
To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
JavaScript call, and define CKEditor features to use HTML elements and attributes.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>
To see how it works, create some content in the editing area of CKEditor on the left
and send it to the Flash object on the right side of the page by using the
<strong>Send to Flash</strong> button.
</p>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<hr />
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%">
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
if ( document.location.protocol == 'file:' )
alert( 'Warning: This samples does not work when loaded from local filesystem due to security restrictions implemented in Flash.' +
'\n\nPlease load the sample from a web server instead.') ;
CKEDITOR.replace( 'editor1',
{
height : 300,
width : '100%',
toolbar : [
['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
'/',
['Font','FontSize'],
['TextColor','-','About']
],
/*
* Style sheet for the contents
*/
contentsCss : 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
/*
* Quirks doctype
*/
docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
/*
* Core styles.
*/
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
coreStyles_underline : { element : 'u'},
/*
* Font face
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style :
{
element : 'font',
attributes : { 'face' : '#(family)' }
},
/*
* Font sizes.
* The CSS part of the font sizes isn't used by Flash, it is there to get the
* font rendered correctly in CKEditor.
*/
fontSize_sizes : '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' },
styles : { 'font-size' : '#(size)px' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : true,
colorButton_foreStyle :
{
element : 'font',
attributes : { 'color' : '#(color)' }
},
colorButton_backStyle :
{
element : 'font',
styles : { 'background-color' : '#(color)' }
},
on : { 'instanceReady' : configureFlashOutput }
});
/*
* Adjust the behavior of the dataProcessor to match the
* requirements of Flash
*/
function configureFlashOutput( ev )
{
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting match Flash expectations
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
dataProcessor.writer.setRules( e,
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
}
dataProcessor.writer.setRules( 'br',
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements :
{
$ : function( element )
{
var style, match, width, height, align;
// Output dimensions of images as width and height
if ( element.name == 'img' )
{
style = element.attributes.style;
if ( style )
{
// Get the width from the style.
match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
height = match && match[1];
if ( width )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' )
{
style = element.attributes.style;
if ( style )
{
// Get the align from the style.
match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );
align = match && match[1];
if ( align )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( element.attributes.style === '' )
delete element.attributes.style;
return element;
}
}
} );
}
//]]>
</script>
<input type="button" value="Send to Flash" onclick="sendToFlash();" />
</td>
<td valign="top" style="padding-left: 15px" id="ckFlashContainer">
</td>
</tr>
</table>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,285 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Compliant Output &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Producing HTML Compliant Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
Traditional HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
</p>
<p>
To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' }
}
// More definitions follow.
});</pre>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
/*
* Style sheet for the contents
*/
contentsCss : 'body {color:#000; background-color#:FFF;}',
/*
* Simple HTML5 doctype
*/
docType : '<!DOCTYPE HTML>',
/*
* Core styles.
*/
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
coreStyles_underline : { element : 'u'},
coreStyles_strike : { element : 'strike' },
/*
* Font face
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style :
{
element : 'font',
attributes : { 'face' : '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : true,
colorButton_foreStyle :
{
element : 'font',
attributes : { 'color' : '#(color)' }
},
colorButton_backStyle :
{
element : 'font',
styles : { 'background-color' : '#(color)' }
},
/*
* Styles combo.
*/
stylesSet :
[
{ name : 'Computer Code', element : 'code' },
{ name : 'Keyboard Phrase', element : 'kbd' },
{ name : 'Sample Text', element : 'samp' },
{ name : 'Variable', element : 'var' },
{ name : 'Deleted Text', element : 'del' },
{ name : 'Inserted Text', element : 'ins' },
{ name : 'Cited Work', element : 'cite' },
{ name : 'Inline Quotation', element : 'q' }
],
on : { 'instanceReady' : configureHtmlOutput }
});
/*
* Adjust the behavior of the dataProcessor to avoid styles
* and make it look like FCKeditor HTML output.
*/
function configureHtmlOutput( ev )
{
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
dataProcessor.writer.setRules( e,
{
indent : true,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : !dtd[ e ][ '#' ],
breakAfterClose : true
});
}
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements :
{
$ : function( element )
{
// Output dimensions of images as width and height
if ( element.name == 'img' )
{
var style = element.attributes.style;
if ( style )
{
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
var height = match && match[1];
if ( width )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' )
{
style = element.attributes.style;
if ( style )
{
// Get the align from the style.
match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
var align = match && match[1];
if ( align )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( !element.attributes.style )
delete element.attributes.style;
return element;
}
},
attributes :
{
style : function( value, element )
{
// Return #RGB for background and border colors
return convertRGBToHex( value );
}
}
} );
}
/**
* Convert a CSS rgb(R, G, B) color back to #RRGGBB format.
* @param Css style string (can include more than one color
* @return Converted css style.
*/
function convertRGBToHex( cssStyle )
{
return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
{
red = parseInt( red, 10 ).toString( 16 );
green = parseInt( green, 10 ).toString( 16 );
blue = parseInt( blue, 10 ).toString( 16 );
var color = [red, green, blue] ;
// Add padding zeros if the hex value is less than 0x10.
for ( var i = 0 ; i < color.length ; i++ )
color[i] = String( '0' + color[i] ).slice( -2 ) ;
return '#' + color.join( '' ) ;
});
}
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Compliant Output &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Producing XHTML Compliant Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
Deprecated elements (<code>&lt;font&gt;</code>, <code>&lt;u&gt;</code>) or attributes
(<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
</p>
<p>
To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
contentsCss : 'assets/output_xhtml.css',
coreStyles_bold : { element : 'span', attributes : {'class': 'Bold'} },
coreStyles_italic : { element : 'span', attributes : {'class': 'Italic'} },
// More definitions follow.
});</pre>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;span class="Bold"&gt;sample text&lt;/span&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
/*
* Style sheet for the contents
*/
contentsCss : 'assets/output_xhtml.css',
/*
* Core styles.
*/
coreStyles_bold : { element : 'span', attributes : {'class': 'Bold'} },
coreStyles_italic : { element : 'span', attributes : {'class': 'Italic'}},
coreStyles_underline : { element : 'span', attributes : {'class': 'Underline'}},
coreStyles_strike : { element : 'span', attributes : {'class': 'StrikeThrough'}, overrides : 'strike' },
coreStyles_subscript : { element : 'span', attributes : {'class': 'Subscript'}, overrides : 'sub' },
coreStyles_superscript : { element : 'span', attributes : {'class': 'Superscript'}, overrides : 'sup' },
/*
* Font face
*/
// List of fonts available in the toolbar combo. Each font definition is
// separated by a semi-colon (;). We are using class names here, so each font
// is defined by {Combo Label}/{Class Name}.
font_names : 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
// Define the way font elements will be applied to the document. The "span"
// element will be used. When a font is selected, the font name defined in the
// above list is passed to this definition with the name "Font", being it
// injected in the "class" attribute.
// We must also instruct the editor to replace span elements that are used to
// set the font (Overrides).
font_style :
{
element : 'span',
attributes : { 'class' : '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes : 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
fontSize_style :
{
element : 'span',
attributes : { 'class' : '#(size)' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : false,
colorButton_colors : 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
colorButton_foreStyle :
{
element : 'span',
attributes : { 'class' : '#(color)' }
},
colorButton_backStyle :
{
element : 'span',
attributes : { 'class' : '#(color)BG' }
},
/*
* Indentation.
*/
indentClasses : ['Indent1', 'Indent2', 'Indent3'],
/*
* Paragraph justification.
*/
justifyClasses : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
/*
* Styles combo.
*/
stylesSet :
[
{ name : 'Strong Emphasis', element : 'strong' },
{ name : 'Emphasis', element : 'em' },
{ name : 'Computer Code', element : 'code' },
{ name : 'Keyboard Phrase', element : 'kbd' },
{ name : 'Sample Text', element : 'samp' },
{ name : 'Variable', element : 'var' },
{ name : 'Deleted Text', element : 'del' },
{ name : 'Inserted Text', element : 'ins' },
{ name : 'Cited Work', element : 'cite' },
{ name : 'Inline Quotation', element : 'q' }
]
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,120 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Setting Configuration Options &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Setting Configuration Options
</h1>
<p>
This sample shows how to insert a CKEditor instance with custom configuration options.
</p>
<p>
To set configuration options, use the <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html"><code>config</code></a> property. To set the attributes of a <code>&lt;textarea&gt;</code> element (which is displayed instead of CKEditor in unsupported browsers), use the <code>textareaAttributes</code> property.
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Set global configuration (used by every instance of CKEditor).
$CKEditor-><strong>config['width']</strong> = 600;
// Change default textarea attributes.
$CKEditor-><strong>textareaAttributes</strong> = array("cols" => 80, "rows" => 10);
// The initial value to be displayed in the editor.
$initialValue = 'This is some sample text.';
// Create the first instance.
$CKEditor->editor("textarea_id", $initialValue);
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>name</code> attribute of
the <code>&lt;textarea&gt;</code> element to be created.
</p>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../sample_posteddata.php" method="post">
<label>Editor 1:</label>
<?php
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Do not print the code directly to the browser, return it instead.
$CKEditor->returnOutput = true;
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Set global configuration (will be used by all instances of CKEditor).
$CKEditor->config['width'] = 600;
// Change default textarea attributes.
$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
// Create the first instance.
$code = $CKEditor->editor("editor1", $initialValue);
echo $code;
?>
<br />
<label>Editor 2:</label>
<?php
// Configuration that will only be used by the second editor.
$config['toolbar'] = array(
array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
array( 'Image', 'Link', 'Unlink', 'Anchor' )
);
$config['skin'] = 'v2';
// Create the second instance.
echo $CKEditor->editor("editor2", $initialValue, $config);
?>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Event Handlers &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Adding Event Handlers
</h1>
<div class="description">
<p>
This sample shows how to add event handlers to CKEditor with PHP.
</p>
<p>
A snippet of the configuration code can be seen below; check the source code of this page for
the full definition:
</p>
<pre class="samples">&lt;?php
// Include the CKEditor class.
include("ckeditor/ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// The initial value to be displayed in the editor.
$initialValue = 'This is some sample text.';
// Add event handler, <em>instanceReady</em> is fired when editor is loaded.
$CKEditor-><strong>addEventHandler</strong>('instanceReady', 'function (evt) {
alert("Loaded editor: " + evt.editor.name);
}');
// Create an editor instance.
$CKEditor->editor("editor1", $initialValue);
</pre>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../sample_posteddata.php" method="post">
<label>Editor 1:</label>
<?php
/**
* Adds a global event, will hide the "Target" tab in the "Link" dialog window in all instances.
*/
function CKEditorHideLinkTargetTab(&$CKEditor) {
$function = 'function (ev) {
// Take the dialog window name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition comes from the "Link" dialog window.
if ( dialogName == "link" )
dialogDefinition.removeContents("target")
}';
$CKEditor->addGlobalEventHandler('dialogDefinition', $function);
}
/**
* Adds a global event, will notify about an open dialog window.
*/
function CKEditorNotifyAboutOpenedDialog(&$CKEditor) {
$function = 'function (evt) {
alert("Loading a dialog window: " + evt.data.name);
}';
$CKEditor->addGlobalEventHandler('dialogDefinition', $function);
}
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Set a configuration option for all editors.
$CKEditor->config['width'] = 750;
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
// Event that will be handled only by the first editor.
$CKEditor->addEventHandler('instanceReady', 'function (evt) {
alert("Loaded editor: " + evt.editor.name);
}');
// Create the first instance.
$CKEditor->editor("editor1", $initialValue);
// Clear event handlers. Instances that will be created later will not have
// the 'instanceReady' listener defined a couple of lines above.
$CKEditor->clearEventHandlers();
?>
<br />
<label>Editor 2:</label>
<?php
// Configuration that will only be used by the second editor.
$config['width'] = '600';
$config['toolbar'] = 'Basic';
// Add some global event handlers (for all editors).
CKEditorHideLinkTargetTab($CKEditor);
CKEditorNotifyAboutOpenedDialog($CKEditor);
// Event that will only be handled by the second editor.
// Instead of calling addEventHandler(), events may be passed as an argument.
$events['instanceReady'] = 'function (evt) {
alert("Loaded second editor: " + evt.editor.name);
}';
// Create the second instance.
$CKEditor->editor("editor2", $initialValue, $config, $events);
?>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>CKEditor Samples &mdash; PHP Integration</title>
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples List for PHP
</h1>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li><a class="samples" href="replace.php">Replace existing textarea elements by code</a><br />
Replacement of selected textarea elements with CKEditor instances by using a JavaScript call.</li>
<li><a class="samples" href="replaceall.php">Replace all textarea elements by code</a><br />
Replacement of all textarea elements with CKEditor instances by using a JavaScript call.</li>
<li><a class="samples" href="standalone.php">Create CKEditor instances in PHP</a><br />
Creating a CKEditor instance (no initial textarea element is required).</li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="advanced.php">Setting configuration options</a><br />
Creating a CKEditor instance with custom configuration options.</li>
<li><a class="samples" href="events.php">Listening to events</a><br />
Creating event handlers.
</li>
</ul>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Selected Textarea Elements &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Selected Textarea Elements Using PHP Code
</h1>
<div class="description">
<p>
This sample shows how to replace a selected <code>&lt;textarea&gt;</code> element
with a CKEditor instance by using PHP code.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
after the <code>&lt;textarea&gt;</code> element:
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Replace a textarea element with an id (or name) of "textarea_id".
$CKEditor->replace("textarea_id");
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<?php
// Include the CKEditor class.
include_once "../../ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Replace a textarea element with an id (or name) of "editor1".
$CKEditor->replace("editor1");
?>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace All Textarea Elements &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace All Textarea Elements Using PHP Code
</h1>
<div class="description">
<p>
This sample shows how to replace all <code>&lt;textarea&gt;</code> elements
with CKEditor by using PHP code.
</p>
<p>
To replace all <code>&lt;textarea&gt;</code> elements, place the following call at any point
after the last <code>&lt;textarea&gt;</code> element:
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include("ckeditor/ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Replace all textarea elements with CKEditor.
$CKEditor->replaceAll();
?&gt;</pre>
</div>
<!-- This <div> holds alert messages to be displayed in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<?php
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Replace all textarea elements with CKEditor.
$CKEditor->replaceAll();
?>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creating CKEditor Instances &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Creating CKEditor Instances
</h1>
<div class="description">
<p>
This sample shows how to create a CKEditor instance with PHP.
</p>
<pre class="samples">
&lt;?php
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Create a textarea element and attach CKEditor to it.
$CKEditor->editor("textarea_id", "This is some sample text");
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> and <code>name</code> attribute of
the <code>&lt;textarea&gt;</code> element that will be created.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<!-- This <fieldset> holds the HTML code that you will usually find in your pages. -->
<form action="../sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
</p>
<p>
<?php
// Include the CKEditor class.
include_once "../../ckeditor.php";
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>.</p>';
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Create a textarea element and attach CKEditor to it.
$CKEditor->editor("editor1", $initialValue);
?>
<input type="submit" value="Submit"/>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Placeholder Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Placeholder Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Placeholder</strong> plugin that lets you insert read-only elements
into your content. To enter and modify read-only text, use the
<strong>Create Placeholder</strong> button and its matching dialog window.
</p>
<p>
To add a CKEditor instance that uses the <code>placeholder</code> plugin and a related
<strong>Create Placeholder</strong> toolbar button, insert the following JavaScript
call to your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'placeholder',</strong>
toolbar : [ [ 'Source', 'Bold' ], [<strong>'CreatePlaceholder'</strong>] ]
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>placeholder</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1', {
extraPlugins : 'placeholder',
toolbar : [ [ 'Source', 'CreatePlaceholder' ] ]
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,91 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Read-only State &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
editor = ev.editor;
// Show this "on" button.
document.getElementById( 'readOnlyOn' ).style.display = '';
// Event fired when the readOnly property changes.
editor.on( 'readOnly', function()
{
document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
});
});
function toggleReadOnly( isReadOnly )
{
// Change the read-only state of the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
editor.setReadOnly( isReadOnly );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the CKEditor Read-Only API
</h1>
<div class="description">
<p>
This sample shows how to use the
<code><a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly">setReadOnly</a></code>
API to put editor into the read-only state that makes it impossible for users to change the editor contents.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none" />
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Textarea Elements by Class Name
</h1>
<div class="description">
<p>
This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
of a given class with a CKEditor instance.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, simply assign it the <code>ckeditor</code>
class, as in the code below:
</p>
<pre class="samples">&lt;textarea <strong>class="ckeditor</strong>" name="editor1"&gt;&lt;/textarea&gt;</pre>
<p>
Note that other <code>&lt;textarea&gt;</code> attributes (like <code>id</code> or <code>name</code>) need to be adjusted to your document.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textarea by Code &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Textarea Elements Using JavaScript Code
</h1>
<div class="description">
<p>
This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
with a CKEditor instance by using a JavaScript call.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
after the <code>&lt;textarea&gt;</code> element or inside a <code>&lt;script&gt;</code> element located
in the <code>&lt;head&gt;</code> section of the page, in a <code>window.onload</code> event handler:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>' );</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
//]]>
</script>
</p>
<p>
<label for="editor2">
Editor 2:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2' );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,163 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre {
line-height: 1.5em;
}
body {
padding:10px 30px;
}
input, textarea, select, option, optgroup, button, td, th {
font-size: 100%;
}
pre,
code,
kbd,
samp,
tt{
font-family: monospace,monospace;
font-size: 1em;
}
h1.samples {
color:#0782C1;
font-size:200%;
font-weight:normal;
margin: 0;
padding: 0;
}
h2.samples {
color:#000000;
font-size:130%;
margin: 0;
padding: 0;
}
p, blockquote, address, form, pre, dl, h1.samples, h2.samples {
margin-bottom:15px;
}
ul.samples {
margin-bottom:15px;
}
.clear {
clear:both;
}
fieldset
{
margin: 0;
padding: 10px;
}
body, input, textarea {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 75%;
}
a.samples {
color:#189DE1;
text-decoration:none;
}
a.samples:hover {
text-decoration:underline;
}
form
{
margin: 0;
padding: 0;
}
pre.samples
{
background-color: #F7F7F7;
border: 1px solid #D7D7D7;
overflow: auto;
padding: 0.25em;
}
#alerts
{
color: Red;
}
#footer hr
{
margin: 10px 0 15px 0;
height: 1px;
border: solid 1px gray;
border-bottom: none;
}
#footer p
{
margin: 0 10px 10px 10px;
float: left;
}
#footer #copy
{
float: right;
}
#outputSample
{
width: 100%;
table-layout: fixed;
}
#outputSample thead th
{
color: #dddddd;
background-color: #999999;
padding: 4px;
white-space: nowrap;
}
#outputSample tbody th
{
vertical-align: top;
text-align: left;
}
#outputSample pre
{
margin: 0;
padding: 0;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla*/
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
.description {
border: 1px dotted #B7B7B7;
margin-bottom: 10px;
padding: 10px 10px 0;
}
label {
display: block;
margin-bottom:6px;
}
.cke_dialog label
{
display: inline;
margin-bottom: auto;
}

View File

@@ -0,0 +1,65 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
// This file is not required by CKEditor and may be safely ignored.
// It is just a helper file that displays a red message about browser compatibility
// at the top of the samples (if incompatible browser is detected).
if ( window.CKEDITOR )
{
(function()
{
var showCompatibilityMsg = function()
{
var env = CKEDITOR.env;
var html = '<p><strong>Your browser is not compatible with CKEditor.</strong>';
var browsers =
{
gecko : 'Firefox 2.0',
ie : 'Internet Explorer 6.0',
opera : 'Opera 9.5',
webkit : 'Safari 3.0'
};
var alsoBrowsers = '';
for ( var key in env )
{
if ( browsers[ key ] )
{
if ( env[key] )
html += ' CKEditor is compatible with ' + browsers[ key ] + ' or higher.';
else
alsoBrowsers += browsers[ key ] + '+, ';
}
}
alsoBrowsers = alsoBrowsers.replace( /\+,([^,]+), $/, '+ and $1' );
html += ' It is also compatible with ' + alsoBrowsers + '.';
html += '</p><p>With non compatible browsers, you should still be able to see and edit the contents (HTML) in a plain text field.</p>';
var alertsEl = document.getElementById( 'alerts' );
alertsEl && ( alertsEl.innerHTML = html );
};
var onload = function()
{
// Show a friendly compatibility message as soon as the page is loaded,
// for those browsers that are not compatible with CKEditor.
if ( !CKEDITOR.env.isCompatible )
showCompatibilityMsg();
};
// Register the onload listener.
if ( window.addEventListener )
window.addEventListener( 'load', onload, false );
else if ( window.attachEvent )
window.attachEvent( 'onload', onload );
})();
}

View File

@@ -0,0 +1,21 @@
<?php /*
-------------------------------------------------------------------------------------------
CKEditor - Posted Data
We are sorry, but your Web server does not support the PHP language used in this script.
Please note that CKEditor can be used with any other server-side language than just PHP.
To save the content created with CKEditor you need to read the POST data on the server
side and write it to a file or a database.
Copyright 2003-2011, CKSource - Frederico Knabben.
All rights reserved.
-------------------------------------------------------------------------------------------
*/ include "assets/_posteddata.php"; ?>

View File

@@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shared Toolbars &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<style id="styles" type="text/css">
#editorsForm
{
height: 400px;
overflow: auto;
border: solid 1px #555;
margin: 10px 0;
padding: 0 10px;
}
</style>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Shared Toolbars
</h1>
<div class="description">
<p>
This sample shows how to configure multiple CKEditor instances to share some parts of the interface.
You can choose to share the toolbar (<code>topSpace</code>), the elements path
(<code>bottomSpace</code>), or both.
</p>
<p>
CKEditor instances with shared spaces can be inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
}</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<div id="topSpace">
</div>
<form action="sample_posteddata.php" id="editorsForm" method="post">
<p>
<label for="editor1">
Editor 1 (uses the shared toolbar and elements path):</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2 (uses the shared toolbar and elements path):</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor3">
Editor 3 (uses the shared toolbar only):</label>
<textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor4">
Editor 4 (no shared spaces):</label>
<textarea cols="80" id="editor4" name="editor4" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="bottomSpace">
</div>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<script type="text/javascript">
//<![CDATA[
// Create all editor instances at the end of the page, so we are sure
// that the "bottomSpace" div is available in the DOM (IE issue).
CKEDITOR.replace( 'editor1',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor2',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor3',
{
sharedSpaces :
{
top : 'topSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
removePlugins : 'maximize'
} );
CKEDITOR.replace( 'editor4' );
//]]>
</script>
</body>
</html>

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skins &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Skins
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance using a specific <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.skin">skin</a>.
</p>
<p>
CKEditor with a specified skin (in this case, the "Office 2003" skin) is inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'office2003'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<h2 class="samples">&quot;Kama&quot; skin</h2>
<p>The default skin used in CKEditor. No additional configuration is required.</p>
<p>
<textarea cols="80" id="editor_kama" name="editor_kama" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_kama',
{
skin : 'kama'
});
//]]>
</script>
</p>
<h2 class="samples">&quot;Office 2003&quot; skin</h2>
<p>Use the following code to configure a CKEditor instance to use the "Office 2003" skin.</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'office2003'</strong>
});</pre>
<p>
<textarea cols="80" id="editor_office2003" name="editor_office2003" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_office2003',
{
skin : 'office2003'
});
//]]>
</script>
</p>
<h2 class="samples">&quot;V2&quot; skin</h2>
<p>Use the following code to configure a CKEditor instance to use the "V2" skin.</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'v2'</strong>
});</pre>
<textarea cols="80" id="editor_v2" name="editor_v2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_v2',
{
skin : 'v2'
});
//]]>
</script>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Stylesheet Parser Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Stylesheet Parser Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Stylesheet Parser</strong> (<code>stylesheetparser</code>) plugin that fills
the <strong>Styles</strong> drop-down list based on the CSS rules available in the document stylesheet.
</p>
<p>
To add a CKEditor instance using the <code>stylesheetparser</code> plugin, insert
the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'stylesheetparser'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>stylesheetparser</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' ,
{
extraPlugins : 'stylesheetparser',
/*
* Stylesheet for the contents.
*/
contentsCss : 'assets/parsesample.css',
/*
* Do not load the default Styles configuration.
*/
stylesSet : []
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using TableResize Plugin &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the TableResize Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>TableResize</strong> (<code>tableresize</code>) plugin that allows
the user to edit table columns by using the mouse.
</p>
<p>
The TableResize plugin makes it possible to modify table column width. Hover
your mouse over the column border to see the cursor change to indicate that
the column can be resized. Click and drag your mouse to set the desired width.
</p>
<p>
By default the plugin is turned off. To add a CKEditor instance using the
TableResize plugin, insert the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'tableresize'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>tableresize</code> plugin:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">
&lt;table style="width: 500px;"&gt;
&lt;caption&gt;
A sample table&lt;/caption&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
Column 1&lt;/td&gt;
&lt;td&gt;
Column 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
You can resize a table column.&lt;/td&gt;
&lt;td&gt;
Hover your mouse over its border.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
Watch the cursor change.&lt;/td&gt;
&lt;td&gt;
Now click and drag to resize.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1', {
extraPlugins : 'tableresize'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,129 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UI Color Picker &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; UI Color Picker
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance with an option to change the color of its user interface.
</p>
<h2 class="samples">Setting the User Interface Color</h2>
<p>
To specify the color of the user interface, set the <code>uiColor</code> property:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>uiColor: '#EE0000'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
<h2 class="samples">Enabling the Color Picker</h2>
<p>
If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>
toolbar button is added to CKEditor, the user will also be able to pick the color of the
UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.
</p>
<p>
To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,
use the following JavaScript call:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'uicolor',</strong>
toolbar : [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
});</pre>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<p>
Click the <strong>UI Color Picker</strong> button to test your color preferences at runtime.
</p>
<p>
The first editor instance includes the <strong>UI Color Picker</strong> toolbar button,
but the default UI color is not defined, so the editor uses the skin color.
</p>
<form action="sample_posteddata.php" method="post">
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'uicolor',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
//]]>
</script>
</p>
<p>
The second editor instance includes the <strong>UI Color Picker</strong> toolbar button. The
default UI color was defined, so the skin color is not used.
</p>
<p>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
} );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,134 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Interface Globalization &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script type="text/javascript" src="../lang/_languages.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; User Interface Languages
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance with an option to change the language of its user interface.
</p>
<p>
It pulls the language list from CKEditor <code>_languages.js</code> file that contains the list of supported languages and creates
a drop-down list that lets the user change the UI language.
</p>
<p>
By default, CKEditor automatically localizes the editor to the language of the user.
The UI language can be controlled with two configuration options:
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.language">
<code>language</code></a> and <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.defaultLanguage">
<code>defaultLanguage</code></a>. The <code>defaultLanguage</code> setting specifies the
default CKEditor language to be used when a localization suitable for user's settings is not available.
</p>
<p>
To specify the user interface language that will be used no matter what language is
specified in user's browser or operating system, set the <code>language</code> property:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
// Load the German interface.
<strong>language: 'de'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="sample_posteddata.php" method="post">
<p>
Available languages (<span id="count"> </span> languages!):<br />
<script type="text/javascript">
//<![CDATA[
document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
// Get the language list from the _languages.js file.
for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ )
{
document.write(
'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
window.CKEDITOR_LANGS[i].name +
'</option>' );
}
document.write( '</select>' );
//]]>
</script>
<br />
<span style="color: #888888">(You may see strange characters if your system does not
support the selected language)</span>
</p>
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Set the number of languages.
document.getElementById( 'count' ).innerHTML = window.CKEDITOR_LANGS.length;
var editor;
function createEditor( languageCode )
{
if ( editor )
editor.destroy();
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
editor = CKEDITOR.replace( 'editor1',
{
language : languageCode,
on :
{
instanceReady : function()
{
// Wait for the editor to be ready to set
// the language combo.
var languages = document.getElementById( 'languages' );
languages.value = this.langCode;
languages.disabled = false;
}
}
} );
}
// At page startup, load the default language:
createEditor( '' );
//]]>
</script>
</p>
</form>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,306 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview jQuery adapter provides easy use of basic CKEditor functions
* and access to internal API. It also integrates some aspects of CKEditor with
* jQuery framework.
*
* Every TEXTAREA, DIV and P elements can be converted to working editor.
*
* Plugin exposes some of editor's event to jQuery event system. All of those are namespaces inside
* ".ckeditor" namespace and can be binded/listened on supported textarea, div and p nodes.
*
* Available jQuery events:
* - instanceReady.ckeditor( editor, rootNode )
* Triggered when new instance is ready.
* - destroy.ckeditor( editor )
* Triggered when instance is destroyed.
* - getData.ckeditor( editor, eventData )
* Triggered when getData event is fired inside editor. It can change returned data using eventData reference.
* - setData.ckeditor( editor )
* Triggered when getData event is fired inside editor.
*
* @example
* <script src="jquery.js"></script>
* <script src="ckeditor.js"></script>
* <script src="adapters/jquery/adapter.js"></script>
*/
(function()
{
/**
* Allows CKEditor to override jQuery.fn.val(), making it possible to use the val()
* function on textareas, as usual, having it synchronized with CKEditor.<br>
* <br>
* This configuration option is global and executed during the jQuery Adapter loading.
* It can't be customized across editor instances.
* @type Boolean
* @example
* &lt;script&gt;
* CKEDITOR.config.jqueryOverrideVal = true;
* &lt;/script&gt;
* &lt;!-- Important: The JQuery adapter is loaded *after* setting jqueryOverrideVal --&gt;
* &lt;script src="/ckeditor/adapters/jquery.js"&gt;&lt;/script&gt;
* @example
* // ... then later in the code ...
*
* $( 'textarea' ).ckeditor();
* // ...
* $( 'textarea' ).val( 'New content' );
*/
CKEDITOR.config.jqueryOverrideVal = typeof CKEDITOR.config.jqueryOverrideVal == 'undefined'
? true : CKEDITOR.config.jqueryOverrideVal;
var jQuery = window.jQuery;
if ( typeof jQuery == 'undefined' )
return;
// jQuery object methods.
jQuery.extend( jQuery.fn,
/** @lends jQuery.fn */
{
/**
* Return existing CKEditor instance for first matched element.
* Allows to easily use internal API. Doesn't return jQuery object.
*
* Raised exception if editor doesn't exist or isn't ready yet.
*
* @name jQuery.ckeditorGet
* @return CKEDITOR.editor
* @see CKEDITOR.editor
*/
ckeditorGet: function()
{
var instance = this.eq( 0 ).data( 'ckeditorInstance' );
if ( !instance )
throw "CKEditor not yet initialized, use ckeditor() with callback.";
return instance;
},
/**
* Triggers creation of CKEditor in all matched elements (reduced to DIV, P and TEXTAREAs).
* Binds callback to instanceReady event of all instances. If editor is already created, than
* callback is fired right away.
*
* Mixed parameter order allowed.
*
* @param callback Function to be run on editor instance. Passed parameters: [ textarea ].
* Callback is fiered in "this" scope being ckeditor instance and having source textarea as first param.
*
* @param config Configuration options for new instance(s) if not already created.
* See URL
*
* @example
* $( 'textarea' ).ckeditor( function( textarea ) {
* $( textarea ).val( this.getData() )
* } );
*
* @name jQuery.fn.ckeditor
* @return jQuery.fn
*/
ckeditor: function( callback, config )
{
if ( !CKEDITOR.env.isCompatible )
return this;
if ( !jQuery.isFunction( callback ))
{
var tmp = config;
config = callback;
callback = tmp;
}
config = config || {};
this.filter( 'textarea, div, p' ).each( function()
{
var $element = jQuery( this ),
editor = $element.data( 'ckeditorInstance' ),
instanceLock = $element.data( '_ckeditorInstanceLock' ),
element = this;
if ( editor && !instanceLock )
{
if ( callback )
callback.apply( editor, [ this ] );
}
else if ( !instanceLock )
{
// CREATE NEW INSTANCE
// Handle config.autoUpdateElement inside this plugin if desired.
if ( config.autoUpdateElement
|| ( typeof config.autoUpdateElement == 'undefined' && CKEDITOR.config.autoUpdateElement ) )
{
config.autoUpdateElementJquery = true;
}
// Always disable config.autoUpdateElement.
config.autoUpdateElement = false;
$element.data( '_ckeditorInstanceLock', true );
// Set instance reference in element's data.
editor = CKEDITOR.replace( element, config );
$element.data( 'ckeditorInstance', editor );
// Register callback.
editor.on( 'instanceReady', function( event )
{
var editor = event.editor;
setTimeout( function()
{
// Delay bit more if editor is still not ready.
if ( !editor.element )
{
setTimeout( arguments.callee, 100 );
return;
}
// Remove this listener.
event.removeListener( 'instanceReady', this.callee );
// Forward setData on dataReady.
editor.on( 'dataReady', function()
{
$element.trigger( 'setData' + '.ckeditor', [ editor ] );
});
// Forward getData.
editor.on( 'getData', function( event ) {
$element.trigger( 'getData' + '.ckeditor', [ editor, event.data ] );
}, 999 );
// Forward destroy event.
editor.on( 'destroy', function()
{
$element.trigger( 'destroy.ckeditor', [ editor ] );
});
// Integrate with form submit.
if ( editor.config.autoUpdateElementJquery && $element.is( 'textarea' ) && $element.parents( 'form' ).length )
{
var onSubmit = function()
{
$element.ckeditor( function()
{
editor.updateElement();
});
};
// Bind to submit event.
$element.parents( 'form' ).submit( onSubmit );
// Bind to form-pre-serialize from jQuery Forms plugin.
$element.parents( 'form' ).bind( 'form-pre-serialize', onSubmit );
// Unbind when editor destroyed.
$element.bind( 'destroy.ckeditor', function()
{
$element.parents( 'form' ).unbind( 'submit', onSubmit );
$element.parents( 'form' ).unbind( 'form-pre-serialize', onSubmit );
});
}
// Garbage collect on destroy.
editor.on( 'destroy', function()
{
$element.data( 'ckeditorInstance', null );
});
// Remove lock.
$element.data( '_ckeditorInstanceLock', null );
// Fire instanceReady event.
$element.trigger( 'instanceReady.ckeditor', [ editor ] );
// Run given (first) code.
if ( callback )
callback.apply( editor, [ element ] );
}, 0 );
}, null, null, 9999);
}
else
{
// Editor is already during creation process, bind our code to the event.
CKEDITOR.on( 'instanceReady', function( event )
{
var editor = event.editor;
setTimeout( function()
{
// Delay bit more if editor is still not ready.
if ( !editor.element )
{
setTimeout( arguments.callee, 100 );
return;
}
if ( editor.element.$ == element )
{
// Run given code.
if ( callback )
callback.apply( editor, [ element ] );
}
}, 0 );
}, null, null, 9999);
}
});
return this;
}
});
// New val() method for objects.
if ( CKEDITOR.config.jqueryOverrideVal )
{
jQuery.fn.val = CKEDITOR.tools.override( jQuery.fn.val, function( oldValMethod )
{
/**
* CKEditor-aware val() method.
*
* Acts same as original jQuery val(), but for textareas which have CKEditor instances binded to them, method
* returns editor's content. It also works for settings values.
*
* @param oldValMethod
* @name jQuery.fn.val
*/
return function( newValue, forceNative )
{
var isSetter = typeof newValue != 'undefined',
result;
this.each( function()
{
var $this = jQuery( this ),
editor = $this.data( 'ckeditorInstance' );
if ( !forceNative && $this.is( 'textarea' ) && editor )
{
if ( isSetter )
editor.setData( newValue );
else
{
result = editor.getData();
// break;
return null;
}
}
else
{
if ( isSetter )
oldValMethod.call( $this, newValue );
else
{
result = oldValMethod.call( $this );
// break;
return null;
}
}
return true;
});
return isSetter ? this : result;
};
});
}
})();

View File

@@ -0,0 +1,87 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview API initialization code.
*/
(function()
{
// Disable HC detaction in WebKit. (#5429)
if ( CKEDITOR.env.webkit )
{
CKEDITOR.env.hc = false;
return;
}
// Check whether high contrast is active by creating a colored border.
var hcDetect = CKEDITOR.dom.element.createFromHtml(
'<div style="width:0px;height:0px;position:absolute;left:-10000px;' +
'border: 1px solid;border-color: red blue;"></div>', CKEDITOR.document );
hcDetect.appendTo( CKEDITOR.document.getHead() );
// Update CKEDITOR.env.
// Catch exception needed sometimes for FF. (#4230)
try
{
CKEDITOR.env.hc = hcDetect.getComputedStyle( 'border-top-color' ) == hcDetect.getComputedStyle( 'border-right-color' );
}
catch (e)
{
CKEDITOR.env.hc = false;
}
if ( CKEDITOR.env.hc )
CKEDITOR.env.cssClass += ' cke_hc';
hcDetect.remove();
})();
// Load core plugins.
CKEDITOR.plugins.load( CKEDITOR.config.corePlugins.split( ',' ), function()
{
CKEDITOR.status = 'loaded';
CKEDITOR.fire( 'loaded' );
// Process all instances created by the "basic" implementation.
var pending = CKEDITOR._.pending;
if ( pending )
{
delete CKEDITOR._.pending;
for ( var i = 0 ; i < pending.length ; i++ )
CKEDITOR.add( pending[ i ] );
}
});
// Needed for IE6 to not request image (HTTP 200 or 304) for every CSS background. (#6187)
if ( CKEDITOR.env.ie )
{
// Remove IE mouse flickering on IE6 because of background images.
try
{
document.execCommand( 'BackgroundImageCache', false, true );
}
catch (e)
{
// We have been reported about loading problems caused by the above
// line. For safety, let's just ignore errors.
}
}
/**
* Indicates that CKEditor is running on a High Contrast environment.
* @name CKEDITOR.env.hc
* @example
* if ( CKEDITOR.env.hc )
* alert( 'You're running on High Contrast mode. The editor interface will get adapted to provide you a better experience.' );
*/
/**
* Fired when a CKEDITOR core object is fully loaded and ready for interaction.
* @name CKEDITOR#loaded
* @event
*/

View File

@@ -0,0 +1,141 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Contains the third and last part of the {@link CKEDITOR} object
* definition.
*/
// Remove the CKEDITOR.loadFullCore reference defined on ckeditor_basic.
delete CKEDITOR.loadFullCore;
/**
* Holds references to all editor instances created. The name of the properties
* in this object correspond to instance names, and their values contains the
* {@link CKEDITOR.editor} object representing them.
* @type {Object}
* @example
* alert( <b>CKEDITOR.instances</b>.editor1.name ); // "editor1"
*/
CKEDITOR.instances = {};
/**
* The document of the window holding the CKEDITOR object.
* @type {CKEDITOR.dom.document}
* @example
* alert( <b>CKEDITOR.document</b>.getBody().getName() ); // "body"
*/
CKEDITOR.document = new CKEDITOR.dom.document( document );
/**
* Adds an editor instance to the global {@link CKEDITOR} object. This function
* is available for internal use mainly.
* @param {CKEDITOR.editor} editor The editor instance to be added.
* @example
*/
CKEDITOR.add = function( editor )
{
CKEDITOR.instances[ editor.name ] = editor;
editor.on( 'focus', function()
{
if ( CKEDITOR.currentInstance != editor )
{
CKEDITOR.currentInstance = editor;
CKEDITOR.fire( 'currentInstance' );
}
});
editor.on( 'blur', function()
{
if ( CKEDITOR.currentInstance == editor )
{
CKEDITOR.currentInstance = null;
CKEDITOR.fire( 'currentInstance' );
}
});
};
/**
* Removes an editor instance from the global {@link CKEDITOR} object. This function
* is available for internal use only. External code must use {@link CKEDITOR.editor.prototype.destroy}
* to avoid memory leaks.
* @param {CKEDITOR.editor} editor The editor instance to be removed.
* @example
*/
CKEDITOR.remove = function( editor )
{
delete CKEDITOR.instances[ editor.name ];
};
/**
* Perform global clean up to free as much memory as possible
* when there are no instances left
*/
CKEDITOR.on( 'instanceDestroyed', function ()
{
if ( CKEDITOR.tools.isEmpty( this.instances ) )
CKEDITOR.fire( 'reset' );
});
// Load the bootstrap script.
CKEDITOR.loader.load( 'core/_bootstrap' ); // @Packager.RemoveLine
// Tri-state constants.
/**
* Used to indicate the ON or ACTIVE state.
* @constant
* @example
*/
CKEDITOR.TRISTATE_ON = 1;
/**
* Used to indicate the OFF or NON ACTIVE state.
* @constant
* @example
*/
CKEDITOR.TRISTATE_OFF = 2;
/**
* Used to indicate DISABLED state.
* @constant
* @example
*/
CKEDITOR.TRISTATE_DISABLED = 0;
/**
* The editor which is currently active (have user focus).
* @name CKEDITOR.currentInstance
* @type CKEDITOR.editor
* @see CKEDITOR#currentInstance
* @example
* function showCurrentEditorName()
* {
* if ( CKEDITOR.currentInstance )
* alert( CKEDITOR.currentInstance.name );
* else
* alert( 'Please focus an editor first.' );
* }
*/
/**
* Fired when the CKEDITOR.currentInstance object reference changes. This may
* happen when setting the focus on different editor instances in the page.
* @name CKEDITOR#currentInstance
* @event
* var editor; // Variable to hold a reference to the current editor.
* CKEDITOR.on( 'currentInstance' , function( e )
* {
* editor = CKEDITOR.currentInstance;
* });
*/
/**
* Fired when the last instance has been destroyed. This event is used to perform
* global memory clean up.
* @name CKEDITOR#reset
* @event
*/

View File

@@ -0,0 +1,227 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Contains the first and essential part of the {@link CKEDITOR}
* object definition.
*/
// #### Compressed Code
// Must be updated on changes in the script as well as updated in the
// ckeditor_source.js and ckeditor_basic_source.js files.
// if(!window.CKEDITOR)window.CKEDITOR=(function(){var a={timestamp:'',version:'3.6.2',rev:'7275',_:{},status:'unloaded',basePath:(function(){var d=window.CKEDITOR_BASEPATH||'';if(!d){var e=document.getElementsByTagName('script');for(var f=0;f<e.length;f++){var g=e[f].src.match(/(^|.*[\\\/])ckeditor(?:_basic)?(?:_source)?.js(?:\?.*)?$/i);if(g){d=g[1];break;}}}if(d.indexOf(':/')==-1)if(d.indexOf('/')===0)d=location.href.match(/^.*?:\/\/[^\/]*/)[0]+d;else d=location.href.match(/^[^\?]*\/(?:)/)[0]+d;return d;})(),getUrl:function(d){if(d.indexOf(':/')==-1&&d.indexOf('/')!==0)d=this.basePath+d;if(this.timestamp&&d.charAt(d.length-1)!='/')d+=(d.indexOf('?')>=0?'&':'?')+('t=')+this.timestamp;return d;}},b=window.CKEDITOR_GETURL;if(b){var c=a.getUrl;a.getUrl=function(d){return b.call(a,d)||c.call(a,d);};}return a;})();
// #### Raw code
// ATTENTION: read the above "Compressed Code" notes when changing this code.
/* @Packager.RemoveLine
// Avoid having the editor code initialized twice. (#7588)
// Use CKEDITOR.dom to check whether the full ckeditor.js code has been loaded
// or just ckeditor_basic.js.
// Remove these lines when compressing manually.
if ( window.CKEDITOR && window.CKEDITOR.dom )
return;
@Packager.RemoveLine */
if ( !window.CKEDITOR )
{
/**
* @name CKEDITOR
* @namespace This is the API entry point. The entire CKEditor code runs under this object.
* @example
*/
window.CKEDITOR = (function()
{
var CKEDITOR =
/** @lends CKEDITOR */
{
/**
* A constant string unique for each release of CKEditor. Its value
* is used, by default, to build the URL for all resources loaded
* by the editor code, guaranteeing clean cache results when
* upgrading.
* @type String
* @example
* alert( CKEDITOR.timestamp ); // e.g. '87dm'
*/
// The production implementation contains a fixed timestamp, unique
// for each release and generated by the releaser.
// (Base 36 value of each component of YYMMDDHH - 4 chars total - e.g. 87bm == 08071122)
timestamp : 'B8DJ5M3',
/**
* Contains the CKEditor version number.
* @type String
* @example
* alert( CKEDITOR.version ); // e.g. 'CKEditor 3.4.1'
*/
version : '3.6.2',
/**
* Contains the CKEditor revision number.
* The revision number is incremented automatically, following each
* modification to the CKEditor source code.
* @type String
* @example
* alert( CKEDITOR.revision ); // e.g. '3975'
*/
revision : '7275',
/**
* Private object used to hold core stuff. It should not be used outside of
* the API code as properties defined here may change at any time
* without notice.
* @private
*/
_ : {},
/**
* Indicates the API loading status. The following statuses are available:
* <ul>
* <li><b>unloaded</b>: the API is not yet loaded.</li>
* <li><b>basic_loaded</b>: the basic API features are available.</li>
* <li><b>basic_ready</b>: the basic API is ready to load the full core code.</li>
* <li><b>loading</b>: the full API is being loaded.</li>
* <li><b>loaded</b>: the API can be fully used.</li>
* </ul>
* @type String
* @example
* if ( <b>CKEDITOR.status</b> == 'loaded' )
* {
* // The API can now be fully used.
* }
*/
status : 'unloaded',
/**
* Contains the full URL for the CKEditor installation directory.
* It is possible to manually provide the base path by setting a
* global variable named CKEDITOR_BASEPATH. This global variable
* must be set <strong>before</strong> the editor script loading.
* @type String
* @example
* alert( <b>CKEDITOR.basePath</b> ); // "http://www.example.com/ckeditor/" (e.g.)
*/
basePath : (function()
{
// ATTENTION: fixes to this code must be ported to
// var basePath in "core/loader.js".
// Find out the editor directory path, based on its <script> tag.
var path = window.CKEDITOR_BASEPATH || '';
if ( !path )
{
var scripts = document.getElementsByTagName( 'script' );
for ( var i = 0 ; i < scripts.length ; i++ )
{
var match = scripts[i].src.match( /(^|.*[\\\/])ckeditor(?:_basic)?(?:_source)?.js(?:\?.*)?$/i );
if ( match )
{
path = match[1];
break;
}
}
}
// In IE (only) the script.src string is the raw value entered in the
// HTML source. Other browsers return the full resolved URL instead.
if ( path.indexOf(':/') == -1 )
{
// Absolute path.
if ( path.indexOf( '/' ) === 0 )
path = location.href.match( /^.*?:\/\/[^\/]*/ )[0] + path;
// Relative path.
else
path = location.href.match( /^[^\?]*\/(?:)/ )[0] + path;
}
if ( !path )
throw 'The CKEditor installation path could not be automatically detected. Please set the global variable "CKEDITOR_BASEPATH" before creating editor instances.';
return path;
})(),
/**
* Gets the full URL for CKEditor resources. By default, URLs
* returned by this function contain a querystring parameter ("t")
* set to the {@link CKEDITOR.timestamp} value.<br />
* <br />
* It is possible to provide a custom implementation of this
* function by setting a global variable named CKEDITOR_GETURL.
* This global variable must be set <strong>before</strong> the editor script
* loading. If the custom implementation returns nothing (==null), the
* default implementation is used.
* @param {String} resource The resource whose full URL we want to get.
* It may be a full, absolute, or relative URL.
* @returns {String} The full URL.
* @example
* // e.g. http://www.example.com/ckeditor/skins/default/editor.css?t=87dm
* alert( CKEDITOR.getUrl( 'skins/default/editor.css' ) );
* @example
* // e.g. http://www.example.com/skins/default/editor.css?t=87dm
* alert( CKEDITOR.getUrl( '/skins/default/editor.css' ) );
* @example
* // e.g. http://www.somesite.com/skins/default/editor.css?t=87dm
* alert( CKEDITOR.getUrl( 'http://www.somesite.com/skins/default/editor.css' ) );
*/
getUrl : function( resource )
{
// If this is not a full or absolute path.
if ( resource.indexOf(':/') == -1 && resource.indexOf( '/' ) !== 0 )
resource = this.basePath + resource;
// Add the timestamp, except for directories.
if ( this.timestamp && resource.charAt( resource.length - 1 ) != '/' && !(/[&?]t=/).test( resource ) )
resource += ( resource.indexOf( '?' ) >= 0 ? '&' : '?' ) + 't=' + this.timestamp;
return resource;
}
};
// Make it possible to override the getUrl function with a custom
// implementation pointing to a global named CKEDITOR_GETURL.
var newGetUrl = window.CKEDITOR_GETURL;
if ( newGetUrl )
{
var originalGetUrl = CKEDITOR.getUrl;
CKEDITOR.getUrl = function ( resource )
{
return newGetUrl.call( CKEDITOR, resource ) ||
originalGetUrl.call( CKEDITOR, resource );
};
}
return CKEDITOR;
})();
}
/**
* Function called upon loading a custom configuration file that can
* modify the editor instance configuration ({@link CKEDITOR.editor#config }).
* It is usually defined inside the custom configuration files that can
* include developer defined settings.
* @name CKEDITOR.editorConfig
* @function
* @param {CKEDITOR.config} config A configuration object containing the
* settings defined for a {@link CKEDITOR.editor} instance up to this
* function call. Note that not all settings may still be available. See
* <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations#Configuration_Loading_Order">Configuration Loading Order</a>
* for details.
* @example
* // This is supposed to be placed in the config.js file.
* CKEDITOR.editorConfig = function( config )
* {
* // Define changes to default configuration here. For example:
* config.language = 'fr';
* config.uiColor = '#AADC6E';
* };
*/
// PACKAGER_RENAME( CKEDITOR )

View File

@@ -0,0 +1,238 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Contains the second part of the {@link CKEDITOR} object
* definition, which defines the basic editor features to be available in
* the root ckeditor_basic.js file.
*/
if ( CKEDITOR.status == 'unloaded' )
{
(function()
{
CKEDITOR.event.implementOn( CKEDITOR );
/**
* Forces the full CKEditor core code, in the case only the basic code has been
* loaded (ckeditor_basic.js). This method self-destroys (becomes undefined) in
* the first call or as soon as the full code is available.
* @example
* // Check if the full core code has been loaded and load it.
* if ( CKEDITOR.loadFullCore )
* <b>CKEDITOR.loadFullCore()</b>;
*/
CKEDITOR.loadFullCore = function()
{
// If not the basic code is not ready it, just mark it to be loaded.
if ( CKEDITOR.status != 'basic_ready' )
{
CKEDITOR.loadFullCore._load = 1;
return;
}
// Destroy this function.
delete CKEDITOR.loadFullCore;
// Append the script to the head.
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = CKEDITOR.basePath + 'ckeditor.js';
document.getElementsByTagName( 'head' )[0].appendChild( script );
};
/**
* The time to wait (in seconds) to load the full editor code after the
* page load, if the "ckeditor_basic" file is used. If set to zero, the
* editor is loaded on demand, as soon as an instance is created.
*
* This value must be set on the page before the page load completion.
* @type Number
* @default 0 (zero)
* @example
* // Loads the full source after five seconds.
* CKEDITOR.loadFullCoreTimeout = 5;
*/
CKEDITOR.loadFullCoreTimeout = 0;
/**
* The class name used to identify &lt;textarea&gt; elements to be replace
* by CKEditor instances.
* @type String
* @default 'ckeditor'
* @example
* <b>CKEDITOR.replaceClass</b> = 'rich_editor';
*/
CKEDITOR.replaceClass = 'ckeditor';
/**
* Enables the replacement of all textareas with class name matching
* {@link CKEDITOR.replaceClass}.
* @type Boolean
* @default true
* @example
* // Disable the auto-replace feature.
* <b>CKEDITOR.replaceByClassEnabled</b> = false;
*/
CKEDITOR.replaceByClassEnabled = 1;
var createInstance = function( elementOrIdOrName, config, creationFunction, data )
{
if ( CKEDITOR.env.isCompatible )
{
// Load the full core.
if ( CKEDITOR.loadFullCore )
CKEDITOR.loadFullCore();
var editor = creationFunction( elementOrIdOrName, config, data );
CKEDITOR.add( editor );
return editor;
}
return null;
};
/**
* Replaces a &lt;textarea&gt; or a DOM element (DIV) with a CKEditor
* instance. For textareas, the initial value in the editor will be the
* textarea value. For DOM elements, their innerHTML will be used
* instead. We recommend using TEXTAREA and DIV elements only.
* @param {Object|String} elementOrIdOrName The DOM element (textarea), its
* ID or name.
* @param {Object} [config] The specific configurations to apply to this
* editor instance. Configurations set here will override global CKEditor
* settings.
* @returns {CKEDITOR.editor} The editor instance created.
* @example
* &lt;textarea id="myfield" name="myfield"&gt;&lt:/textarea&gt;
* ...
* <b>CKEDITOR.replace( 'myfield' )</b>;
* @example
* var textarea = document.body.appendChild( document.createElement( 'textarea' ) );
* <b>CKEDITOR.replace( textarea )</b>;
*/
CKEDITOR.replace = function( elementOrIdOrName, config )
{
return createInstance( elementOrIdOrName, config, CKEDITOR.editor.replace );
};
/**
* Creates a new editor instance inside a specific DOM element.
* @param {Object|String} elementOrId The DOM element or its ID.
* @param {Object} [config] The specific configurations to apply to this
* editor instance. Configurations set here will override global CKEditor
* settings.
* @param {String} [data] Since 3.3. Initial value for the instance.
* @returns {CKEDITOR.editor} The editor instance created.
* @example
* &lt;div id="editorSpace"&gt;&lt:/div&gt;
* ...
* <b>CKEDITOR.appendTo( 'editorSpace' )</b>;
*/
CKEDITOR.appendTo = function( elementOrId, config, data )
{
return createInstance( elementOrId, config, CKEDITOR.editor.appendTo, data );
};
// Documented at ckeditor.js.
CKEDITOR.add = function( editor )
{
// For now, just put the editor in the pending list. It will be
// processed as soon as the full code gets loaded.
var pending = this._.pending || ( this._.pending = [] );
pending.push( editor );
};
/**
* Replace all &lt;textarea&gt; elements available in the document with
* editor instances.
* @example
* // Replace all &lt;textarea&gt; elements in the page.
* CKEDITOR.replaceAll();
* @example
* // Replace all &lt;textarea class="myClassName"&gt; elements in the page.
* CKEDITOR.replaceAll( 'myClassName' );
* @example
* // Selectively replace &lt;textarea&gt; elements, based on custom assertions.
* CKEDITOR.replaceAll( function( textarea, config )
* {
* // Custom code to evaluate the replace, returning false
* // if it must not be done.
* // It also passes the "config" parameter, so the
* // developer can customize the instance.
* } );
*/
CKEDITOR.replaceAll = function()
{
var textareas = document.getElementsByTagName( 'textarea' );
for ( var i = 0 ; i < textareas.length ; i++ )
{
var config = null,
textarea = textareas[i];
// The "name" and/or "id" attribute must exist.
if ( !textarea.name && !textarea.id )
continue;
if ( typeof arguments[0] == 'string' )
{
// The textarea class name could be passed as the function
// parameter.
var classRegex = new RegExp( '(?:^|\\s)' + arguments[0] + '(?:$|\\s)' );
if ( !classRegex.test( textarea.className ) )
continue;
}
else if ( typeof arguments[0] == 'function' )
{
// An assertion function could be passed as the function parameter.
// It must explicitly return "false" to ignore a specific <textarea>.
config = {};
if ( arguments[0]( textarea, config ) === false )
continue;
}
this.replace( textarea, config );
}
};
(function()
{
var onload = function()
{
var loadFullCore = CKEDITOR.loadFullCore,
loadFullCoreTimeout = CKEDITOR.loadFullCoreTimeout;
// Replace all textareas with the default class name.
if ( CKEDITOR.replaceByClassEnabled )
CKEDITOR.replaceAll( CKEDITOR.replaceClass );
CKEDITOR.status = 'basic_ready';
if ( loadFullCore && loadFullCore._load )
loadFullCore();
else if ( loadFullCoreTimeout )
{
setTimeout( function()
{
if ( CKEDITOR.loadFullCore )
CKEDITOR.loadFullCore();
}
, loadFullCoreTimeout * 1000 );
}
};
if ( window.addEventListener )
window.addEventListener( 'load', onload, false );
else if ( window.attachEvent )
window.attachEvent( 'onload', onload );
})();
CKEDITOR.status = 'basic_loaded';
})();
}

View File

@@ -0,0 +1,209 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* Creates a command class instance.
* @class Represents a command that can be executed on an editor instance.
* @param {CKEDITOR.editor} editor The editor instance this command will be
* related to.
* @param {CKEDITOR.commandDefinition} commandDefinition The command
* definition.
* @augments CKEDITOR.event
* @example
* var command = new CKEDITOR.command( editor,
* {
* exec : function( editor )
* {
* alert( editor.document.getBody().getHtml() );
* }
* });
*/
CKEDITOR.command = function( editor, commandDefinition )
{
/**
* Lists UI items that are associated to this command. This list can be
* used to interact with the UI on command execution (by the execution code
* itself, for example).
* @type Array
* @example
* alert( 'Number of UI items associated to this command: ' + command.<b>uiItems</b>.length );
*/
this.uiItems = [];
/**
* Executes the command.
* @param {Object} [data] Any data to pass to the command. Depends on the
* command implementation and requirements.
* @returns {Boolean} A boolean indicating that the command has been
* successfully executed.
* @example
* command.<b>exec()</b>; // The command gets executed.
*/
this.exec = function( data )
{
if ( this.state == CKEDITOR.TRISTATE_DISABLED )
return false;
if ( this.editorFocus ) // Give editor focus if necessary (#4355).
editor.focus();
return ( commandDefinition.exec.call( this, editor, data ) !== false );
};
CKEDITOR.tools.extend( this, commandDefinition,
// Defaults
/** @lends CKEDITOR.command.prototype */
{
/**
* The editor modes within which the command can be executed. The
* execution will have no action if the current mode is not listed
* in this property.
* @type Object
* @default { wysiwyg : 1 }
* @see CKEDITOR.editor.prototype.mode
* @example
* // Enable the command in both WYSIWYG and Source modes.
* command.<b>modes</b> = { wysiwyg : 1, source : 1 };
* @example
* // Enable the command in Source mode only.
* command.<b>modes</b> = { source : 1 };
*/
modes : { wysiwyg : 1 },
/**
* Indicates that the editor will get the focus before executing
* the command.
* @type Boolean
* @default true
* @example
* // Do not force the editor to have focus when executing the command.
* command.<b>editorFocus</b> = false;
*/
editorFocus : 1,
/**
* Indicates the editor state. Possible values are:
* <ul>
* <li>{@link CKEDITOR.TRISTATE_DISABLED}: the command is
* disabled. It's execution will have no effect. Same as
* {@link disable}.</li>
* <li>{@link CKEDITOR.TRISTATE_ON}: the command is enabled
* and currently active in the editor (for context sensitive commands,
* for example).</li>
* <li>{@link CKEDITOR.TRISTATE_OFF}: the command is enabled
* and currently inactive in the editor (for context sensitive
* commands, for example).</li>
* </ul>
* Do not set this property directly, using the {@link #setState}
* method instead.
* @type Number
* @default {@link CKEDITOR.TRISTATE_OFF}
* @example
* if ( command.<b>state</b> == CKEDITOR.TRISTATE_DISABLED )
* alert( 'This command is disabled' );
*/
state : CKEDITOR.TRISTATE_OFF
});
// Call the CKEDITOR.event constructor to initialize this instance.
CKEDITOR.event.call( this );
};
CKEDITOR.command.prototype =
{
/**
* Enables the command for execution. The command state (see
* {@link CKEDITOR.command.prototype.state}) available before disabling it
* is restored.
* @example
* command.<b>enable()</b>;
* command.exec(); // Execute the command.
*/
enable : function()
{
if ( this.state == CKEDITOR.TRISTATE_DISABLED )
this.setState( ( !this.preserveState || ( typeof this.previousState == 'undefined' ) ) ? CKEDITOR.TRISTATE_OFF : this.previousState );
},
/**
* Disables the command for execution. The command state (see
* {@link CKEDITOR.command.prototype.state}) will be set to
* {@link CKEDITOR.TRISTATE_DISABLED}.
* @example
* command.<b>disable()</b>;
* command.exec(); // "false" - Nothing happens.
*/
disable : function()
{
this.setState( CKEDITOR.TRISTATE_DISABLED );
},
/**
* Sets the command state.
* @param {Number} newState The new state. See {@link #state}.
* @returns {Boolean} Returns "true" if the command state changed.
* @example
* command.<b>setState( CKEDITOR.TRISTATE_ON )</b>;
* command.exec(); // Execute the command.
* command.<b>setState( CKEDITOR.TRISTATE_DISABLED )</b>;
* command.exec(); // "false" - Nothing happens.
* command.<b>setState( CKEDITOR.TRISTATE_OFF )</b>;
* command.exec(); // Execute the command.
*/
setState : function( newState )
{
// Do nothing if there is no state change.
if ( this.state == newState )
return false;
this.previousState = this.state;
// Set the new state.
this.state = newState;
// Fire the "state" event, so other parts of the code can react to the
// change.
this.fire( 'state' );
return true;
},
/**
* Toggles the on/off (active/inactive) state of the command. This is
* mainly used internally by context sensitive commands.
* @example
* command.<b>toggleState()</b>;
*/
toggleState : function()
{
if ( this.state == CKEDITOR.TRISTATE_OFF )
this.setState( CKEDITOR.TRISTATE_ON );
else if ( this.state == CKEDITOR.TRISTATE_ON )
this.setState( CKEDITOR.TRISTATE_OFF );
}
};
CKEDITOR.event.implementOn( CKEDITOR.command.prototype, true );
/**
* Indicates the previous command state.
* @name CKEDITOR.command.prototype.previousState
* @type Number
* @see #state
* @example
* alert( command.<b>previousState</b> );
*/
/**
* Fired when the command state changes.
* @name CKEDITOR.command#state
* @event
* @example
* command.on( <b>'state'</b> , function( e )
* {
* // Alerts the new state.
* alert( this.state );
* });
*/

View File

@@ -0,0 +1,129 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Defines the "virtual" {@link CKEDITOR.commandDefinition} class,
* which contains the defintion of a command. This file is for
* documentation purposes only.
*/
/**
* (Virtual Class) Do not call this constructor. This class is not really part
* of the API.
* @name CKEDITOR.commandDefinition
* @class Virtual class that illustrates the features of command objects to be
* passed to the {@link CKEDITOR.editor.prototype.addCommand} function.
* @example
*/
/**
* The function to be fired when the commend is executed.
* @name CKEDITOR.commandDefinition.prototype.exec
* @function
* @param {CKEDITOR.editor} editor The editor within which run the command.
* @param {Object} [data] Additional data to be used to execute the command.
* @returns {Boolean} Whether the command has been successfully executed.
* Defaults to "true", if nothing is returned.
* @example
* editorInstance.addCommand( 'sample',
* {
* exec : function( editor )
* {
* alert( 'Executing a command for the editor name "' + editor.name + '"!' );
* }
* });
*/
/**
* Whether the command need to be hooked into the redo/undo system.
* @name CKEDITOR.commandDefinition.prototype.canUndo
* @type {Boolean}
* @default true
* @field
* @example
* editorInstance.addCommand( 'alertName',
* {
* exec : function( editor )
* {
* alert( editor.name );
* },
* canUndo : false // No support for undo/redo
* });
*/
/**
* Whether the command is asynchronous, which means that the
* {@link CKEDITOR.editor#event:afterCommandExec} event will be fired by the
* command itself manually, and that the return value of this command is not to
* be returned by the {@link CKEDITOR.command#exec} function.
* @name CKEDITOR.commandDefinition.prototype.async
* @default false
* @type {Boolean}
* @example
* editorInstance.addCommand( 'loadOptions',
* {
* exec : function( editor )
* {
* // Asynchronous operation below.
* CKEDITOR.ajax.loadXml( 'data.xml', function()
* {
* editor.fire( 'afterCommandExec' );
* ));
* },
* async : true // The command need some time to complete after exec function returns.
* });
*/
/**
* Whether the command should give focus to the editor before execution.
* @name CKEDITOR.commandDefinition.prototype.editorFocus
* @type {Boolean}
* @default true
* @see CKEDITOR.command#editorFocus
* @example
* editorInstance.addCommand( 'maximize',
* {
* exec : function( editor )
* {
* // ...
* },
* editorFocus : false // The command doesn't require focusing the editing document.
* });
*/
/**
* Whether the command state should be set to {@link CKEDITOR.TRISTATE_DISABLED} on startup.
* @name CKEDITOR.commandDefinition.prototype.startDisabled
* @type {Boolean}
* @default false
* @example
* editorInstance.addCommand( 'unlink',
* {
* exec : function( editor )
* {
* // ...
* },
* startDisabled : true // Command is unavailable until selection is inside a link.
* });
*/
/**
* The editor modes within which the command can be executed. The execution
* will have no action if the current mode is not listed in this property.
* @name CKEDITOR.commandDefinition.prototype.modes
* @type Object
* @default { wysiwyg : 1 }
* @see CKEDITOR.command#modes
* @example
* editorInstance.addCommand( 'link',
* {
* exec : function( editor )
* {
* // ...
* },
* modes : { wysiwyg : 1 } // Command is available in wysiwyg mode only.
* });
*/

View File

@@ -0,0 +1,439 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Defines the <code>{@link CKEDITOR.config}</code> object that stores the
* default configuration settings.
*/
/**
* Used in conjunction with <code>{@link CKEDITOR.config.enterMode}</code>
* and <code>{@link CKEDITOR.config.shiftEnterMode}</code> configuration
* settings to make the editor produce <code>&lt;p&gt;</code> tags when
* using the <em>Enter</em> key.
* @constant
*/
CKEDITOR.ENTER_P = 1;
/**
* Used in conjunction with <code>{@link CKEDITOR.config.enterMode}</code>
* and <code>{@link CKEDITOR.config.shiftEnterMode}</code> configuration
* settings to make the editor produce <code>&lt;br&gt;</code> tags when
* using the <em>Enter</em> key.
* @constant
*/
CKEDITOR.ENTER_BR = 2;
/**
* Used in conjunction with <code>{@link CKEDITOR.config.enterMode}</code>
* and <code>{@link CKEDITOR.config.shiftEnterMode}</code> configuration
* settings to make the editor produce <code>&lt;div&gt;</code> tags when
* using the <em>Enter</em> key.
* @constant
*/
CKEDITOR.ENTER_DIV = 3;
/**
* @namespace Stores default configuration settings. Changes to this object are
* reflected in all editor instances, if not specified otherwise for a particular
* instance.
*/
CKEDITOR.config =
{
/**
* The URL path for the custom configuration file to be loaded. If not
* overloaded with inline configuration, it defaults to the <code>config.js</code>
* file present in the root of the CKEditor installation directory.<br /><br />
*
* CKEditor will recursively load custom configuration files defined inside
* other custom configuration files.
* @type String
* @default <code>'<em>&lt;CKEditor folder&gt;</em>/config.js'</code>
* @example
* // Load a specific configuration file.
* CKEDITOR.replace( 'myfield', { customConfig : '/myconfig.js' } );
* @example
* // Do not load any custom configuration file.
* CKEDITOR.replace( 'myfield', { customConfig : '' } );
*/
customConfig : 'config.js',
/**
* Whether the replaced element (usually a <code>&lt;textarea&gt;</code>)
* is to be updated automatically when posting the form containing the editor.
* @type Boolean
* @default <code>true</code>
* @example
* config.autoUpdateElement = true;
*/
autoUpdateElement : true,
/**
* The base href URL used to resolve relative and absolute URLs in the
* editor content.
* @type String
* @default <code>''</code> (empty)
* @example
* config.baseHref = 'http://www.example.com/path/';
*/
baseHref : '',
/**
* The CSS file(s) to be used to apply style to editor contents. It should
* reflect the CSS used in the final pages where the contents are to be
* used.
* @type String|Array
* @default <code>'<em>&lt;CKEditor folder&gt;</em>/contents.css'</code>
* @example
* config.contentsCss = '/css/mysitestyles.css';
* config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];
*/
contentsCss : CKEDITOR.basePath + 'contents.css',
/**
* The writing direction of the language used to create the editor
* contents. Allowed values are:
* <ul>
* <li><code>'ui'</code> &ndash; indicates that content direction will be the same as the user interface language direction;</li>
* <li><code>'ltr'</code> &ndash; for Left-To-Right language (like English);</li>
* <li><code>'rtl'</code> &ndash; for Right-To-Left languages (like Arabic).</li>
* </ul>
* @default <code>'ui'</code>
* @type String
* @example
* config.contentsLangDirection = 'rtl';
*/
contentsLangDirection : 'ui',
/**
* Language code of the writing language which is used to create the editor
* contents.
* @default Same value as editor UI language.
* @type String
* @example
* config.contentsLanguage = 'fr';
*/
contentsLanguage : '',
/**
* The user interface language localization to use. If left empty, the editor
* will automatically be localized to the user language. If the user language is not supported,
* the language specified in the <code>{@link CKEDITOR.config.defaultLanguage}</code>
* configuration setting is used.
* @default <code>''</code> (empty)
* @type String
* @example
* // Load the German interface.
* config.language = 'de';
*/
language : '',
/**
* The language to be used if the <code>{@link CKEDITOR.config.language}</code>
* setting is left empty and it is not possible to localize the editor to the user language.
* @default <code>'en'</code>
* @type String
* @example
* config.defaultLanguage = 'it';
*/
defaultLanguage : 'en',
/**
* Sets the behavior of the <em>Enter</em> key. It also determines other behavior
* rules of the editor, like whether the <code>&lt;br&gt;</code> element is to be used
* as a paragraph separator when indenting text.
* The allowed values are the following constants that cause the behavior outlined below:
* <ul>
* <li><code>{@link CKEDITOR.ENTER_P}</code> (1) &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
* <li><code>{@link CKEDITOR.ENTER_BR}</code> (2) &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
* <li><code>{@link CKEDITOR.ENTER_DIV}</code> (3) &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
* </ul>
* <strong>Note</strong>: It is recommended to use the
* <code>{@link CKEDITOR.ENTER_P}</code> setting because of its semantic value and
* correctness. The editor is optimized for this setting.
* @type Number
* @default <code>{@link CKEDITOR.ENTER_P}</code>
* @example
* // Not recommended.
* config.enterMode = CKEDITOR.ENTER_BR;
*/
enterMode : CKEDITOR.ENTER_P,
/**
* Force the use of <code>{@link CKEDITOR.config.enterMode}</code> as line break regardless
* of the context. If, for example, <code>{@link CKEDITOR.config.enterMode}</code> is set
* to <code>{@link CKEDITOR.ENTER_P}</code>, pressing the <em>Enter</em> key inside a
* <code>&lt;div&gt;</code> element will create a new paragraph with <code>&lt;p&gt;</code>
* instead of a <code>&lt;div&gt;</code>.
* @since 3.2.1
* @type Boolean
* @default <code>false</code>
* @example
* // Not recommended.
* config.forceEnterMode = true;
*/
forceEnterMode : false,
/**
* Similarly to the <code>{@link CKEDITOR.config.enterMode}</code> setting, it defines the behavior
* of the <em>Shift+Enter</em> key combination.
* The allowed values are the following constants the behavior outlined below:
* <ul>
* <li><code>{@link CKEDITOR.ENTER_P}</code> (1) &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
* <li><code>{@link CKEDITOR.ENTER_BR}</code> (2) &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
* <li><code>{@link CKEDITOR.ENTER_DIV}</code> (3) &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
* </ul>
* @type Number
* @default <code>{@link CKEDITOR.ENTER_BR}</code>
* @example
* config.shiftEnterMode = CKEDITOR.ENTER_P;
*/
shiftEnterMode : CKEDITOR.ENTER_BR,
/**
* A comma separated list of plugins that are not related to editor
* instances. Reserved for plugins that extend the core code only.<br /><br />
*
* There are no ways to override this setting except by editing the source
* code of CKEditor (<code>_source/core/config.js</code>).
* @type String
* @example
*/
corePlugins : '',
/**
* Sets the <code>DOCTYPE</code> to be used when loading the editor content as HTML.
* @type String
* @default <code>'&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;'</code>
* @example
* // Set the DOCTYPE to the HTML 4 (Quirks) mode.
* config.docType = '&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;';
*/
docType : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
/**
* Sets the <code>id</code> attribute to be used on the <code>body</code> element
* of the editing area. This can be useful when you intend to reuse the original CSS
* file you are using on your live website and want to assign the editor the same ID
* as the section that will include the contents. In this way ID-specific CSS rules will
* be enabled.
* @since 3.1
* @type String
* @default <code>''</code> (empty)
* @example
* config.bodyId = 'contents_id';
*/
bodyId : '',
/**
* Sets the <code>class</code> attribute to be used on the <code>body</code> element
* of the editing area. This can be useful when you intend to reuse the original CSS
* file you are using on your live website and want to assign the editor the same class
* as the section that will include the contents. In this way class-specific CSS rules will
* be enabled.
* @since 3.1
* @type String
* @default <code>''</code> (empty)
* @example
* config.bodyClass = 'contents';
*/
bodyClass : '',
/**
* Indicates whether the contents to be edited are being input as a full
* HTML page. A full page includes the <code>&lt;html&gt;</code>,
* <code>&lt;head&gt;</code>, and <code>&lt;body&gt;</code> elements.
* The final output will also reflect this setting, including the
* <code>&lt;body&gt;</code> contents only if this setting is disabled.
* @since 3.1
* @type Boolean
* @default <code>false</code>
* @example
* config.fullPage = true;
*/
fullPage : false,
/**
* The height of the editing area (that includes the editor content),
* in relative or absolute units, e.g. <code>30px</code>, <code>5em</code>.
* <strong>Note:</strong> Percentage units, like <code>30%</code>, are not supported yet.
* @type Number|String
* @default <code>'200'</code>
* @example
* config.height = 500;
* config.height = '25em';
* config.height = '300px';
*/
height : 200,
/**
* Comma separated list of plugins to be loaded and initialized for an editor
* instance. This setting should rarely be changed. It is recommended to use the
* <code>{@link CKEDITOR.config.extraPlugins}</code> and
* <code>{@link CKEDITOR.config.removePlugins}</code> for customization purposes instead.
* @type String
* @example
*/
plugins :
'about,' +
'a11yhelp,' +
'basicstyles,' +
'bidi,' +
'blockquote,' +
'button,' +
'clipboard,' +
'colorbutton,' +
'colordialog,' +
'contextmenu,' +
'dialogadvtab,' +
'div,' +
'elementspath,' +
'enterkey,' +
'entities,' +
'filebrowser,' +
'find,' +
'flash,' +
'font,' +
'format,' +
'forms,' +
'horizontalrule,' +
'htmldataprocessor,' +
'iframe,' +
'image,' +
'indent,' +
'justify,' +
'keystrokes,' +
'link,' +
'list,' +
'liststyle,' +
'maximize,' +
'newpage,' +
'pagebreak,' +
'pastefromword,' +
'pastetext,' +
'popup,' +
'preview,' +
'print,' +
'removeformat,' +
'resize,' +
'save,' +
'scayt,' +
'smiley,' +
'showblocks,' +
'showborders,' +
'sourcearea,' +
'stylescombo,' +
'table,' +
'tabletools,' +
'specialchar,' +
'tab,' +
'templates,' +
'toolbar,' +
'undo,' +
'wysiwygarea,' +
'wsc',
/**
* A list of additional plugins to be loaded. This setting makes it easier
* to add new plugins without having to touch and potentially break the
* <code>{@link CKEDITOR.config.plugins}</code> setting.
* @type String
* @example
* config.extraPlugins = 'myplugin,anotherplugin';
*/
extraPlugins : '',
/**
* A list of plugins that must not be loaded. This setting makes it possible
* to avoid loading some plugins defined in the <code>{@link CKEDITOR.config.plugins}</code>
* setting, without having to touch it and potentially break it.
* @type String
* @example
* config.removePlugins = 'elementspath,save,font';
*/
removePlugins : '',
/**
* List of regular expressions to be executed on input HTML,
* indicating HTML source code that when matched, must <strong>not</strong> be available in the WYSIWYG
* mode for editing.
* @type Array
* @default <code>[]</code> (empty array)
* @example
* config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP code
* config.protectedSource.push( /<%[\s\S]*?%>/g ); // ASP code
* config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ); // ASP.Net code
*/
protectedSource : [],
/**
* The editor <code>tabindex</code> value.
* @type Number
* @default <code>0</code> (zero)
* @example
* config.tabIndex = 1;
*/
tabIndex : 0,
/**
* The theme to be used to build the user interface.
* @type String
* @default <code>'default'</code>
* @see CKEDITOR.config.skin
* @example
* config.theme = 'default';
*/
theme : 'default',
/**
* The skin to load. It may be the name of the skin folder inside the
* editor installation path, or the name and the path separated by a comma.
* @type String
* @default <code>'default'</code>
* @example
* config.skin = 'v2';
* @example
* config.skin = 'myskin,/customstuff/myskin/';
*/
skin : 'kama',
/**
* The editor width in CSS-defined units or an integer denoting a value in pixels.
* @type String|Number
* @default <code>''</code> (empty)
* @example
* config.width = 850;
* @example
* config.width = '75%';
*/
width : '',
/**
* The base Z-index for floating dialog windows and popups.
* @type Number
* @default <code>10000</code>
* @example
* config.baseFloatZIndex = 2000
*/
baseFloatZIndex : 10000
};
/**
* Indicates that some of the editor features, like alignment and text
* direction, should use the "computed value" of the feature to indicate its
* on/off state instead of using the "real value".<br />
* <br />
* If enabled in a Left-To-Right written document, the "Left Justify"
* alignment button will be shown as active, even if the alignment style is not
* explicitly applied to the current paragraph in the editor.
* @name CKEDITOR.config.useComputedState
* @type Boolean
* @default <code>true</code>
* @since 3.4
* @example
* config.useComputedState = false;
*/
// PACKAGER_RENAME( CKEDITOR.config )

View File

@@ -0,0 +1,65 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
* @fileOverview Defines the "virtual" {@link CKEDITOR.dataProcessor} class, which
* defines the basic structure of data processor objects to be
* set to {@link CKEDITOR.editor.dataProcessor}.
*/
/**
* If defined, points to the data processor which is responsible to translate
* and transform the editor data on input and output.
* Generaly it will point to an instance of {@link CKEDITOR.htmlDataProcessor},
* which handles HTML data. The editor may also handle other data formats by
* using different data processors provided by specific plugins.
* @name CKEDITOR.editor.prototype.dataProcessor
* @type CKEDITOR.dataProcessor
*/
/**
* This class is here for documentation purposes only and is not really part of
* the API. It serves as the base ("interface") for data processors
* implementation.
* @name CKEDITOR.dataProcessor
* @class Represents a data processor, which is responsible to translate and
* transform the editor data on input and output.
* @example
*/
/**
* Transforms input data into HTML to be loaded in the editor.
* While the editor is able to handle non HTML data (like BBCode), at runtime
* it can handle HTML data only. The role of the data processor is transforming
* the input data into HTML through this function.
* @name CKEDITOR.dataProcessor.prototype.toHtml
* @function
* @param {String} data The input data to be transformed.
* @param {String} [fixForBody] The tag name to be used if the data must be
* fixed because it is supposed to be loaded direcly into the &lt;body&gt;
* tag. This is generally not used by non-HTML data processors.
* @example
* // Tranforming BBCode data, having a custom BBCode data processor.
* var data = 'This is [b]an example[/b].';
* var html = editor.dataProcessor.toHtml( data ); // '&lt;p&gt;This is &lt;b&gt;an example&lt;/b&gt;.&lt;/p&gt;'
*/
/**
* Transforms HTML into data to be outputted by the editor, in the format
* expected by the data processor.
* While the editor is able to handle non HTML data (like BBCode), at runtime
* it can handle HTML data only. The role of the data processor is transforming
* the HTML data containined by the editor into a specific data format through
* this function.
* @name CKEDITOR.dataProcessor.prototype.toDataFormat
* @function
* @param {String} html The HTML to be transformed.
* @param {String} fixForBody The tag name to be used if the output data is
* coming from &lt;body&gt; and may be eventually fixed for it. This is
* generally not used by non-HTML data processors.
* // Tranforming into BBCode data, having a custom BBCode data processor.
* var html = '&lt;p&gt;This is &lt;b&gt;an example&lt;/b&gt;.&lt;/p&gt;';
* var data = editor.dataProcessor.toDataFormat( html ); // 'This is [b]an example[/b].'
*/

Some files were not shown because too many files have changed in this diff Show More