Permalink
Browse files

fixed: demo file

  • Loading branch information...
fnagel committed Oct 24, 2012
1 parent efc63f6 commit af2d0a987afd00075784f174fa75ea4ea3908926
View
@@ -39,8 +39,7 @@
$("#themeswitcher").themeswitcher({
imgpath: "res/SuperThemeSwitcher/images/",
- // TODO should be 1.9.0 when CDN updates
- jqueryuiversion: "1.8.23"
+ jqueryuiversion: "1.9.0"
});
});
@@ -62,21 +61,21 @@ <h2>Examples</h2>
</ul>
<div id="tabs-lightbox-info">
<p>
- A simple lightbox gallery.
+ A simple lightbox gallery. Different sizes and very big images will be handled without problems.
</p>
</div>
<div id="tabs-lightbox-demo">
- <ul class="float ui-helper-clearfix">
- <li><a class="lightbox" href="res/images/dummy-600x800-color730046.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #1" longdesc="Exaple picture #1 description text" /></a></li>
- <li><a class="lightbox" href="res/images/dummy-600x800-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #2" longdesc="Exaple picture #2 description text" /></a></li>
+ <ul class="float ui-helper-clearfix">
+ <li><a class="lightbox" href="res/images/dummy-500x375-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #1" longdesc="Exaple picture #1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-454x280-colorFFC200.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #2" longdesc="Exaple picture #2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt." /></a></li>
<li><a class="lightbox" href="res/images/dummy-800x533-colorFFC200.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #3" /></a></li>
<li><a class="lightbox" href="res/images/dummy-800x600-color730046.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #4" /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1024x768-colorFFC200.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #5" longdesc="Exaple picture #5: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1280x1024-colorC93C00.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #6" longdesc="Exaple picture #6: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1600x1200-colorC93C00.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #7" longdesc="Exaple picture #7: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1600x1200-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #8" longdesc="Exaple picture #8: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1800x1800-colorFFC200.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #9" longdesc="Exaple picture #9: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
- <li><a class="lightbox" href="res/images/dummy-1920x1080-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #10" longdesc="Exaple picture #10: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt." /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-600x800-color730046.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #5" longdesc="Exaple picture #5 description text" /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-600x800-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #6" longdesc="Exaple picture #6 description text" /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-1024x768-colorFFC200.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #7" longdesc="Exaple picture #7: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-1280x1024-colorC93C00.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #8" longdesc="Exaple picture #8: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-1600x1200-colorC93C00.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #9" longdesc="Exaple picture #9: Lorem ipsum dolor sit amet, consetetur sadipscing elitr." /></a></li>
+ <li><a class="lightbox" href="res/images/dummy-1600x1200-colorE88801.jpg"><img src="res/images/thumb.jpg" title="Open this picture of in a larger version" alt="Example picture #10" longdesc="Exaple picture #10: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." /></a></li>
</ul>
</div>
<div id="tabs-lightbox-code">
@@ -117,7 +116,7 @@ <h2>Examples</h2>
</p>
<br />
<ul>
- <li><a class="group" href="res/images/DirtyFlowers.jpg">Images (jpg, png, gif by file extension)</a></li>
+ <li><a class="group" href="res/images/dummy-800x600-color730046.jpg">Images (jpg, png, gif by file extension)</a></li>
<li><a class="group" href="res/ajax.html?ajax=true">AJAX content (by adding ?ajax=true to the link)</a></li>
<li><a class="group" href="http://m.flickr.com?iframe=true">iframes (by adding ?iframe=true to the link)</a></li>
<li><a class="group" href="http://www.youtube.com/watch?v=VfOcyrOImLg">You Tube video (by domain)</a></li>
@@ -181,7 +180,7 @@ <h2>Examples</h2>
});
$("#api-button-1").click( function(){
- api.openLink("res/images/DirtyFlowers.jpg");
+ api.openLink("res/images/dummy-800x600-color730046.jpg");
});
$("#api-button-2").click( function(){
@@ -206,7 +205,7 @@ <h2>Examples</h2>
api2.options.dialog.title = "API Gallery Example";
$("#api-button-5").click( function(){
api2.openGallery([
- { href: "res/images/DirtyFlowers.jpg" },
+ { href: "res/images/dummy-800x600-color730046.jpg" },
{ href: "http://www.youtube.com/watch?v=VfOcyrOImLg" },
{ href: "#inline-content-group-1" }
]);
@@ -291,7 +290,7 @@ <h2>Examples</h2>
});
$("#api-button-1").click( function(){
- api.openLink("res/images/DirtyFlowers.jpg");
+ api.openLink("res/images/dummy-800x600-color730046.jpg");
});
$("#api-button-2").click( function(){
@@ -316,7 +315,7 @@ <h2>Examples</h2>
api2.options.dialog.title = "API Gallery Example";
$("#api-button-5").click( function(){
api2.openGallery([
- { href: "res/images/DirtyFlowers.jpg" },
+ { href: "res/images/dummy-800x600-color730046.jpg" },
{ href: "http://www.youtube.com/watch?v=VfOcyrOImLg" },
{ href: "#inline-content-group-1" }
]);
@@ -339,26 +338,29 @@ <h2>Examples</h2>
</div>
<div id="tabs-dialog-demo">
<p>
- Open a bigger, resizable, draggable, top positioned Dialog without an overlay.
+ Open a bigger, resizable, draggable, relative to this tab widget positioned Dialog without an overlay.
</p>
<br />
<ul>
<li><a class="dialog-options" href="http://www.youtube.com/watch?v=VfOcyrOImLg" title="Opeth - The Devil's Orchard">You Tube video</a></li>
<li><a class="dialog-options" href="#inline-content-group-1">HTML</a></li>
- <li><a class="dialog-options" href="res/images/DirtyFlowers.jpg">Image</a></li>
+ <li><a class="dialog-options" href="res/images/dummy-454x280-colorFFC200.jpg">Image</a></li>
</ul>
</div>
<div id="tabs-dialog-code">
- <pre class="brush: js;">
+ <pre class="brush: js;">
$( "a.dialog-options" ).MultiDialog({
dialog: {
- width: 900,
- height: 600,
+ width: 400,
+ height: 300,
modal: false,
position: {
- my: 'top',
- at: 'top',
- offset: '0 10'
+ my: 'left top',
+ at: 'left bottom',
+ offset: '0 10',
+ // overwriting using is needed!
+ using: null,
+ of: $( "#tabs-dialog-demo" )
},
draggable: true,
resizable: true
@@ -373,13 +375,17 @@ <h2>Examples</h2>
$(function() {
$( "a.dialog-options" ).MultiDialog({
dialog: {
- width: 900,
- height: 600,
+ width: 400,
+ height: 300,
modal: false,
position: {
- my: 'top',
- at: 'top',
- offset: '0 10'
+ my: 'left top',
+ at: 'left bottom',
+ offset: '0 10',
+ // overwriting using is needed!
+ using: null,
+ of: $( "#tabs-dialog-demo" ).parent( ".tabs" ),
+ collision: "none"
},
draggable: true,
resizable: true
@@ -428,17 +434,22 @@ <h2>Examples</h2>
</div>
<div id="tabs-examples-demo">
<ul>
- <li><a class="fullscreen" href="res/images/TheBossHoss.jpg">Force fullscreen mode #1</a></li>
- <li><a class="fullscreen" href="res/images/DirtyFlowers.jpg">Force fullscreen mode #2</a></li>
- <li><a class="getvars" title="Some long sample text" href="res/images/DirtyFlowers.jpg?multidialog-type=iframe">Set type via GET parameter (Picture in iframe)</a></li>
+ <li><a class="fullscreen" href="res/images/dummy-800x600-color730046.jpg">Force fullscreen mode #1</a></li>
+ <li><a class="fullscreen" href="res/images/dummy-600x800-color730046.jpg">Force fullscreen mode #2</a></li>
+ <li><a class="getvars" title="Some long sample text" href="res/images/dummy-600x800-color730046.jpg?multidialog-type=iframe">Set type via GET parameter (Picture in iframe)</a></li>
<li><a class="getvars" href="http://www.youtube.com/watch?v=VfOcyrOImLg&multidialog-width=1024&multidialog-height=576" title="Opeth - The Devil's Orchard">Set width and height via GET parameter (YouTube video)</a></li>
</ul>
</div>
<div id="tabs-examples-code">
- <pre class="brush: js;">
+ <pre class="brush: js;">
+ $( "a.fullscreen" ).MultiDialog({
+ forceFullscreen: true
+ });
- // GETvar support: works out-of-the-box
- $( "a.getvars" ).MultiDialog();
+ $( "a.getvars" ).MultiDialog({
+ // you could prefix MultiDialog GETvars if needed
+ getVarPrefix: "multidialog-"
+ });
</pre>
</div>
</div>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit af2d0a9

Please sign in to comment.