Remove Page Grouping of Thumbs

[kuau]

1) Script Title: PHP Photo Album script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: I would like to remove the part of the javascirpt code that formats the thumbnails into separate pages because I want all the thumbnail images to appear on one page. I can get it to display all images on one page by setting 5 x 20 but it leaves a 3+ inch gap between the thumbs and my footer. I have already removed the css and js in the html, but could someone please tell me which lines in the javascript file to comment out? I don't want to break it!

Thanks very much, kuau

[ddadmin]

Even if you want everything to just appear on one page, the script still needs to know how many across and down (ie: 5 x 20). That's why at a glance it seems best to just leave the script as is, and specify the dimensions like you did so only one page is needed. Do you have a URL to the problem page showing the "3+ inch gap"?

[kuau]

Here's the gap. I don't have 20 rows yet but I will, and the gap seems to increase the more rows you have.

http://www.billmyrickartist.com/html/art.html

Thanks for your help.

[jscheuer1]

For your slide show, you might like to add this style:

#master0 div {
background:url(http://www.billmyrickartist.com/img/gr/bg-ocean-gradient.jpg) 0 -123px;
}

For the footer, if all else fails, you could do a style like so:

#footer {
margin-top:-190px
}

But after examining your generated source code, that gap looks like it's the empty 15 rows. Once you actually have 20 rows, it should disappear.

[ddadmin]

But after examining your generated source code, that gap looks like it's the empty 15 rows. Once you actually have 20 rows, it should disappear.

John is right. Looking at your generated source, there are a lot of:

<br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;"><br style="clear: left;">

added to the end of the Photo gallery, most likely caused by the fact that you've specified "5x20" for the dimensions, yet do not have 100 images in your gallery. Try setting it so there's just enough cols and rows to accommodate all your images. For example, if you have 28 images in your gallery, set it to "5x6".

[kuau]

OK, that seems to be what it is. Thanks very much.

I also figured out the -123px (duh!). Thanks a million. I love your scripts... the internet would be boring without you guys!!

Aloha, kuau

[kuau]

Is there any way to place the descriptions of the photos that I've typed into the Swiss Army javascript file, under the pop-up large photos you see when you click on a thumbnail in the PHP Photo Album script? Or, if that is not possible, is there any way to make a new page open when you click the thumbnails, rather than a pop-up window?

Thanks very much. Aloha, kuau

[jscheuer1]

Yes, but let's go in stages. First you would need to sync up the two arrays, there are various ways this could be done, and even before we consider that, you need to fix a typo in the slides array (from your source):

slides[21] = ["/img/lg/lion3.jpg", "Lion III - 24 x 20 Original Oil on Canvas"];
slides[22] = ["/img/lg/mother-maui.jpg", "Mother Maui - 30 x 24 Original Oil on Canvas"];
slides[22] = ["/img/lg/spirit.jpg", "Spirit - 46 x 16 Original Oil on Canvas"];

That second (red) 22 should be 23.

Now, how to sync the slides array to the galleryarray array? One way would be to simply sort the slides array in the same manner as you are sorting the galleryarray. This would result in the order of the images in the slide show being the same as the order of the thumbnails on the page. Would this be OK? If it's undesirable, we could create a new third array or perhaps just update the gallery array with the descriptions, which brings up another consideration. You will notice that if you hover over an image in the slide show, you see its description. If you hover over a thumbnail, you get the filename and some date information which probably just reflects when the image was uploaded to the server. Would it be OK to change this to the description. If so, and the order can be the same as in the slide show, we could maybe get by with a single array. If the order is identical, should it be the current order of the slide show or the current order of the thumbnails?

Once we get all that figured out, we can alter the function which displays the larger images from the thumbnails to write a page for its pop up using the image and its synced up description, but exactly how that is done will depend upon how we are syncing.

[kuau]

I fixed the typo (thanks). I'll explain my rationale so you can see what my goal is. I sort the slideshow according to what the picture is, ie. I group like images because it is much more impressive to the viewer to see an artist's work like this, without jumping all over the place. The thumbnails are sorted alphabetically by painting title so that the consultants can quickly locate the piece the client wants to see. So the slideshow is for viewing pleasure while a prospective client is exploring an artist, and the thumbs are for practical purposes - to locate the art quickly when a decision has been made. So if I sort them both the same way, I lose one or the other effect. But if I had to choose, it would have to be the alphabetical method because locating the art quickly is the priority.

Hovering over the thumbs I would love to see the description (upload date is irrelevant), or just the filename (which I purposely named=title); would that confuse the getpics.php file which uses the filenames to sort and find the thumbs? I hope I at least gave you a better idea of what I'm trying to accomplish. I *really* appreciate your help.

[jscheuer1]

I thought it might be something like that, didn't really know, but figured it could be any of the possible options I mentioned, that's why I asked.

OK, here's what you do. We are going to need a little more height for the descriptions in the pop up, and we will need to clone the descriptions from the slides array onto the galleryarray (from your on page script, additions/changes red):

<script type="text/javascript">
	/***********************************************
	* PHP Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
	* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
	***********************************************/
	var dimension="5x5" //number of images across and down, such as 4x2, 3x1 etc
	var imagepath="/img/th/" //Absolute path to thumbnail image directory. Include trailing slash (/)
	var href_target="new" //Enter target attribute of links, if applicable
	var popupsetting=[1, "width=669px, height=691px, scrollbars, resizable"]
	var descriptionprefix=[0, ""]
	var gsortorder=""
	var targetlinkdir="http://www.billmyrickartist.com/img/lg/"  //large gallery
	for (var i = galleryarray.length-1, j ; i > -1 ; --i)
	for (j = slides.length-1 ; j > -1 ; --j)
	if(slides[j][0].replace(/\/img\/lg\//,'') == galleryarray[i][0])
	galleryarray[i][1]=slides[j][1];
</script>

And in your external dd-thumbnails.js script change the existing:

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

to:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var desc='';
for (var i = galleryarray.length-1, lookup = imgsrc.href.replace(targetlinkdir,'') ; i > -1 ; --i)
if(galleryarray[i][0]==lookup)
desc=galleryarray[i][1];
var popwin=open('', "popwin", popupsetting[1]);
popwin.document.write('<title>'+desc+
'<\/title><body style="margin:0;padding:0;font:85% sans-serif;text-align:'+
'center;overflow:auto;background-color:#0d576d;color:white;"><img title="'+
desc+'" alt="Larger Image" style="margin:2px 0;" src="'+imgsrc.href+'"><br>'+desc);
popwin.document.close();
popwin.focus();
return false;
}
else
return true;
}