Remove Page Grouping of Thumbs

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

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"?

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.

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

Code:

---

#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:

Code:

---

#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.

Quote:

---

Originally Posted by jscheuer1

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:

Code:

---

<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".

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 :)

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

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):

Code:

---

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.

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. :)

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):

Code:

---

<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:

Code:

---

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

---

to:

Code:

---

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;
}

---

Dear John: I wrote you yesterday but fell asleep on the sofa before I posted it, I guess. Wanted to tell you that I finally was able to get back to the gallery site and did exactly what you said and it worked perfectly! I LOVE it!!! I love how you matched the background color too. So I'm working on applying it to my other gallery site. I'll show you when I'm done. Thanks a million!!!

Aloha, kuau :)

For my other gallery site, I use a custom template & variables to create the page with the slideshow and the thumbnails. I was planning to add a field to the database to hold the number of rows in the thumbs array because it varies from one artist to the next. It suddenly occurred to me that perhaps the getpics.php script may already calculate how many files are in the folder in order to do the paging and, if so, could I use that total to calculate the number of rows on the fly, ie. 5 x $rows? Is it possible to pass a variable value from javascript to php? Just wondering. Thanks, kuau :)

I suppose that it might be possible. But there is the issue of PHP (the server actually) generally needing to know what the values are when the page is served. I think getpics could be modified to make a server variable that could then be used here like:

PHP Code:

---

var dimension="5x<?php=$_rows?>"

---

Not sure If I have my PHP syntax right. The bigger issue is whether the $_rows would be ready in time or not. Since this is already a javascript though, I'd try passing the value directly (worked here in local testing):

Code:

---

var dimension="5x"+Math.ceil(galleryarray.length/5);

---

Also (unrelated to this particular question), if you are going to use this for various galleries where the path might be different than:

Code:

---

/img/lrg/

---

and on pages that might have other scripts than we've already covered, this (be sure to use the added semicolon on the targetlinkdr line):

Code:

---

        . . . iptionprefix=[0, ""]
        var gsortorder=""
        var targetlinkdir="http://www.billmyrickartist.com/img/lg/";  //large gallery
        (function(){       
        for (var i = galleryarray.length-1, j ; i > -1 ; --i)
        for (j = slides.length-1 ; j > -1 ; --j)
        if(slides[j][0].replace(/^.*\//,'') == galleryarray[i][0])
        galleryarray[i][1]=slides[j][1];       
        })();
</script>

---

would be better than:

Code:

---

        . . . iptionprefix=[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>

---

PHP Code:

---

...
var dimension="5x<?php=$_rows?>"
...

---

I'd use:

PHP Code:

---

var dimension="5x<?php echo $_rows; ?>"

---

Just in case people don't have the short_tags enabled on their server.

Dear John: I didn't get an email alert so didn't find your response until today... Happy Thanksgiving by the way!

I love to do things in the most efficient way possible and you have certainly accomplished that for me in only 34 characters!! I would have had to manually count all the files for 53 artists, divide by 5 and store the values in a database table to be retrieved using php, and update the values every time I added files. This is a fabulous solution that solves my 3" gap problem in an elegant way. Thank you so much!!! Here is one of the pages so you can see how much you have contributed to my design...

http://www.sargentsfineart.com/artist/auction.php

Mahalo plenty!!! kuau :)

On second thought, forget that page -- it won't work properly until I get all the images uploaded. This is one of the pages that works perfectly already...

http://www.sargentsfineart.com/artist/wishard.php