PDA

View Full Version : Need to combine two scripts



ethereal
03-24-2006, 03:42 AM
Hey all,

First, working with these two scripts:
PHP Photo Album script
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
Lightbox image viewer
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

I want to use the first script to create the gallery and the second to view the image. I don't really know js much at all so if someone could help me figure out how to combine them I would be VERY grateful! :confused:

Thanks in advance,

jscheuer1
03-24-2006, 04:16 AM
There was an earlier version of the PHP Gallery that used an array to set the images. I had already combined it with the lightbox script some time ago. Hopefully, they are similar enough that you can take it from there:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
width: 100px;
height: 135px;
}

.slideshow img{ /*Change "auto" below to a number (ie: 200px) to hard code dimensions of album images*/
width: 70px;
height: 112px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<script type="text/javascript">

/***********************************************
* Photo Album script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var dimension="2x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc

//Specify images:
//galleryarray[x]=["path_to_image", "optional_title_attribute", "optional_text_description", "optional_link"]
var galleryarray=new Array()
galleryarray[0]=["../thumb2/photo1.jpg", "optional title", "optional description", "../thumb2/photo1.jpg"]
galleryarray[1]=["../thumb2/photo2.jpg", "optional title", "optional description", "../thumb2/photo2.jpg"]
galleryarray[2]=["../thumb2/photo3.jpg", "optional title", "optional description", "../thumb2/photo3.jpg"]
galleryarray[3]=["../thumb2/photo4.jpg", "optional title", "optional description", "../thumb2/photo4.jpg"]
galleryarray[4]=["../thumb2/photo5.jpg", "optional title", "optional description", "../thumb2/photo5.jpg"]
galleryarray[5]=["../thumb2/photo6.jpg", "optional title", "optional description", "../thumb2/photo6.jpg"]
galleryarray[6]=["../thumb2/photo7.jpg", "optional title", "optional description", "../thumb2/photo7.jpg"]

var href_target="_new" //Enter target attribute of links, if applicable

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

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
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"
initLightbox();
}

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" />')
}

</script>

<!--Below HTML code refers to the navigational links for the gallery-->
<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>

I don't have access to a PHP enabled server for testing purposes though one of my paying accounts is so enabled but, I wouldn't want to test on their dime. You should be able to just drop in the code for generating the gallery array from the newer script along with the php link from it into the above in place of the hard coded gallery array.

ethereal
03-24-2006, 04:42 AM
There was an earlier version of the PHP Gallery that used an array to set the images. I had already combined it with the lightbox script some time ago. Hopefully, they are similar enough that you can take it from there:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
width: 100px;
height: 135px;
}

.slideshow img{ /*Change "auto" below to a number (ie: 200px) to hard code dimensions of album images*/
width: 70px;
height: 112px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<script type="text/javascript">

/***********************************************
* Photo Album script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var dimension="2x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc

//Specify images:
//galleryarray[x]=["path_to_image", "optional_title_attribute", "optional_text_description", "optional_link"]
var galleryarray=new Array()
galleryarray[0]=["../thumb2/photo1.jpg", "optional title", "optional description", "../thumb2/photo1.jpg"]
galleryarray[1]=["../thumb2/photo2.jpg", "optional title", "optional description", "../thumb2/photo2.jpg"]
galleryarray[2]=["../thumb2/photo3.jpg", "optional title", "optional description", "../thumb2/photo3.jpg"]
galleryarray[3]=["../thumb2/photo4.jpg", "optional title", "optional description", "../thumb2/photo4.jpg"]
galleryarray[4]=["../thumb2/photo5.jpg", "optional title", "optional description", "../thumb2/photo5.jpg"]
galleryarray[5]=["../thumb2/photo6.jpg", "optional title", "optional description", "../thumb2/photo6.jpg"]
galleryarray[6]=["../thumb2/photo7.jpg", "optional title", "optional description", "../thumb2/photo7.jpg"]

var href_target="_new" //Enter target attribute of links, if applicable

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

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
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"
initLightbox();
}

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" />')
}

</script>

<!--Below HTML code refers to the navigational links for the gallery-->
<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>

I don't have access to a PHP enabled server for testing purposes though one of my paying accounts is so enabled but, I wouldn't want to test on their dime. You should be able to just drop in the code for generating the gallery array from the newer script along with the php link from it into the above in place of the hard coded gallery array.

I appreciate the quick response! However...

I am doing this in a frame and don't want to specify each image (from what I can tell that is what the gallery array in your code wants) additionally, the display for the lightbox is not at all like the demo. Click here: http://miraclescons.10e.net/inksplash/ and then click on the "gallery" button, then click on the "Fernie's Tattoos" link. Then just click on any photo to see the behavior I was able to get BEFORE your reply. I am concerned that just replacing the current php photo gallery code with what you gave won't behave the same. Let me know what you think.

Thanks. :o