Revision history for AjaxGallery
Revision [23405]
Last edited on 2016-05-20 07:38:48 by MasinAlDujaili [Replaces old-style internal links with new pipe-split links.]Additions:
This action is actually only partly based on ajax techniques and is [[YodaHome | my]] first aproach to this kind of enhancements.
Your server needs GD support for PHP installed for the resizement work. Furthermore this extension depends on two ""JavaScript"" libraries: [[http://prototype.conio.net/ | Prototype]] and [[http://script.aculo.us/ | script.aculo.us]]. They need to be placed in a subdirectory "scripts" in the wiki directory. Make sure you copy the .htaccess file from the action directory to this subdirectory!
For your convenience: [[http://yodahome.de/home/scripts.zip | scripts.zip]] (prototype 1.4.0 and script.aculo.us 1.5.3)
[[AjaxIntegration | Discussion on Ajax in Wikka]]
Your server needs GD support for PHP installed for the resizement work. Furthermore this extension depends on two ""JavaScript"" libraries: [[http://prototype.conio.net/ | Prototype]] and [[http://script.aculo.us/ | script.aculo.us]]. They need to be placed in a subdirectory "scripts" in the wiki directory. Make sure you copy the .htaccess file from the action directory to this subdirectory!
For your convenience: [[http://yodahome.de/home/scripts.zip | scripts.zip]] (prototype 1.4.0 and script.aculo.us 1.5.3)
[[AjaxIntegration | Discussion on Ajax in Wikka]]
Deletions:
Your server needs GD support for PHP installed for the resizement work. Furthermore this extension depends on two ""JavaScript"" libraries: [[http://prototype.conio.net/ Prototype]] and [[http://script.aculo.us/ script.aculo.us]]. They need to be placed in a subdirectory "scripts" in the wiki directory. Make sure you copy the .htaccess file from the action directory to this subdirectory!
For your convenience: [[http://yodahome.de/home/scripts.zip scripts.zip]] (prototype 1.4.0 and script.aculo.us 1.5.3)
[[AjaxIntegration Discussion on Ajax in Wikka]]
Additions:
~&With IE8 just released, there's no real reason anymore to support IE <7, I think. Sorry, but we're talking about a browser almost a decade old (and being buggy beyond imagination without support of web standards long established) -- there are far better alternatives out there. Of course, I understand that there might be users, who cannot upgrade, e.g. because of company policies. But I think, those users might also be used to the fact, that their browser isn't supported that well. As all those Netscape Navigator 4.7 users cannot expect to have their browser supported anymore. AFAIK IE7+ supports ##position:fixed;##. As for the nomenclature, CSS is not programming but just a simple set of definitions to apply. As is writing HTML no programming but marking up text. ##position:static;## refers to the position in context to the surrounding content being static, while ##position:fixed;## defines the element's position relative to the viewport (i.e. browser window most the time). MasinAlDujaili, 2009-05-13, 17:14 CEST
Additions:
--Isn't the correct term used in Web Programming static instead of fixed, like when you want a background to stay still as you scroll down a page?
--GrahamKelly
--GrahamKelly
No Differences
Additions:
Your server needs GD support for PHP installed for the resizement work. Furthermore this extension depends on two ""JavaScript"" libraries: [[http://prototype.conio.net/ Prototype]] and [[http://script.aculo.us/ script.aculo.us]]. They need to be placed in a subdirectory "scripts" in the wiki directory. Make sure you copy the .htaccess file from the action directory to this subdirectory!
Deletions:
Additions:
- it works well on latest Mozilla-based browsers (Firefox, Konqueror though the effects are missing, I assume Safari [testers welcome]) AND (finally) in IE but it doesn't work on any version of Opera and the box is not floating while you scroll on IE
Deletions:
Additions:
This doesn't work that well with IE for several reasons: First IE 5+ doesn't understand the css option position:fixed which is needed to display the viewer correctly. I added a workaround for that but there are probably better ways to deal with it out there. Any help would be apreciated. I have not tested this with the IE 7 Beta, would anybody be so kind?
Deletions:
Additions:
- it works well on latest Mozilla-based browsers (Firefox, Konqueror though the effects are missing, I assume Safari [testers welcome]) but it doesn't work on any version of Opera and the box is not floating while you scroll on IE
You need to add these style definitions to your stylesheet. Of course you can change them to suit you needs (size position etc).
%%(css)
#viewer {
position:absolute;
width:84%;
height:84%;
top:50px;
left:50px;
#viewer[id] {
position:fixed;
top:50px;
left:50px;
bottom:50px;
right:50px;
<div style="display:none" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div>';
// If it doesn't, then we gots to create one in a subdir.
<script type="text/javascript" src="./scripts/scriptaculous.js"></script></head><body>';
echo '<div id="loading" style="position:absolute;top:0px;right:50%;background-color:gray;z-index:1;"><b>Loading...</b></div>';
You need to add these style definitions to your stylesheet. Of course you can change them to suit you needs (size position etc).
%%(css)
#viewer {
position:absolute;
width:84%;
height:84%;
top:50px;
left:50px;
#viewer[id] {
position:fixed;
top:50px;
left:50px;
bottom:50px;
right:50px;
<div style="display:none" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div>';
// If it doesn't, then we gots to create one in a subdir.
<script type="text/javascript" src="./scripts/scriptaculous.js"></script></head><body>';
echo '<div id="loading" style="position:absolute;top:0px;right:50%;background-color:gray;z-index:1;"><b>Loading...</b></div>';
Deletions:
<div style="display:none" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div> // Here you can edit the style definition for the viewer
';
//$dir = $vars['dir']; // First thing to do, I suppose is to retrieve all of the filenames in the directory
// If it doesn't, then we gots to create one!
<script type="text/javascript" src="./scripts/scriptaculous.js"></script></head><body onload="new Effect.Appear(\'loading\');return false;">';
echo '<div id="loading" style="position:absolute;top:0px;right:50%;background-color:lightgray;z-index:1;"><b>Loading...</b></div>';
Additions:
<div style="display:none" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div> // Here you can edit the style definition for the viewer
Deletions:
Additions:
- it works well on latest Mozilla-based browsers (Firefox, Konqueror though the effects are missing, I assume Safari [testers welcome]) but it doesn't work on any version of Opera and Internet Explorer (position:fixed doesn't work and some other problems I couldn't locate)
Deletions:
Additions:
- there is no fallback for non-ajax browser but it makes sense to add this
Additions:
[[AjaxIntegration Discussion on Ajax in Wikka]]
Additions:
This action is actually only partly based on ajax techniques and is [[YodaHome my]] first aproach to this kind of enhancements.
Deletions:
Additions:
=== Demo ===
See it work on http://yodahome.de/wiki/SandBox
See it work on http://yodahome.de/wiki/SandBox
Additions:
- consider this an alpha version (though the ""JavaScript"" libraries used are considered very stable)
Deletions:
Additions:
This action is actually only partly based on ajax techniques and is my first aproach to this kind of enhancements.
Deletions:
Additions:
===== AjaxGallery =====
Deletions:
Additions:
- the code is ugly
For your convenience: [[http://yodahome.de/home/scripts.zip scripts.zip]] (prototype 1.4.0 and script.aculo.us 1.5.3)
=== Problems ===
This doesn't work with IE for several reasons: First IE 5+ doesn't understand the css option position:fixed which is needed to display the viewer correctly. Though there are some workarounds for this I couldn't get it work yet. Any help would be apreciated. Furthermore there might be some other issues I have not looked into presumingly due to to missinterpreted css 2.0. I have not tested this with the IE 7 Beta, would anybody be so kind?
For your convenience: [[http://yodahome.de/home/scripts.zip scripts.zip]] (prototype 1.4.0 and script.aculo.us 1.5.3)
=== Problems ===
This doesn't work with IE for several reasons: First IE 5+ doesn't understand the css option position:fixed which is needed to display the viewer correctly. Though there are some workarounds for this I couldn't get it work yet. Any help would be apreciated. Furthermore there might be some other issues I have not looked into presumingly due to to missinterpreted css 2.0. I have not tested this with the IE 7 Beta, would anybody be so kind?
Additions:
Those two files need to be placed in the actions directory:
actions/ajaxgallery.php
</script>
<div style="position:fixed;top:50px;left:50px;right:50px;bottom:50px;display:none;" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div> // Here you can edit the style definition for the viewer
actions/show.php
actions/ajaxgallery.php
</script>
<div style="position:fixed;top:50px;left:50px;right:50px;bottom:50px;display:none;" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div> // Here you can edit the style definition for the viewer
actions/show.php
Deletions:
ajaxgallery.php
</script><div style="position:fixed;top:50px;left:50px;right:50px;bottom:50px;display:none;" id="viewer" onclick="Effect.toggle(\'viewer\',\'appear\');return false;"></div>
show.php
Additions:
if (isset($_GET['createpic'])) generate($_GET['picture'], $_GET['width'], $_GET['height']); else {
Additions:
=== Prerequisites / Installation ===
Deletions:
Additions:
function generate($source, $w, $h, $quality = 85)
