PDA

View Full Version : "Next" and "Prev" buttons in PHP photoalbum



Poontang
12-20-2010, 08:25 AM
1) Script Title: PHP Photo Album script v2.11


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

3) Describe problem:

Wow...this is just what I asked for a few years back here on DD!
A PHP album with a build in LightBox! :)

Now ... would it be possible to make a "Next" and "Previous" button on the pictures - while they are opened as a LightBox?
(I have all my images nomurous named, ie: 001.jpg, 002.jpg etc.)

Merry Christmas, y'all :)

jscheuer1
12-20-2010, 02:08 PM
The built in lightbox is very bare bones. To give it that functionality would be about like rewriting Ligntbox. Something which has already been done ad nauseam.

I have a number of mods for PHP Photo Album. Two of these would be of interest here. One uses a modified version of Lighbox, the other uses FancyBox. Both give the previous/next funtionality. The Lightbox one gives the familiar Lightbox layout for the larger image. Fancybox has a different layout, though could be tweaked to look like Lightbox, or to look just about any way you want.

So far my FancyBox mod of PHP only uses the default FancyBox layout.

To get an idea of the two scripts alone see:

http://fancybox.net/

and:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

The Lightbox mod has a "First Light" feature, which is optional, but some of its other modifications are required to work properly with PHP photo album. You cannot use any of the official Lightbox releases.

To use FancyBox, install it in the head as instructed on the FancyBox site. After that install the head files for PHP Photo. In PHP Photo's ddphpalbum.js remove the internal lightbox (everything after and including):


/////////Following is thumbnailviewer(), a plugin to PHP Photo Album for enlarging thumbnail images/////////////////

For the body part of PHP Photo use (substitute your own albumvar, two places):


