Revision history for SlideshowGallery
Revision [23127]
Last edited on 2016-05-20 07:38:46 by YodaHome [Replaces old-style internal links with new pipe-split links.]Additions:
Your server needs GD support for PHP installed for the thumbnails. Furthermore this extension depends on the ""JavaScript"" library called [[http://prototype.conio.net/ | Prototype]] and [[http://script.aculo.us | script.aculo.us]]. prototype.js, scriptaculous.js and the other .js files of the the script.aculo.us package need to be placed in a subdirectory scripts in the action directory. These two lines then need to be put into header.php:
I've created a [[http://yodahome.de/home/slideshowgallery.zip | handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need 'pictures to show' located in some separate directory.
I've created a [[http://yodahome.de/home/slideshowgallery.zip | handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need 'pictures to show' located in some separate directory.
Deletions:
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need 'pictures to show' located in some separate directory.
No Differences
Additions:
Your server needs GD support for PHP installed for the thumbnails. Furthermore this extension depends on the ""JavaScript"" library called [[http://prototype.conio.net/ Prototype]] and [[http://script.aculo.us script.aculo.us]]. prototype.js, scriptaculous.js and the other .js files of the the script.aculo.us package need to be placed in a subdirectory scripts in the action directory. These two lines then need to be put into header.php:
%%(javascript)
<script src="actions/scripts/prototype.js" type="text/javascript"></script>
<script src="actions/scripts/scriptaculous.js" type="text/javascript"></script>
%%(javascript)
<script src="actions/scripts/prototype.js" type="text/javascript"></script>
<script src="actions/scripts/scriptaculous.js" type="text/javascript"></script>
Deletions:
Additions:
Your server needs GD support for PHP installed for the thumbnails. Furthermore this extension depends on the ""JavaScript"" library called [[http://prototype.conio.net/ Prototype]] and [[http://script.aculo.us script.aculo.us]]. prototype.js, scriptaculous.js and the other .js files of the the script.aculo.us package need to be placed in a subdirectory scripts in the action directory.
scriptaculous.js
effects.js
builder.js
controls.js
dragdrop.js
effects.js
slider.js
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need 'pictures to show' located in some separate directory.
scriptaculous.js
effects.js
builder.js
controls.js
dragdrop.js
effects.js
slider.js
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need 'pictures to show' located in some separate directory.
Deletions:
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need pictures located in some separate directory.
Additions:
This should work in any Browser with basic ""JavaScript"". It's been tested sucessfully in Mozilla Firefox 1.5, Internet Explorer 7 (beta), Opera 8, Konqueror 3.5 and I think a friend of mine even tried it in Safari (probably latest version as of March 2006).
Deletions:
Additions:
''**IMPORTANT**: The id **MUST BE SET**. First time you use the action start with 1 and increase the number with any following usage per page.''
Deletions:
Additions:
''**IMPORTANT**: The id **MUST BE SET**. First time you use the action start with 1 and increase the number with any following usage.''
Deletions:
Additions:
- more than one gallery per page is possible
Including the action any wikka page:
""{{gallery dir="path/to/pictures/" id="1|2|3|4..."}}""
IMPORTANT: The id MUST BE SET. First time you use the action start with 1 and increase the number with any following usage.
Including the action any wikka page:
""{{gallery dir="path/to/pictures/" id="1|2|3|4..."}}""
IMPORTANT: The id MUST BE SET. First time you use the action start with 1 and increase the number with any following usage.
Deletions:
Additions:
$id = $vars['id'];
$files = GetFileList($dir);
echo' <script type="text/JavaScript" charset="utf-8">
photoDir['.$id.'] = "'.$dir.'";
photoArray['.$id.'] = new Array(
photoNum = photoArray['.$id.'].length;
</script>';
$output .= "<td><a href=\"\" style=\"border:0px;\" onclick=\"galId=$id;photoId=$counter;cyclePhoto(".$id.",photoId);Effect.toggle('viewer','appear');return false;\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
$counter = 0;
var photoDir = new Array(); // Location of photos for gallery
var photoId;
var photoArray = new Array();
var photoNum;
var galId;
// Show initial photo - now unnecessary
//cyclePhoto(photoId);
if(photoId == (photoArray[galId].length - 1)){
cyclePhoto(galId,photoId);
photoId = photoArray[galId].length - 1;
cyclePhoto(galId,photoId);
cyclePhoto = function(galId,photoId){
var wNew = photoArray[galId][photoId][1];
var hNew = photoArray[galId][photoId][2];
w=w-60;h=h-40;
var newPhoto = photoDir[galId] + photoArray[galId][photoId][0];
<div style="display:none;position:fixed;top:0px;left:0px;width:98%;height:98%;" id="viewer" onresize = cyclePhoto(galId,photoId);>
<div style="position:absolute;bottom:10px;right:30px;background-color:#ceceb5;border:4px #ceceb5 solid"><a href="#" onclick="Effect.toggle(\'viewer\',\'appear\');return false;">Close</a></div>
$files = GetFileList($dir);
echo' <script type="text/JavaScript" charset="utf-8">
photoDir['.$id.'] = "'.$dir.'";
photoArray['.$id.'] = new Array(
photoNum = photoArray['.$id.'].length;
</script>';
$output .= "<td><a href=\"\" style=\"border:0px;\" onclick=\"galId=$id;photoId=$counter;cyclePhoto(".$id.",photoId);Effect.toggle('viewer','appear');return false;\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
$counter = 0;
var photoDir = new Array(); // Location of photos for gallery
var photoId;
var photoArray = new Array();
var photoNum;
var galId;
// Show initial photo - now unnecessary
//cyclePhoto(photoId);
if(photoId == (photoArray[galId].length - 1)){
cyclePhoto(galId,photoId);
photoId = photoArray[galId].length - 1;
cyclePhoto(galId,photoId);
cyclePhoto = function(galId,photoId){
var wNew = photoArray[galId][photoId][1];
var hNew = photoArray[galId][photoId][2];
w=w-60;h=h-40;
var newPhoto = photoDir[galId] + photoArray[galId][photoId][0];
<div style="display:none;position:fixed;top:0px;left:0px;width:98%;height:98%;" id="viewer" onresize = cyclePhoto(galId,photoId);>
<div style="position:absolute;bottom:10px;right:30px;background-color:#ceceb5;border:4px #ceceb5 solid"><a href="#" onclick="Effect.toggle(\'viewer\',\'appear\');return false;">Close</a></div>
Deletions:
$output .= "<td><a href=\"\" style=\"border:0px;\" onclick=\"photoId=$counter;cyclePhoto(photoId);Effect.toggle('viewer','appear');return false;\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
var photoDir = "'.$dir.'"; // Location of photos for gallery
// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
//var photoId = 0;
var photoArray = new Array(
var photoNum = photoArray.length;
// Show initial photo
cyclePhoto(photoId);
if(photoId == (photoArray.length - 1)){
cyclePhoto(photoId);
photoId = photoArray.length - 1;
cyclePhoto(photoId);
cyclePhoto = function(photoId){
var wNew = photoArray[photoId][1];
var hNew = photoArray[photoId][2];
w=w-80;h=h-60;
var newPhoto = photoDir + photoArray[photoId][0];
<div style="display:none;position:fixed;top:0px;left:0px;width:98%;height:98%;" id="viewer" onresize = cyclePhoto(photoId);>
<div style="position:absolute;bottom:10px;right:50px;background-color:#888888"><a href="#" onclick="Effect.toggle(\'viewer\',\'appear\');return false;">Close</a></div>
?>%%
Additions:
- on click shows the ""SlideShow"" Widget right over the wiki page and sticks to the window (which basically means even if you scrolled down before you click a picture the position is fixed, so you might change the size and information underneath could still be read)
- lets you click through the images manually or continues automatically after a few seconds (this is deactivated by default)
- a title or additional text could be displayed dynamically with any picture (this is deactivated but if you're JavaScript-Experienced you can turn it on, just need to know where the text comes from
- atm only ONE action per page, I'm trying though to make it work for more than one gallery per page
- no fallback for non-Ajax browsers (which might be good)
===planned features===
- close button inside the picture (like the two others)
- any other ideas?
- lets you click through the images manually or continues automatically after a few seconds (this is deactivated by default)
- a title or additional text could be displayed dynamically with any picture (this is deactivated but if you're JavaScript-Experienced you can turn it on, just need to know where the text comes from
- atm only ONE action per page, I'm trying though to make it work for more than one gallery per page
- no fallback for non-Ajax browsers (which might be good)
===planned features===
- close button inside the picture (like the two others)
- any other ideas?
Deletions:
- lets you click through the images manually or continues automatically after a few seconds (deactivated by default)
- atm only ONE action per page, I could need help with making this work for several galleries on the same page
- no fallback for non-Ajax browsers
No Differences
Additions:
All in all there should be these files on your wikka installation:
Deletions:
Additions:
- doesn't work in IE 6 (or earlier)
- no fallback for non-Ajax browsers
- no fallback for non-Ajax browsers
Deletions:
Additions:
''I finally managed to get this Slideshow widget into the wiki without any need for popups like they were used in the last version. ''
Deletions:
Additions:
===What it can't do===
- doesn't work in IE 6
- atm only ONE action per page, I could need help with making this work for several galleries on the same page
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need pictures located in some separate directory.
This should work in any Browser with basic ""JavaScript"". It's been tested sucessfully in Mozilla Firefox 1.5, Internet Explorer 7 (beta), Opera 8, Konqueror 3.5 and I think someone even tried it in Safari (probably latest version as of March 2006).
On Opera 9 Beta the switches at the sides to go forward and backward do not appear and you can't go forward or backward. Apart from that it works. Any further experiences are much appreciated.
- doesn't work in IE 6
- atm only ONE action per page, I could need help with making this work for several galleries on the same page
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] that includes all the additional files but NOT the action itself (gallery.php, grafx.php and css styles are listed below). Of course you also need pictures located in some separate directory.
This should work in any Browser with basic ""JavaScript"". It's been tested sucessfully in Mozilla Firefox 1.5, Internet Explorer 7 (beta), Opera 8, Konqueror 3.5 and I think someone even tried it in Safari (probably latest version as of March 2006).
On Opera 9 Beta the switches at the sides to go forward and backward do not appear and you can't go forward or backward. Apart from that it works. Any further experiences are much appreciated.
Deletions:
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] where all files should be included. Of course you also need pictures located in some separate directory.
This should work in any Browser with basic ""JavaScript"". It's been tested in Mozilla Firefox 1.5, Internet Explorer 6 and 7 (beta), Opera 8 Konqueror 3.5 and I think someone even tried it in Safari (probably latest version as of March 2006).
On Opera 9 Beta the switches at the sides to go forward and backward do not appear. Apart from that it works. Any further experiences are much appreciated.
Additions:
- on click shows the ""SlideShow"" Widget right over the wiki page
Deletions:
Deletions:
Additions:
''I finally managed to get this Slidehow widget into the wiki without any need for popups like they were used in the last version. ''
- on click shows the SlideShow Widget right over the wiki page
- lets you click through the images manually or continues automatically after a few seconds (deactivated by default)
See it work on https://yodahome.de/wiki/SandBox
$counter = 0;
$output .= "<td><a href=\"\" style=\"border:0px;\" onclick=\"photoId=$counter;cyclePhoto(photoId);Effect.toggle('viewer','appear');return false;\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
echo '
<script src="actions/scripts/ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>
var photoDir = "'.$dir.'"; // Location of photos for gallery
// Define each photo\'s name, height, width, and caption
';
echo '
// Create access to \'Detect\' object and a place to put instances of \'HTMLobj\'
API.Container = new HTMLobj(\'Container\');
API.Photo = new HTMLobj(\'Photo\');
API.PhotoContainer = new HTMLobj(\'PhotoContainer\');
API.LinkContainer = new HTMLobj(\'LinkContainer\');
API.PrevLink = new HTMLobj(\'PrevLink\');
API.NextLink = new HTMLobj(\'NextLink\');
API.CaptionBlock = new HTMLobj(\'CaptionBlock\');
API.Counter = new HTMLobj(\'Counter\');
API.Caption = new HTMLobj(\'Caption\');
API.LoadImg = new HTMLobj(\'LoadImg\');
var fade_timer = setInterval(\'startFade()\', 1000);
var adv_timer = setInterval(\'permitNextPrev()\', 500);
document.getElementById(\'NextLink\').onclick = nextPhoto;
document.getElementById(\'PrevLink\').onclick = prevPhoto;
API.LoadImg.setSrc("actions/images/slideshow/start.gif");
API.LoadImg.setSrc("actions/images/slideshow/loading_ani2.gif");
w=w-80;h=h-60;
setTimeout(\'API.Container.tweenTo(easeInQuad, [\'+wCur+\', \'+hCur+\'], [\'+wNew+\',\'+hNew+\'], 7)\',500);
setTimeout(\'API.LinkContainer.sizeTo(\'+wNew+\',\'+hNew+\')\',500);
setTimeout(\'API.PrevLink.sizeTo(\'+wNew/2+\',\'+hNew+\')\',500);
setTimeout(\'API.NextLink.sizeTo(\'+wNew/2+\',\'+hNew+\')\',500);
//setTimeout(\'API.CaptionBlock.sizeTo(\'+wNew+\',18)\',500);
setTimeout(\'API.CaptionBlock.sizeTo(0,0)\',500);
//API.NextLink.setHref("#" + (photoId+1));
//API.PrevLink.setHref("#" + (photoId+1));
document.getElementById(\'Photo\').onload = initFade;
document.getElementById(\'NextLink\').onclick = falsify;
document.getElementById(\'PrevLink\').onclick = falsify;
//self.setTimeout(\'setInterval("nextPhoto()", 15000)\', 15000)
//var ourInterval = setInterval(\'nextPhoto()\', 10000);
<div style="display:none;position:fixed;top:0px;left:0px;width:98%;height:98%;" id="viewer" onresize = cyclePhoto(photoId);>
<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a id="PrevLink" onfocus="this.blur();" accesskey="[" title="« Previous Photo" class="plainlink"><span>Previous</span></a><a id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo »" class="plainlink"><span>Next</span></a>
</div>
<div id="PhotoContainer"><img id="Photo" src="images/7sm.gif" alt="" width="50" height="50" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>
<div style="position:absolute;bottom:10px;right:50px;background-color:#888888"><a href="#" onclick="Effect.toggle(\'viewer\',\'appear\');return false;">Close</a></div>
';
?>%%
These need to go to your Stylesheet (css/whatever.css)
%%(css)
#Container{
margin:10px auto;
padding: 0;
position:relative;
width:100px;
height:100px;
background-color:#fff;
border:3px solid #CECEB5;
overflow:hidden
#LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
#PhotoContainer{
visibility:hidden
#CaptionBlock{
height:10px;
width:10px;
text-align:left;
margin:0 auto
#Caption{
color:#333
#License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:50px;
text-align:left;
line-height:1.4em;
#LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:50px;
width:50px;
z-index:100;
background:url(../actions/images/slideshow/start.gif) 50% 50% no-repeat
#PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:50px;
width:50%;
display:block
#NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:50px;
width:50%;
display:block
#PrevLink:hover,#NextLink:hover{
text-decoration:none
#PrevLink:hover{
background:transparent url(../actions/images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
#NextLink:hover{
background:transparent url(../actions/images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
#PrevLink span,#NextLink span{
display:none
img{
border:none
p{
font-size:11px;
padding:1em 0
#Wrapper{
margin:0 auto;
height:50px;
width:100%;
overflow:hidden;
position:relative;
background-color: #8D977E;
#Wrapper[id]{
display:table;
position:static
#InnerWrapper{
position:absolute;
top:50%;
left:0;
#InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
#OuterContainer{
position:relative;
top:-50%
- on click shows the SlideShow Widget right over the wiki page
- lets you click through the images manually or continues automatically after a few seconds (deactivated by default)
See it work on https://yodahome.de/wiki/SandBox
$counter = 0;
$output .= "<td><a href=\"\" style=\"border:0px;\" onclick=\"photoId=$counter;cyclePhoto(photoId);Effect.toggle('viewer','appear');return false;\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
echo '
<script src="actions/scripts/ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>
var photoDir = "'.$dir.'"; // Location of photos for gallery
// Define each photo\'s name, height, width, and caption
';
echo '
// Create access to \'Detect\' object and a place to put instances of \'HTMLobj\'
API.Container = new HTMLobj(\'Container\');
API.Photo = new HTMLobj(\'Photo\');
API.PhotoContainer = new HTMLobj(\'PhotoContainer\');
API.LinkContainer = new HTMLobj(\'LinkContainer\');
API.PrevLink = new HTMLobj(\'PrevLink\');
API.NextLink = new HTMLobj(\'NextLink\');
API.CaptionBlock = new HTMLobj(\'CaptionBlock\');
API.Counter = new HTMLobj(\'Counter\');
API.Caption = new HTMLobj(\'Caption\');
API.LoadImg = new HTMLobj(\'LoadImg\');
var fade_timer = setInterval(\'startFade()\', 1000);
var adv_timer = setInterval(\'permitNextPrev()\', 500);
document.getElementById(\'NextLink\').onclick = nextPhoto;
document.getElementById(\'PrevLink\').onclick = prevPhoto;
API.LoadImg.setSrc("actions/images/slideshow/start.gif");
API.LoadImg.setSrc("actions/images/slideshow/loading_ani2.gif");
w=w-80;h=h-60;
setTimeout(\'API.Container.tweenTo(easeInQuad, [\'+wCur+\', \'+hCur+\'], [\'+wNew+\',\'+hNew+\'], 7)\',500);
setTimeout(\'API.LinkContainer.sizeTo(\'+wNew+\',\'+hNew+\')\',500);
setTimeout(\'API.PrevLink.sizeTo(\'+wNew/2+\',\'+hNew+\')\',500);
setTimeout(\'API.NextLink.sizeTo(\'+wNew/2+\',\'+hNew+\')\',500);
//setTimeout(\'API.CaptionBlock.sizeTo(\'+wNew+\',18)\',500);
setTimeout(\'API.CaptionBlock.sizeTo(0,0)\',500);
//API.NextLink.setHref("#" + (photoId+1));
//API.PrevLink.setHref("#" + (photoId+1));
document.getElementById(\'Photo\').onload = initFade;
document.getElementById(\'NextLink\').onclick = falsify;
document.getElementById(\'PrevLink\').onclick = falsify;
//self.setTimeout(\'setInterval("nextPhoto()", 15000)\', 15000)
//var ourInterval = setInterval(\'nextPhoto()\', 10000);
<div style="display:none;position:fixed;top:0px;left:0px;width:98%;height:98%;" id="viewer" onresize = cyclePhoto(photoId);>
<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a id="PrevLink" onfocus="this.blur();" accesskey="[" title="« Previous Photo" class="plainlink"><span>Previous</span></a><a id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo »" class="plainlink"><span>Next</span></a>
</div>
<div id="PhotoContainer"><img id="Photo" src="images/7sm.gif" alt="" width="50" height="50" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>
<div style="position:absolute;bottom:10px;right:50px;background-color:#888888"><a href="#" onclick="Effect.toggle(\'viewer\',\'appear\');return false;">Close</a></div>
';
?>%%
These need to go to your Stylesheet (css/whatever.css)
%%(css)
#Container{
margin:10px auto;
padding: 0;
position:relative;
width:100px;
height:100px;
background-color:#fff;
border:3px solid #CECEB5;
overflow:hidden
#LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
#PhotoContainer{
visibility:hidden
#CaptionBlock{
height:10px;
width:10px;
text-align:left;
margin:0 auto
#Caption{
color:#333
#License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:50px;
text-align:left;
line-height:1.4em;
#LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:50px;
width:50px;
z-index:100;
background:url(../actions/images/slideshow/start.gif) 50% 50% no-repeat
#PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:50px;
width:50%;
display:block
#NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:50px;
width:50%;
display:block
#PrevLink:hover,#NextLink:hover{
text-decoration:none
#PrevLink:hover{
background:transparent url(../actions/images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
#NextLink:hover{
background:transparent url(../actions/images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
#PrevLink span,#NextLink span{
display:none
img{
border:none
p{
font-size:11px;
padding:1em 0
#Wrapper{
margin:0 auto;
height:50px;
width:100%;
overflow:hidden;
position:relative;
background-color: #8D977E;
#Wrapper[id]{
display:table;
position:static
#InnerWrapper{
position:absolute;
top:50%;
left:0;
#InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
#OuterContainer{
position:relative;
top:-50%
Deletions:
- on click opens a new window with the slideshow script
- lets you click through the images manually or continues automatically after a few seconds
See it work on http://yodahome.de/wiki/MyPics
slideshow.php
ajax-slideshowSmall.css (you might wanna place this elsewhere, just change the path in slideshow.php)
$counter = 1;
$output .= "<td><a style=\"border:0px;\" href=\"./actions/slideshow.php?path=../$dir#$counter\" onclick=\"openwindow(this.href); return false\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
slideshow.php (the javascript in here is written by Scott Upton)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>AJAX Slideshow</title>
<link href="ajax-slideshowSmall.css" rel="stylesheet" type="text/css" />
<script src="scripts/ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>
var photoDir = "<?php echo $_GET['path']?>"; // Location of photos for gallery
// Define each photo's name, height, width, and caption
$dir = $_GET['path'];
echo "That directory ($dir) does not exists (or it could be a file!)";
// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
API.Container = new HTMLobj('Container');
API.Photo = new HTMLobj('Photo');
API.PhotoContainer = new HTMLobj('PhotoContainer');
API.LinkContainer = new HTMLobj('LinkContainer');
API.PrevLink = new HTMLobj('PrevLink');
API.NextLink = new HTMLobj('NextLink');
API.CaptionBlock = new HTMLobj('CaptionBlock');
API.Counter = new HTMLobj('Counter');
API.Caption = new HTMLobj('Caption');
API.LoadImg = new HTMLobj('LoadImg');
var fade_timer = setInterval('startFade()', 1000);
var adv_timer = setInterval('permitNextPrev()', 500);
document.getElementById('NextLink').onclick = nextPhoto;
document.getElementById('PrevLink').onclick = prevPhoto;
API.LoadImg.setSrc("images/slideshow/start.gif");
API.LoadImg.setSrc("images/slideshow/loading_ani2.gif");
w=w-30;h=h-30;
setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500);
setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500);
setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500);
//setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500);
setTimeout('API.CaptionBlock.sizeTo(0,0)',500);
API.NextLink.setHref("#" + (photoId+1));
API.PrevLink.setHref("#" + (photoId+1));
document.getElementById('Photo').onload = initFade;
document.getElementById('NextLink').onclick = falsify;
document.getElementById('PrevLink').onclick = falsify;
self.setTimeout('setInterval("nextPhoto()", 15000)', 15000)
//var ourInterval = setInterval('nextPhoto()', 10000);
</head>
<body bgcolor="#FFFFFF" >
<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a href="#" id="PrevLink" onfocus="this.blur();" accesskey="[" title="« Previous Photo" class="plainlink"><span>Previous</span></a><a href="#" id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo »" class="plainlink"><span>Next</span></a>
<div id="PhotoContainer"><img id="Photo" src="images/7sm.gif" alt="" width="50" height="50" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</body>
</html>
echo '<script type="text/javascript">
function openwindow(adresse)
{
viewer = window.open(adresse,"viewer","width=800,height=600,scrollbars=no,status=no");
viewer.focus();
</script>';
Additions:
''Right now I'm working to improve this action so it doesn't need to open a seperate window.''
''See a new version in beta in my [[https://yodahome.de/wiki/Sandbox Sandbox]]''
''See a new version in beta in my [[https://yodahome.de/wiki/Sandbox Sandbox]]''
Additions:
All in all there should these files new on your wikka installation:
Deletions:
Additions:
I've created a [[http://yodahome.de/home/slideshowgallery.zip handy zip file]] where all files should be included. Of course you also need pictures located in some separate directory.
The reason for putting some of the code in another file named grafx.php is that this way the necessary functions are included only once even if you include the action two or more times and so the functions don't bother each other. There's probably even a better or more object-oriented way to do that so feel free to improve it and post your changes.
The reason for putting some of the code in another file named grafx.php is that this way the necessary functions are included only once even if you include the action two or more times and so the functions don't bother each other. There's probably even a better or more object-oriented way to do that so feel free to improve it and post your changes.
Deletions:
Additions:
This should work in any Browser with basic ""JavaScript"". It's been tested in Mozilla Firefox 1.5, Internet Explorer 6 and 7 (beta), Opera 8 Konqueror 3.5 and I think someone even tried it in Safari (probably latest version as of March 2006).
On Opera 9 Beta the switches at the sides to go forward and backward do not appear. Apart from that it works. Any further experiences are much appreciated.
$output .= "<td><a style=\"border:0px;\" href=\"./actions/slideshow.php?path=../$dir#$counter\" onclick=\"openwindow(this.href); return false\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
echo "That directory ($dir) does not exists (or it could be a file!)";
function openwindow(adresse)
viewer = window.open(adresse,"viewer","width=800,height=600,scrollbars=no,status=no");
viewer.focus();
On Opera 9 Beta the switches at the sides to go forward and backward do not appear. Apart from that it works. Any further experiences are much appreciated.
$output .= "<td><a style=\"border:0px;\" href=\"./actions/slideshow.php?path=../$dir#$counter\" onclick=\"openwindow(this.href); return false\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
echo "That directory ($dir) does not exists (or it could be a file!)";
function openwindow(adresse)
viewer = window.open(adresse,"viewer","width=800,height=600,scrollbars=no,status=no");
viewer.focus();
Deletions:
$imageref = "openwindow('$dir','$counter')";
$output .= "<td><a style=\"border:0px;\" href=\"javascript:$imageref\"><img src=\"$thumbdir/$thumbname\" border=\"0px\" style=\"border : 0px;\"/></a></td>\n";
function openwindow(path,id)
var url = "./actions/slideshow.php?path=."+ path + "/#" + id;
viewer = window.open(url,"Slideshow Viewer","width=800,height=600,scrollbars=no,status=no");
Additions:
This should work in any Browser with basic ""JavaScript"". It's been tested in Mozilla Firefox 1.5, Internet Explorer 6, Opera 8, Konqueror
<body bgcolor="#FFFFFF" >
As usual, if you encounter any errors during usage or by reading the code please let me know.
<body bgcolor="#FFFFFF" >
As usual, if you encounter any errors during usage or by reading the code please let me know.
Deletions:
Additions:
ajax-slideshowSmall.css (you might wanna place this elsewhere, just change the path in slideshow.php)
