Added text examples alongside images

diff --git a/demos/functional/templates/ui.effects.showhide.html b/demos/functional/templates/ui.effects.showhide.html
index 5e7f3c18703f0ede6483374f323eecd18e78ff8d..fe57b1372330f2b8b15da9171ca9ec36d850ee91 100644 (file)
--- a/demos/functional/templates/ui.effects.showhide.html
+++ b/demos/functional/templates/ui.effects.showhide.html
@@ -12,12 +12,14 @@
                                title: 'Blind',
                                desc: 'Gradually show or hide an element.',
                                html: '<button id="doBlind">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="blind" src="templates/images/P1010020.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="blindfx" style="width: 144px; height: 108px;" src="templates/images/P1010020.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doBlind").unbind();',
 
                                options: [
-                                       {       desc: 'Vertical blind', source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "vertical"}, 2000); });' },
-                                       {       desc: 'Horizontal blind',       source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "horizontal"}, 2000); });' }
+                                       {       desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 2000); });' },
+                                       {       desc: 'Horizontal blind',       source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 2000); });' }
                                ]
                        },
 
@@ -25,12 +27,14 @@
                                title: 'Clip',
                                desc: 'Gradually show or hide an element by expanding from or to the center.',
                                html: '<button id="doClip">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="clip" src="templates/images/P1010039.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="clipfx" style="width: 144px; height: 108px;" src="templates/images/P1010039.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doClip").unbind();',
 
                                options: [
-                                       {       desc: 'Vertical clip',  source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "vertical"}, 2000); });' },
-                                       {       desc: 'Horizontal clip',        source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "horizontal"}, 2000); });' }
+                                       {       desc: 'Vertical clip',  source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 2000); });' },
+                                       {       desc: 'Horizontal clip',        source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 2000); });' }
                                ]
                        },
 
@@ -38,14 +42,16 @@
                                title: 'Drop',
                                desc: 'Gradually show or hide an element by dropping it to one side and fading it.',
                                html: '<button id="doDrop">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="drop" src="templates/images/P1010044.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="dropfx" style="width: 144px; height: 108px;" src="templates/images/P1010044.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doDrop").unbind();',
 
                                options: [
-                                       {       desc: 'Drop left',      source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "left"}, 2000); });' },
-                                       {       desc: 'Drop right',     source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "right"}, 2000); });' },
-                                       {       desc: 'Drop up',        source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "up"}, 2000); });' },
-                                       {       desc: 'Drop down',      source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "down"}, 2000); });' }
+                                       {       desc: 'Drop left',      source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 2000); });' },
+                                       {       desc: 'Drop right',     source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 2000); });' },
+                                       {       desc: 'Drop up',        source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 2000); });' },
+                                       {       desc: 'Drop down',      source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 2000); });' }
                                ]
                        },
 
@@ -53,13 +59,15 @@
                                title: 'Explode',
                                desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.',
                                html: '<button id="doExplode">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="explode" src="templates/images/P1010050.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="explodefx" style="width: 144px; height: 108px;" src="templates/images/P1010050.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doExplode").unbind();',
 
                                options: [
-                                       {       desc: 'Explode defaults (9 pieces)',    source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {}, 2000); });' },
-                                       {       desc: 'Explode into 4 pieces',  source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 4}, 2000); });' },
-                                       {       desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 25}, 2000); });' }
+                                       {       desc: 'Explode defaults (9 pieces)',    source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 2000); });' },
+                                       {       desc: 'Explode into 4 pieces',  source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 2000); });' },
+                                       {       desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 2000); });' }
                                ]
                        },
 
@@ -67,15 +75,17 @@
                                title: 'Fold',
                                desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.',
                                html: '<button id="doFold">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="fold" src="templates/images/P1010055.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="foldfx" style="width: 144px; height: 108px;" src="templates/images/P1010055.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doFold").unbind();',
 
                                options: [
-                                       {       desc: 'Fold defaults (to size 15)',     source: '$("#doFold").click(function() { $("#fold").toggle("fold", {}, 2000); });' },
-                                       {       desc: 'Fold to 30',     source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30}, 2000); });' },
-                                       {       desc: 'Fold in half (50%)',     source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%"}, 2000); });' },
-                                       {       desc: 'Fold horizontally first',        source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30, horizFirst: true}, 2000); });' },
-                                       {       desc: 'Fold in half horizontally first',        source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' }
+                                       {       desc: 'Fold defaults (to size 15)',     source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 2000); });' },
+                                       {       desc: 'Fold to 30',     source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 2000); });' },
+                                       {       desc: 'Fold in half (50%)',     source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 2000); });' },
+                                       {       desc: 'Fold horizontally first',        source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 2000); });' },
+                                       {       desc: 'Fold in half horizontally first',        source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' }
                                ]
                        },
 
@@ -83,12 +93,14 @@
                                title: 'Puff',
                                desc: 'Scale an element up and fade out, or scale it down and fade in.',
                                html: '<button id="doPuff">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="puff" src="templates/images/P1010058.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="pufffx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doPuff").unbind();',
 
                                options: [
-                                       {       desc: 'Puff defaults (scale to 150%)',  source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {}, 2000); });' },
-                                       {       desc: 'Puff to 200%',   source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {percent: 200}, 2000); });' }
+                                       {       desc: 'Puff defaults (scale to 150%)',  source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 2000); });' },
+                                       {       desc: 'Puff to 200%',   source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' }
                                ]
                        },
 
@@ -96,14 +108,16 @@
                                title: 'Slide',
                                desc: 'Slide an element out of or into the viewport.',
                                html: '<button id="doSlide">Toggle</button><br/>\n' +
-                                       '<div style="height: 108px;"><img id="slide" src="templates/images/P1010059.JPG"/></div>',
+                                       '<ul><li style="float: left; width: 144px; height: 108px;"><img class="slidefx" style="width: 144px; height: 108px;" src="templates/images/P1010059.JPG"/></li>\n' +
+                                       '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+                                       '<div style="clear: both;"></div>',
                                destroy: '$("#doSlide").unbind();',
 
                                options: [
-                                       {       desc: 'Slide left',     source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "left"}, 2000); });' },
-                                       {       desc: 'Slide right',    source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "right"}, 2000); });' },
-                                       {       desc: 'Slide up',       source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "up"}, 2000); });' },
-                                       {       desc: 'Slide down',     source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "down"}, 2000); });' }
+                                       {       desc: 'Slide left',     source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 2000); });' },
+                                       {       desc: 'Slide right',    source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 2000); });' },
+                                       {       desc: 'Slide up',       source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 2000); });' },
+                                       {       desc: 'Slide down',     source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 2000); });' }
                                ]
                        }