Php image gallery with java script

Question

prawin@123 0 Light Poster

17 Years Ago

Hi I am new bee to JS and PHP,
i have a code to display the images from directory in the path
C:\wamp\www\prawin\new\locations\test\admin
But this code didnt works .
can any one help me.
My code is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script src="C:/wamp/www/prawin/new/locations/test/admin/getpics.php" type="text/javascript"></script>

<script type="text/javascript">


var dimension="3x2" 
var imagepath="C:/wamp/www/prawin/new/locations/test/admin/" 
var href_target="new" 


var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]


var descriptionprefix=[1, "Photo "]


var gsortorder="desc"


var targetlinkdir="C:/wamp/www/prawin/new/locations/test/admin/"


function sortbydate(a, b){ 
if (gsortorder=="asc") 
return new Date(a[1])-new Date(b[1])
else if (gsortorder=="desc")
return new Date(b[1])-new Date(a[1])
}

if (gsortorder=="asc" || gsortorder=="desc")
galleryarray.sort(sortbydate)

var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}

var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

</script>



<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div>
</body>
</html>

graphics:image javascript php

3 Contributors
4 Replies
129 Views
2 Months Discussion Span
Latest Post 17 Years Ago Latest Post by mysoogal

Dani AI

Generated 9 Months Ago

Quick recap: the root cause was that the browser could not load a server-side script via a raw filesystem path. As pointed out, the PHP file needs to be served by your webserver and referenced by a URL or a proper relative path. After that is fixed, the remaining issues are usually about the format of the data getpics.php returns, script-load order, sorting vs. date format, and safe display of filenames.

Make getpics.php produce clean, machine-friendly output. Two common approaches:

Serve a JSON endpoint and fetch it from the page (recommended).
Or have getpics.php emit valid JavaScript (set the correct Content-Type) so it defines the array before the main script runs.

Example (server-side JSON example — minimal idea):

<?php
header('Content-Type: application/json; charset=utf-8');
// build an array of objects: name, url, mtime (epoch ms)
echo json_encode($files);

Client-side: fetch the JSON, then build DOM nodes and use the filename value for captions or links. Keep the data attributes (data-url, data-name) so click handlers can read the media URL without embedding raw server paths in HTML.

Sorting and dates: send a numeric timestamp (milliseconds since epoch) or ISO 8601 timestamps. Relying on free-form date strings causes inconsistent JavaScript Date parsing across browsers. Sort numerically on the timestamp for reliable results.

Security and performance notes: never expose full filesystem paths in output; escape filenames when inserting into HTML to avoid XSS; generate and use thumbnails to cut bandwidth; filter by allowed extensions and check file permissions. For playing video links (as wants), prefer modern formats (MP4/H.264 or HLS) over FLV, and use a click handler that prevents default navigation and passes the media URL to the player API or an HTML5 <video> element.

These changes make the gallery robust and easier to maintain: serve data cleanly, parse it reliably on the client, and keep presentation and playback logic separate.

All 4 Replies

cwarn23 387 Occupation: Genius

17 Years Ago

Original Location
C:/wamp/www/prawin/new/locations/test/admin/getpics.php

Try replacing your locations to something like the following.

New Location possibilities
file://C:/wamp/www/prawin/new/locations/test/admin/getpics.php
http://localhost/prawin/new/locations/test/admin/getpics.php
http://localhost/new/locations/test/admin/getpics.php

Probably find that the browser just can't use the style path you used.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

prawin@123 0 Light Poster · Answer 1 · 2009-04-06T12:36:08+00:00

Awesome. it really works good. Thanks for ur solution MR.CWARN23 . nd more over i have another problem in that . In order to display the name of the images from the directory , What should i change in line var descriptionprefix=[1, "Photo "] where photo is the default name.
THE CODE DISPLAYS IMAGES WITH NAMES AS PHOTO 1, PHOTO 2

cwarn23 387 Occupation: Genius Team Colleague Featured Poster · Answer 2 · 2009-04-06T12:58:09+00:00

tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""

I'm kinda guessing here but I think if your replace the above line with the below it might solve the problem:

tempcontainer+=galleryarray[i][0];

mysoogal 0 Newbie Poster · Answer 3 · 2009-06-30T02:48:43+00:00

tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
I'm kinda guessing here but I think if your replace the above line with the below it might solve the problem:
tempcontainer+=galleryarray[i][0];

thank you very much cwarn23 you are real master :icon_biggrin:

i was also wondering what the poster was asking !

but i have a a more serious problem but not with the title rather with how to show video path and link where the title is.

here is pic what i mean

i need to somehow link the title to /htdoc/videos/example.flv where title is

im using this with hfs file server and mencoder ffmpeg, to auto encode and grab images. <a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)"> i would like to know why this isnt working <a href="#" onclick="+href_target+')">+imagecompletepath+</a> I'm planning all of this to use with the vlc player

http://www.revolunet.com/labo/code/VLCcontrols

the idea is that i want to have this script display thumb and video linked together and have the title enabled with the vlc javascript code and embed the vlc media player on top of the gallery, so when i click on image title it will play the flv. like that.

hope someone gets what im saying :p

thanks for help and i will be looking forward for anybodys help

Php image gallery with java script

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers