PDA

View Full Version : PHP Photo Album + Lightbox V.2 HREF HELP!!


HthrT
02-09-2007, 09:46 AM
1) Script Title: Lightbox image viewer 2.0 and PHP Photo Album script

2) Script URL (on DD): Lightbox V.2 (http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm) and PHP Photo Album (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm)

3) Describe problem:
I know this forum has dissected this combination in a number of posts, and I've gotten it to work, except that I can't figure out how to make the Lightbox script create href links with the PHP script.:confused:

I must be truly stupid because no one else seems to have a problem understanding this, namely:
Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.

Step 2: Create your "thumbnail" image links, for example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image. The "href" attribute obviously should contain the path to the enlarged image.

LightBox version 2 adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case. Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.

I don't see how that applys to my PHP layout!? :confused: :confused:
So, although I get beautiful Lightbox effects enlargements I can not scroll through the Prev and Next options or add Captions, in fact the 'Prev' 'Nav' and Captions don't even appear (I guess because the script does't see any connections).:mad:

I've gotten the idea that this has something to do with the 'gallery array'
If someone could please show me how to make this connection I would be so glad to learn!

my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="ahaendel.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anitra Haendel</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div id="imagearea"></div>
<script src="http://www.heathertroy.net/anitrahaendel/images/gallery/vincents/getpics.php" type="text/javascript"></script>

<script type="text/javascript">

/***********************************************
* PHP Photo Album script- &#169; 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="4x6" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://www.heathertroy.net/anitrahaendel/images/gallery/vincents/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"]

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[0, ""]

//Sort images by date? ("asc", "desc", or "")
//"desc" for example causes the newest images to show up first in the gallery
//"" disables this feature, so images are sorted by file name (default)
var gsortorder="desc"

//By default, each image hyperlinks to itself.
//However, if you wish them to link to larger versions of themselves
//Specify the directory in which the larger images are located
//The file names of these large images should mirror those of the original
//Enter a blank string ("") to disable this option
var targetlinkdir="http://www.heathertroy.net/anitrahaendel/images/gallery/vincents/enlarged/"

/////No need to edit beyond here///////////////////

function sortbydate(a, b){ //Sort images function
if (gsortorder=="asc") //sort by file date: older to newer
return new Date(a[1])-new Date(b[1])
else if (gsortorder=="desc") //sort by file date: newer to older
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+'" rel="lightbox">'
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"
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" />')
}

function popuplinkfunc(imgsrc){
document.getElementById("imagearea").innerHTML='<img src="'+imgsrc+'"/>'
return false
}

</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+')\"></a> ')
document.getElementById("navlink1").className="current"
</script>
</div></td>
</tr>
</table>
</body>
</html>


PLEASE HELP, it's so nice of everyone to share their collective wisdom for those of us still learning. I hope I've made my problem clear.

Thanks in Advance, Heather
jscheuer1
02-09-2007, 03:06 PM
You need more modifications, as I think you've guessed. In the function buildimage(i):


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox[roadtrip]">'
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
}

Just that much will get you Prev and Next for the images whose thumbs are visible. If you want them all included, both lightbox.js and the album script need further modification. In lightbox.js, find:


// -----------------------------------------------------------------------------------

//
// Extending built-in Array object
// - array.removeDuplicates()
// - array.empty()
//
Array.prototype.removeDuplicates = function () {
for(i = 1; i < this.length; i++){
if(this[i][0] == this[i-1][0]){
this.splice(i,1);
}
}
}

// -----------------------------------------------------------------------------------

Upgrade it to:


// -----------------------------------------------------------------------------------

//
// Extending built-in Array object
// - array.removeDuplicates()
// - array.empty()
//
Array.prototype.removeDuplicates = function () {
for(i = 0; i < this.length; i++){
for (var i_tem = 0; i_tem < this.length; i_tem++)
if(this[i][0] == this[i_tem][0]&&i!==i_tem){
this.splice(i_tem,1);
}
}
}

// -----------------------------------------------------------------------------------

And in the album script add:


document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[roadtrip]"></a>');
document.write('</div>');

Use the same bracketed name (rel="lightbox[roadtrip]") as you did in the function buildimage(i).

Here's a good place to add it:


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" />')
}
document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[roadtrip]"></a>');
document.write('</div>');

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

</script>
HthrT
02-22-2007, 03:19 PM
Many thanks John!

I had to move onto another project in the mean time but I will come back to your suggestions and post how it worked out.
HthrT
05-19-2007, 03:40 AM
Thank you for taking the time to explain that John! I gave up on the two script process I was attempting and streamlined, you can see my results here (http://www.tzirel.com/stills.html).

I attempted to utilize your code suggestions but didn't see the results I needed, namely a simple adjustment of the Dynamic Drive PHP Photo Album script (http://dynamicdrive.com/dynamicindex4/php-photoalbum.htm) to create a '<Prev' and 'Next>' scrolling function.

Is this possible with this script? I really like the Php folders. Can you explain how to adjust this script to allow for a clickable previous and next option (instead of just the thumbnails)?

Thank you so much for revisiting this! :confused:
jscheuer1
05-19-2007, 09:56 PM
I'm not sure what you want. PHP Photo Album has:

Page1 Page2 Page3

links. These can be replaced with:

Next Previous

links. These could also be next/previous buttons or images. Is that what you are talking about?
HthrT
05-21-2007, 01:56 AM
re: PHP Photo Album has: Page1 Page2 Page3 links. These can be replaced with: Next Previous links. Is that what you are talking about?

Yes, but I don't understand how to make it work that way?

Ideally I want the 'Next' 'Previous' function to shuffle from one enlarged php image to the next enlarged php image, not the thumbnails page. (Does this make sense?) Is there something in the script I need to change or something you can explain to me in setting that up? I don't understand how to make the script, as it stands now Page 1, Page 2, Page 3, navigate between enlarged images and not thumbnail arrangements.

Also, is it possible to have both thumbnail arrangements and Next Previous button navigation?

Thank you for helping me understand, John.
Heather
jscheuer1
05-22-2007, 05:46 AM
Sounds like you just want an alternate way of changing the displayed images. These functions will do the trick:


<script type="text/javascript">
function prev(){
buildimage.arNum=buildimage.arNum? buildimage.arNum : 0;
buildimage.arNum=buildimage.arNum>0? buildimage.arNum-1 : galleryarray.length-1;
document.getElementById('imagearea').innerHTML='<img src="gallery/stills_enlarged/'+galleryarray[buildimage.arNum][0]+'"/>';
}
function next(){
buildimage.arNum=buildimage.arNum? buildimage.arNum : 0;
buildimage.arNum=buildimage.arNum+1<galleryarray.length? buildimage.arNum+1 : 0;
document.getElementById('imagearea').innerHTML='<img src="gallery/stills_enlarged/'+galleryarray[buildimage.arNum][0]+'"/>';
}
</script>

You can put them just before or just after the php album script. You will also need to make a change to it here:


var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="buildimage.arNum='+i+';return popuplinkfunc(this)">'

Once you've done those two things, you can have buttons:


<input type="button" value="&lt;" onclick="prev()"> <input type="button" value="&gt" onclick="next()">

or links:


<a href="#" onclick="prev();return false;">Previous</a> <a href="#" onclick="next();return false;">Next</a>

These may be placed wherever you like on the page. Images may be substituted for the text.
HthrT
05-22-2007, 07:28 PM
John!

John it works!! Oh hallelujah! Oh happy day!
Thank you for being so clever and generous.

Heather
site (http://www.tzirel.com/stills.html):)