Menu
I’m using netbeans 8.0.1 and the php ver is 5.3
I have a php file:
[CODE]<!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”
xml:lang=”en”
><head>
<meta
http-equiv=”Content-Type”
content=”text/html; charset=utf-8″
/>
<meta
http-equiv=”Content-Language”
content=”en”
/>
<meta
name=”viewport”
content=”width=device-width; height=device-height; initial-scale=1.0″
/>
<link
type=”text/css”
rel=”stylesheet”
href=”theme/screen.css”
media=”screen,projection,tv”
/>
<title>
Slidehow Demo – – Site Title
</title>
</head><body>
<noscript>
<p>
This slideshow requires JavaScript for full functionality. Please either enable it or use a browser capable of it for the “proper” experience. Below are the images that would have been shown in said slideshow.
</p>
</noscript>
<div id=”slideShow”>
<img src=”Images/radar000025.Gif” alt=”slide” />
<img src=”Images/radar000203.Gif” alt=”slide” />
[CODE]<?php
error_reporting(E_ALL);
ini_set(‘display_errors’, ‘1’);
//$allowed_types=”(.jpg$)|(.png$)|(.jpeg$)|(.gif$) |(.Gif$)”;
$allowed_types = array(‘png’,’jpg’,’jpeg’,’gif’);
$imageDir = ‘files/radar-simulation-files’;
/*
Assumes this .php is being run from the http root on the same
domain as the desired image files.
*/
$handle = opendir($imageDir);
while (($imgPath = readdir($handle)) !== false)
if ( in_array(strtolower(pathinfo($imgPath, PATHINFO_EXTENSION)), $allowed_types ))
echo ‘<img src=”‘, $imageDir, ‘/’, $imgPath, ‘” alt=”slide” />’;
closedir($handle);
?>
I used this to add the images to array variable when the images was on a server directory not local and also when all the code was on the same file.
But now i seperated the code to some files. I have another file javascript file and i want to pass the array variable from the php file to the javascript file and use it on the javascript file.
How can i add the images in the php file to array variable in both cases when the images are on local/server directories ?
Then how to pass the variable and use it in the javascript file ?
This is the javascript file code:
[CODE](function(d, w) {
// user defines
var
swapHours = 0,
swapMinutes = 0,
swapSeconds = 5,
swapTotal = (swapHours * 60 + swapMinutes) * 60 + swapSeconds,
loopSlideShow = true;
// some handy helper functions
function classExists(e, className) {
return RegExp(‘(\s|^)’ + className + ‘(\s|$)’).test(e.className);
}
function classAdd(e, className) {
if (classExists(e, className)) return false;
e.className += (e.className ? ‘ ‘ : ”) + className;
return true;
}
function classRemove(e, className) {
if (!classExists(e, className)) return false;
e.className = e.className.replace(
new RegExp(‘(\s|^)’ + className + ‘(\s|$)’), ‘ ‘
) . replace(/^s+|s+$/g,”);
return true;
}
function nodeFirst(e) {
e = e.firstChild;
while (e && e.nodeType != 1) e = e.nextSibling;
return e;
}
function nodeLast(e) {
e = e.lastChild;
while (e && e.nodeType != 1) e = e.previousSibling;
return e;
}
function nodeNext(e) {
while (e = e.nextSibling) if (e.nodeType == 1) return e;
return null;
}
function nodePrev(e) {
while (e = e.previousSibling) if (e.nodeType == 1) return e;
return null;
}
function nodeFlush(e) {
while (e.firstChild) e.removeChild(e.firstChild);
}
function nodeReplace(e, newNode) {
nodeFlush(e);
e.appendChild(
typeof newNode == ‘object’ ? newNode : d.createTextNode(newNode)
);
}
function make(tagName, child, attribs, parent) {
var e = d.createElement(tagName);
if (child) e.appendChild(
typeof child == ‘object’ ? child : d.createTextNode(child)
);
if (attribs) for (var i in attribs) e[i] = attribs[i];
if (parent) parent.appendChild(e);
return e;
}
function prevent(e, deselect) {
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
if (deselect) {
if (w.getSelection) w.getSelection().removeAllRanges();
if (d.selection) d.selection.empty();
}
}
function controlEvent(e, handler) {
handler();
e = e || window.event;
prevent(e, true);
}
function clockFormat(value) {
value = String(Math.floor(value));
while (value.length < 2) value = ‘0’ + value;
return value;
}
// slideShow functions
function showCounter() {
nodeReplace(slideCounter,
clockFormat(swapCounter / 3600) + ‘:’ +
clockFormat((swapCounter / 60) % 60) + ‘:’ +
clockFormat(swapCounter % 60)
);
}
function resetCounter() {
swapCounter = swapTotal;
showCounter();
}
function makeSlide(newSlide) {
classRemove(currentSlide, ‘ss_show’);
currentSlide = newSlide;
classAdd(currentSlide, ‘ss_show’);
}
function nextSlide() {
resetCounter();
var newSlide = nodeNext(currentSlide);
if (newSlide) makeSlide(newSlide);
else if (loopSlideShow) makeSlide(firstSlide);
}
function prevSlide() {
resetCounter();
var newSlide = nodePrev(currentSlide);
if (newSlide) makeSlide(newSlide);
else if (loopSlideShow) makeSlide(lastSlide);
}
function slideUpdate() {
if (swapCounter–) showCounter(); else nextSlide();
}
function startSlideShow() {
resetCounter();
setInterval(slideUpdate, 1000);
}
// slideShow setup
var
slideShow = d.getElementById(‘slideShow’),
slideCounter = make(‘div’, false, { id : ‘slideCounter’ }),
slideControls = make(‘div’, false, { id : ‘slideControls’ }),
slidePrev = make(‘a’, ‘Previous Slide’, {
onclick : function(e) { controlEvent(e, prevSlide); },
className : ‘previous’,
href : ‘#’
}, slideControls),
slideNext = make(‘a’, ‘Next Slide’, {
onclick : function(e) { controlEvent(e, nextSlide); },
className : ‘next’,
href : ‘#’
}, slideControls),
firstSlide = nodeFirst(slideShow),
lastSlide = nodeLast(slideShow),
currentSlide = firstSlide,
swapCounter;
slideShow.parentNode.insertBefore(slideCounter, slideShow);
slideShow.parentNode.insertBefore(slideControls, slideShow.nextSibling);
classAdd(slideShow, ‘ss_scripted’);
classAdd(currentSlide, ‘ss_show’);
// wait for onload to actually start the countdown
if (w.addEventListener) w.addEventListener(‘load’, startSlideShow, false);
else w.attachEvent(‘onload’, startSlideShow);
})(document, window);
And last i have a css file:
[CODE]/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,dl,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
@media (max-width:600px) {
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
body {
font:normal 85%/150% “segoe ui”,helvetica,sans-serif;
}
.ss_scripted img {
display:none;
}
.ss_scripted .ss_show {
display:block;
}
#slideShow img {
margin:0 auto;
}
#slideCounter {
text-align:center;
padding:0.25em 1em;
font:bold 200%/120% consolas,courier,monospace;
color:#C00;
}
#slideControls {
width:512px;
padding:0.5em 0;
margin:0 auto;
}
#slideControls a {
float:left;
padding:0.25em 0.6em;
text-decoration:none;
color:#000;
background:#EEE;
border:2px solid #666;
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
-webkit-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
-moz-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
}
#slideControls a:active,
#slideControls a:focus,
#slideControls a:hover {
background:#FFF;
}
#slideControls .next {
float:right;
What i want to do is if the images file on local server host(xampp) or on a server host(ipage.com) to add the images to array variable in the php file.
Then to use this array variable in the other file/s to make the slideshow.
And another question is if i want to add another slide show like this one but seperated just one more slideshow how should i do it ? All new files or using same files ?
Thank you.