Jump to content

From php array to js


Fenhopi

Recommended Posts

Hi, I retrieve the pictures I want to display through a php loop that stores them in an array. What I want to do is to get those array values to get recognized by my js preloading script. Any tips how I'd do that?

Here's my code (The relevant part is at the top):

<html>
<head>
<title>Preload Image Page</title>

<?php
$Get_pictures = "SELECT bilde FROM beis";
$Connect_bilde = $database->query($Get_pictures);
while($rad = mysql_fetch_array($Connect_bilde)){
$my_array[] = $rad['bilde'];
}
?>
<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("<? echo $my_array; ?>","http://yourdomain.com/test2.gif")

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array() 
dots[0] = new Image(1,1)
dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
for (i = 0; i < yourImages.length; i++) { 
	preImages[i] = new Image()
	preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) { 
	loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) { 
	location.replace(locationAfterPreload)
	return
}
for (i = 0; i <= preImages.length; i++) {
	if (loaded[i] == false && preImages[i].complete) {
		loaded[i] = true
		eval("document.img" + currCount + ".src=dots[1].src")
		currCount++
	}
}
timerID = setTimeout("checkLoad()",10) 
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
	preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a>  |  <a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

Link to comment
Share on other sites

Thanks for replying! Okay, I tried this, with no success..

<?
include("include/session.php");
?>
<html>
<head>
<title>Preload Image Page</title>


<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
	<?php
$Get_pictures = "SELECT bilde FROM beis";
$Connect_bilde = $database->query($Get_pictures);
while($rad = mysql_fetch_array($Connect_bilde)){
	$my_array[] = $rad['bilde'];
}
$nummer = count($my_array);
echo "var yourImages = new Array(" . $nummer . ");";
$stab = "0";
while($stab < $nummer){
	echo " yourImages[".$stab."]=".$my_array[$stab]."\n"; 
	$stab++;
}

?>

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array() 
dots[0] = new Image(1,1)
dots[0].src = "images/black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "images/blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
for (i = 0; i < yourImages.length; i++) { 
	preImages[i] = new Image()
	preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) { 
	loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) { 
	location.replace(locationAfterPreload)
	return
}
for (i = 0; i <= preImages.length; i++) {
	if (loaded[i] == false && preImages[i].complete) {
		loaded[i] = true
		eval("document.img" + currCount + ".src=dots[1].src")
		currCount++
	}
}
timerID = setTimeout("checkLoad()",10) 
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
	preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a>  |  <a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

Link to comment
Share on other sites

You need to understand that PHP script is executed by the server but Javascript is executed by the client browser. So it's like if I asked you to take an array from my computer and pass it to your computer, it doesn't work.

 

However you could build the Javascript with PHP so the variables are passed to the client as was already suggested. You would actually echo out the code:

 

<?php echo "<script language = 'Javascript1.1'>";
var var1 = " . $phpVariable . ";";
Do things with variable here
echo "</script>";
?>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.