<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
d.style.display = 'none'; tmpLink.rel = 'fancybox_' + cfg.groupName;
for(i; i < avil; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = base + avi[i][1];
lbLink.title = avi[i][2];
lbLink.tabindex = avi[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
lbLink = d.getElementsByTagName('a');
$(lbLink).fancybox();
this.onphotoclick = function(ref, idx){
var i = lbLink.length -1;
for (i; i > -1; --i){
if(lbLink[i].tabindex == idx){
$(lbLink[i]).click();
break;
}
}
};
};

new phpimagealbum({
albumvar: demopics, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,3],
sortby: ["file", "desc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'demopics'}); //takes optional object as argument, ex: {groupName: 'demopics', path: 'alternate_path_to_larger_images/'}
</script>

For Lightbox 204a, install as instructed in the head, followed by the head part of PHP Photo, remove the same section of code from the ddphpalbum.js script as for the FancyBox install above, use this as the in body for PHP Photo (same deal with the albumvar):


<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';
for(i; i < avil; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = base + avi[i][1];
lbLink.title = avi[i][2];
lbLink.tabindex = avi[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
lbLink = d.getElementsByTagName('a');
this.onphotoclick = function(ref, idx){
var i = lbLink.length -1;
for (i; i > -1; --i){
if(lbLink[i].tabindex == idx){
Lightbox.box.start(lbLink[i]);
break;
}
}
};
};

new phpimagealbum({
albumvar: catering, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,3],
sortby: ["file", "asc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>

Poontang
12-21-2010, 12:42 PM
Hey John!

That seems very promising!
I will go deep into it in these upcoming holliday-days :)

A whole lot of different kind of thanks!

Poontang
01-07-2011, 12:39 PM
Another Q to this brilliant PHP album:

It seems to load very slowly... Can I set it up to load thumps from a defferent folder?

jscheuer1
01-07-2011, 01:14 PM
No, but you can put the larger images in a different folder. See the last line in either of my scripts from my last post.

Poontang
01-07-2011, 04:26 PM
hmmmm.... I might need a little help here...
I'm still just a little, green guy trying this out ;)

Can I get you to make a nice little package with the files needed to play around with?

jscheuer1
01-07-2011, 05:06 PM
I'd rather just try to explain the situation. Here's how it works - The two lines I'm referring to are virtually identical:



}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}


The groupName isn't required unless you have other links on the page or other PHP galleries on the page that you want to use the same group name. If you want to use separate larger images, have the getalbumpics.php file in a folder with just the smaller thumbnails in it - say you have that setup as (from the PHP Photo Album script v2.11 demo page Step 1):


<script type="text/javascript" src="http://www.mysite.com/myimages/getalbumpics.php?id=myvacation"></script>

so mysite.com/myimages/ has only the thumbnails in it. Make another folder - say, mysite.com/mylargerimages/

In it put only the larger images. Give them each the exact same filename as the thumbnail they correspond to.

Then for the createHiddenLinks line use:


}).createHiddenLinks({path: 'http://www.mysite.com/mylargerimages/'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Poontang
01-07-2011, 07:19 PM
I very well understand you - and I will learn that much more this way!
But i'm throwen way off by now. First; by installing the LB v2.04 I can't figure out how to merge it with the PHP album.
- and I actually can't find the lines you refer to, to change...

Feel free to have a look at www.poontang.dk (NO sexual content - tho the name might sugest it)
Also, the site is in danish, so:
At the top-banner (flash) choose "SJOVE BILLEDER".

NOTICE: I only play around in the "Computer"-section.... so look there ;o)

Poontang
01-14-2011, 10:05 AM
No.... I can't get it to work - after trying everything all over today.

I think this is what confuses me:

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';
for(i; i < avil; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = base + avi[i][1];
lbLink.title = avi[i][2];
lbLink.tabindex = avi[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
lbLink = d.getElementsByTagName('a');
this.onphotoclick = function(ref, idx){
var i = lbLink.length -1;
for (i; i > -1; --i){
if(lbLink[i].tabindex == idx){
Lightbox.box.start(lbLink[i]);
break;
}
}
};
};

new phpimagealbum({
albumvar: catering, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,3],
sortby: ["file", "asc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>


MY WORKFILES (http://www.poontang.dk/test/PHP_LB.zip)

jscheuer1
01-15-2011, 11:31 AM
Here's a fixed version:

3715

Added this file:

closelabel.gif
Removed these files:

prototype.js
scriptaculous.js
Made changes to:


index.html - Switched to Google hosted scripts for prototype, scriptaculous, effects, and builder. Changed the on page call to the phpimagealbum() function.

ddphpalbum.js - removed:



<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';
for(i; i < avil; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = base + avi[i][1];
lbLink.title = avi[i][2];
lbLink.tabindex = avi[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
lbLink = d.getElementsByTagName('a');
this.onphotoclick = function(ref, idx){
var i = lbLink.length -1;
for (i; i > -1; --i){
if(lbLink[i].tabindex == idx){
Lightbox.box.start(lbLink[i]);
break;
}
}
};
};

new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,3],
sortby: ["file", "asc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'myvacation'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>

lightbox.js - Corrected paths to helper images:



LightboxOptions = Object.extend({
//
// Configuration
//
fileLoadingImage: 'loading.gif',
fileBottomNavCloseImage: 'closelabel.gif',
cookieForFirstLight: false, // use session only cookie for first light? (true/false)

overlayOpacity: 0.8, // controls transp . . .

But we still have no thumbnails. We are using the larger images as the thumbnails.

To fix that, you would make up a folder of the thumbnails - say:

poontang.dk/fun/animals/thumbnails

Make one thumbnail image for each of the larger images and put them in that folder. Give each the same name and date as the larger image it is for (PHP could be used to do this - either to make the thumbnails and date them, or just to date them, but I'm not sure of the details on that at the moment, other programs could be used for either, perhaps both. If you don't copy over the dates, your %d auto description will be off. You could use a different method for descriptions or no descriptions, or we could work out a way to carry the dates from the larger images folder via scripting at run time). Put your getalbumpics.php file in the thumbnail folder. Change this call on index.html as highlighted:


<script type="text/javascript" src="http://www.poontang.dk/fun/animals/thumbnails/getalbumpics.php?id=myvacation"></script>

Change this line (near the bottom of index.html) as highlighted:


}).createHiddenLinks({path: 'http://www.poontang.dk/fun/animals/', groupName: 'myvacation'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}

Poontang
01-16-2011, 03:49 AM
Wow! That was great!
I compared your files with mine - and I see I was way off....

I got everything working now - incl. the thump-part.

But....


Only as a test-site, with the containing index.htm as a stand-alone.
When I ad everything to the intended frameset, it doesn't work anymore...

What would cause that? The original PHP-album with the LightBox worked fine inside a frame-set...

jscheuer1
01-16-2011, 04:40 AM
Lightbox 2.04a will attempt to display in the parent frame. This is for iframes. It cannot display in the parent frame of a frameset, er - it can if frames are nested, but generally that's undesirable, and not the same effect as can be achieved when displaying in the parent of an iframe. It cannot display in the top frameset, which would be neat if it could, but it can't.

So to make a long story short, edit this configuration item in the lightbox.js file as highlighted:


LightboxOptions = Object.extend({
//
// Configuration
//
fileLoadingImage: 'loading.gif',
fileBottomNavCloseImage: 'closelabel.gif',
cookieForFirstLight: false, // use session only cookie for first light? (true/false)

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable

forceLocal: true, // set to true to force lightbox into a frame or iframe
// (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

startCallback: function(){}, // callback for ligthbox start
startCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

endCallback: function(){}, // callback for lightbox end
endCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"

// End Configuration -----------------------------------------------------------------------------------


The old file is likely to be cached, so refreshing the page or clearing the bowser's cache may be required. And since it's in a frameset, you may have to navigate to the page itself to get the old version out of cache.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Poontang
01-16-2011, 11:00 AM
I actually woke up this morning remembering seeing that line in the JS.

Thank's for all your help, John! I couldn't have done this on my own!

Now... can I center the generated list of thump-images - instead of having them left-aligned (default)?

That would make it possible for me to reduce the horizontal number of thumps by one, and still have a nice look to the site.

The reason I wanna do this, is the bug in Safari, Chrome and FF that makes the far right thump on every line jump down a line when opening the LightBox....

jscheuer1
01-16-2011, 07:08 PM
I'm not sure what you mean by a bug. Any browser whose viewport on that frame isn't wide enough to fit ten images will wrap however many of them that it has to. Also, in IE as well they appear to align to the left for me, they just don't seem to when there are 10 and they fit.

The reason they don't wrap in IE though is that even when the viewport for the frame is less than 1010 width as set in the frameset, it still occupies that much width, causing an unviewable area (perhaps a very slight one) if the window cannot be widened.

In other browsers the frame is made more narrow. That introduces a scrollbar and now the frame isn't wide enough no matter how wide you make the browser because the scrollbar is taking up 20 or so pixels of the width. If you start out with a wide enough viewport, it looks fine in other browsers.

Your idea of a solution would work though. But you could also try to get other browsers to act more like IE.

If you set this in your ddphpalbum.css stylesheet:


#phpphotoalbum1 {
width: 980px;
}

That phpphotoalbum1 is the id generated by the script for the album container div, and that's 10 photodiv's with an 88px width image inside and a 10px right margin each (980). It should work out to be just or very nearly like IE. It does here in local testing for Firefox. But you will get a slight, or maybe not so slight unviewable area if the window is too narrow, also just like IE.

You could change it to 9 images, make the width 882 and the margin 0 auto:


#phpphotoalbum1 {
width: 882px;
margin: 0 auto;
}

That will center it, mostly, it would probably be better if you changed:


.photodiv{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

to:


.photodiv{ /*CSS for DIV containing each image*/
float: left;
margin: 5px;
}

Just remember that if you go down this road of having 9, you have to change it here:


new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [9,5],
sortby: ["file", "desc"], //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({path: 'http://www.poontang.dk/fun/animals/', groupName: 'myvacation' });

Also, that comma after sortby:


new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [10,5],
sortby: ["file", "desc"], //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({path: 'http://www.poontang.dk/fun/animals/', groupName: 'myvacation' });

Will wreak the entire script in IE 7 and less. Others are error correcting for it, so you can just get rid of it.

Poontang
01-17-2011, 09:10 AM
That did the trick - i tried with float: center
But that wouldnt work....

It seems that this new version of the PHP album incl. the lightbox takes VERY long to load. Even tho I changed to use lightweight thumpnails.

Ofcause, this seems worse in the folders with many pictures (1500+) like "Blandet" (Misc). That has to be because it has to load ALL thumps before it can show the site.
But still - before we made all the changes through this thread it loaded way faster.
With the same settings in sorting; desc. ...

I guess I can't do anything about that - with so many thumps to load?

jscheuer1
01-17-2011, 10:42 AM
I noticed that the server seemed overloaded. Sorting so many files could be the issue though. If so, it's not the server. It would be the browser.

I don't know how all of your other thump image folders are organized. But if we look at the poontang.dk/fun/animals/thumps/getalbumpics.php?id=myvacation file, we see that the files are already in the correct order, just reversed. This is a coincidence because the order isn't dependent upon the filenames, rather the order in which the files were uploaded to the server.

But, if they're all like that (the pc thumps are too, I just checked) and there's a good chance that they are (you made all the thumbnail images the same way and uploaded them all the same way, right?), then just go into the ddphpalbum.js file and make the red additions in the highlighted area:


function phpimagealbum(setting){
this.albumvar=setting.albumvar
this.albumvar.images.pop() //remove last "dummy" array element
for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[i]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
}
this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
this.dimensions=setting.dimensions || [3,3]
this.sortby=setting.sortby || ["file", "asc"],
this.autodesc=setting.autodesc
this.showsourceorder=setting.showsourceorder
this.onphotoclick=setting.onphotoclick || function(){}
this.photodivs=[] //array referencing each DIV that contains a slide
this.navlinks=null //HTML collection
/* if (setting.sortby[0]=="file") //sort by filename (asc)
this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
else //sort by date (asc)
this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])}) */
if (setting.sortby[1]=="desc"){
this.albumvar.images.reverse()
}
this.buildgallery()
this.buildnav()
}

That way there will be no sorting, just a reversing of the natural order, much quicker.

Poontang
01-18-2011, 08:18 AM
I see the idea - but it didn't do much for the folders with many pictures inside...

jscheuer1
01-18-2011, 03:38 PM
Just because you updated the ddphpalbum.js file as I directed in my last post, doesn't mean that the change has taken effect. Caching of external script files is sometimes harder to clear than simply refreshing the page. But if you don't at least do that, it will use the old cached script. You may have to close all tabs of the site and clear the browser's cache to get external scripts out of cache.

Once I got the old copy of the script out of cache, it did speed things up considerably in both Firefox and IE.

Poontang
02-01-2011, 07:04 PM
Back...

I am aware of the forum-rulles about questions regarding scripts not working together installed on the same page... but I have to give it a shot!

Now we have the next and previous buttons working fine. We also have an alternativ path to a folder with coresponding thumps (or rather, the other way around).

A new problem has showed up!
In order for me to built my site with the desired layout, I am forced to use an iFrame as my _mainFrame. No way around that! (I think).
Also, in order to have the actual iFrame scalling the height of the browser, I had to use this little code:



<head>




<style type="text/css">

#MAINFRAME {
position:absolute;
left:0px;
top:0;
width:100%;
height:25;
z-index:1;
}

</style>



<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }

iframe { display:block; width:100%; border:none; }
</style>


</head>



<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" scrol="NO">





<div id="MAINFRAME"><img src="source/mainframe_overlay.png" width="987" height="25" /></div>
<iframe name=_mainFrame src="fun/menu.htm" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>






</body>



A little new note: The script as it is works perfectly in an iFrame! it's the:

<style type="text/css">

#MAINFRAME {
position:absolute;
left:0px;
top:0;
width:100%;
height:25;
z-index:1;
}

</style>
.... that kills the LightBox:

This script totaly messed up the next and previous buttons in the LightBox.
They no longer show - and clicking the sides of the LightBox doesn't function. Also, the ability to click outside the LightBox to close it dissapeared. (The "close" button still works).

My lightbox.js stille has the "forceLocal: true,"


This problem totaly messe me up, mostly because with this PHP album, the LightBox - and some other tricks on my site that requires iFrame all together made my site the way I always wanted to be...

Please save my day - and many nights to come!


Edit 03-02-2010:

I'm also trying to install FancyBox with the PHP album, and went carefully through jscheuer1's tutor in this thread about it - just to see if this would be able to run in an iFrame set to height="100%"... But I simply can't get the FancyBox to work with the PBP album.

Poontang
02-03-2011, 04:39 PM
OK, I got it running again :)

I was fumbling my way back and forth in the script, just trying things out - and this seems to fix the problem:

In the frame holding my iFrame, i changed "height:25;" to "height:26px;" for my draw-layer that holds a overlay PNG i made. (1 px higher than the image it holdes).
For some reason that did the trick....


<style type="text/css">
<!--
#MAINFRAME {
position:absolute;
left:0px;
top:0;
width:100%;
height:100px;
z-index:1;
}
-->
</style> (If anyone else should build in a simular setup)


Yay - i'm back ;o)

Poontang
02-19-2011, 04:43 PM
hmmmm... I still think the album is very slow when loading...
I have tried in IE, FF, Safari and Chrome - and on different machines, with absolutely clear cache's.
Also, I've noticed that the album doesn't sort absolutely by filenames. I always name my files 0001.jpg, 0002.jpg etc., and sort desc. to make sure the newest pictures shows first. But that isn't always the case?

Poontang
02-26-2011, 09:17 PM
OK, I have moved the site to a faster server - and NOW I am happy with the load-speed :o)

Still - I can't get the album to sort the images descending - so that the files with highest number (i.e.: I name them 0001.jpg, 0002.jpg etc to make the newest pictures appear first) shows first.
This SHOULD be the only place to make that setting?:

new phpimagealbum({

albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)

dimensions: [8,5],

sortby: ["file", "desc"] //["file" or "date", "asc" or "desc"]

}).createHiddenLinks({path: 'http://www.poontang.dk/fun/animals/', groupName: 'myvacation' });

Poontang
03-01-2011, 10:59 AM
Anyone?

jscheuer1
03-03-2011, 04:59 AM
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Change:


<script type="text/javascript" src="../scripts/fun-phpalbum.js"></script>

To:


<script type="text/javascript" src="../scripts/fun-phpalbum.js">

/***********************************************
* PHP Photo Album script v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Do this everywhere it appears in the source code of your pages like fun/pc.htm, fun/kente.htm, etc.

That said, and please take care of it, I seem to recall I suggested a modified version of the external PHP Photo Album script. From the looks of things, you did. However, there must have been a misunderstanding somewhere because if you want the files sorted by name in descending order, you should return to the original script (right click and 'save as'):

http://www.dynamicdrive.com/dynamicindex4/ddphpalbum.js

Back up your modified version (poontang.dk/scripts/fun-phpalbum.js) just in case there's something else in it you still need. Then replace it on the server with a copy of the one obtained from the above link.

Poontang
03-04-2011, 11:50 AM
Ohhh... I was too eager to clean up my html - I didn't meant to be disrespectful towards DD!

I am very sorry for this mistake!
I have corrected it now!!

-!-

Now, Using the original JS seem to work - thanks!
Now, I need to see if I can locate the error in my modified version. This problem has been VERY annoying, so I need to know!

Thanks - and once again sorry!


------------------------------------

Edit - 5 minutes later:

I feel bad about not crediting DD - I took the liberty to add an extra credit in the index-file!

jscheuer1
03-04-2011, 03:47 PM
It's what I told you to do here:

http://www.dynamicdrive.com/forums/showpost.php?p=246016&postcount=16

I was thinking that the date order was the desired order, now I see that it's the file name order that you're after.

So, if you simply restore that commented out part in that post to your modified version, it should be fine. Hopefully, with the new server, sorting all those files will not be an issue. It happens on the client side anyway, so it's just a question of whether or not sorting was an issue at all. From what you've said since then, sorting is probably not an issue.

Poontang
03-07-2011, 04:37 PM
No, sorting works perfectly now!
Thank's for all the help on this script!
Tho I'm no eagle at scripting, sites like DD is great for trying to mess around with the codes. You can't help but pick, at least, a little knowledge.
- but obviously not enough to find that problem myself...

Thanks again :)

Poontang
03-27-2011, 04:29 PM
Still playing around with the lightbox:

I wanna move the "next" and "prev" buttons to be halfway over the image and halfway outside!

This is where i made my experiments:
(lightbox.css)


#prevLink, #nextLink{ width: 30%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(../fun/prevlabel.png) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../fun/nextlabel.png) right 50% no-repeat; }

...but thisn't seem to make any changes. I would expect a change in "#prevLink { left: 0; float: left;}" to "#prevLink { left: -25; float: left;}" to move the left button 25 pixels outside the image - but it doesn't. Is this the wrong place to make this change?

jscheuer1
03-28-2011, 01:29 PM
I don't know why it even has left: 0; in there as the prevlink and nextlink buttons have no position. So in theory top, right, bottom, and left should have no effect over them, and apparently they don't. But that may be a holdover from a previous version of Lightbox, or it might be there for certain legacy browsers that somehow need it.

If you gave them position: relative; then you could move them around with top, right, bottom, and left. However, I would be first inclined to try margin, ex:


#prevLink { left: 0; float: left; margin-left: -25px;}

That would leave the whole top, right, bottom, and left business alone in case it's needed for some browsers.

Poontang
03-29-2011, 08:58 AM
That did the trick! Thanks again, John!