PDA

View Full Version : PHP Photo Album script v2.11



salman1karim
10-21-2011, 11:00 AM
Hi,

I download the php photo album from dynamicdrive and the problem is that all image will sort but when i put the description of image it will not sorted by image wise. I dont have too much experience in javascript. please help me to figure out the solution.

jscheuer1
10-21-2011, 12:53 PM
Go to this post:

http://www.dynamicdrive.com/forums/showpost.php?p=253282&postcount=3

At the end of it there is an attached script, download it and and use it instead of ddphpalbum.js

Now, instead of listing descriptions by number:


myvacation.desc[2]="This is description for the 3rd picture in the album"
myvacation.desc[6]="This is description for the 7th picture in the album"

list them by the image name:


myvacation.desc['beach.jpg'] = "This is description for the beach.jpg image in the album";
myvacation.desc['mountain.jpg'] = "This is description for the mountain.jpg image in the album";

Use only the image filename and extension and be sure to single quote them as shown. Do not include the path.

salman1karim
10-22-2011, 11:46 PM
thanks for reply. i just change the javascript file and add the image name as per your instruction. After this one all description come correctly under the image but the images are not sorting. please visit this website than you can get the idea
http://www.q8style.net/mens.html

jscheuer1
10-23-2011, 01:41 AM
Where there is (from the page's source code):


<script type="text/javascript">

new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,3],
sortby: ["", "asc"], //["file" or "date", "asc" or "desc"]
autodesc: "%i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage(thumbref.src, "fit2screen")
}
})

</script>

That line needs to be:


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

or:


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

salman1karim
10-23-2011, 07:40 AM
I sorted out by file name and date but same thing happening with me.

jscheuer1
10-23-2011, 08:29 AM
Here are the filenames and dates from the server sorted in ascending order by date:


AEP-1.jpg Oct 21 2011 16:21:46
AEP-10.jpg Oct 21 2011 16:21:50
AEP-12.jpg Oct 21 2011 16:21:55
AEP-13.jpg Oct 21 2011 16:21:59
AEP-14.jpg Oct 21 2011 16:22:04
AEP-15.jpg Oct 21 2011 16:22:09
AEP-16.jpg Oct 21 2011 16:22:14
AEP-2.jpg Oct 21 2011 16:22:19
AEP-22.jpg Oct 21 2011 16:22:24
AEP-23.jpg Oct 21 2011 16:22:28
AEP-25.jpg Oct 21 2011 16:22:33
AEP-26.jpg Oct 21 2011 16:22:38
AEP-30.jpg Oct 21 2011 16:22:43
AEP-31.jpg Oct 21 2011 16:22:48
AEP-32.jpg Oct 21 2011 16:22:53
AEP-33.jpg Oct 21 2011 16:22:57
AEP-34.jpg Oct 21 2011 16:23:02
AEP-35.jpg Oct 21 2011 16:23:07
AEP-36.jpg Oct 21 2011 16:23:12
AEP-37.jpg Oct 21 2011 16:23:17
AEP-38.jpg Oct 21 2011 16:23:21
AEP-39.jpg Oct 21 2011 16:23:26
AEP-40.jpg Oct 21 2011 16:23:31
AEP-41.jpg Oct 21 2011 16:23:37
AEP-42.jpg Oct 21 2011 16:23:43
AEP-43.jpg Oct 21 2011 16:23:48
AEP-44.jpg Oct 21 2011 16:23:53
AEP-45.jpg Oct 21 2011 16:23:58
AEP-46.jpg Oct 21 2011 16:24:02
AEP-47.jpg Oct 21 2011 16:24:07
AEP-58.jpg Oct 21 2011 16:24:12
AEP-59.jpg Oct 21 2011 16:24:17
AEP-68.jpg Oct 21 2011 16:24:21
AEP-7.jpg Oct 21 2011 16:24:26
AEP-9.jpg Oct 21 2011 16:24:31
AEP-118.jpg Oct 22 2011 14:11:51
AEP-119.jpg Oct 22 2011 14:12:07
AEP-69.jpg Oct 22 2011 14:12:24
AEP-70.jpg Oct 22 2011 14:12:42
AEP-75.jpg Oct 22 2011 14:13:00
AEP-76.jpg Oct 22 2011 14:13:17
AEP-77.jpg Oct 22 2011 14:13:36
AEP-78.jpg Oct 22 2011 14:13:52
AEP-79.jpg Oct 22 2011 14:14:10
AEP-80.jpg Oct 22 2011 14:14:26
AEP-81.jpg Oct 22 2011 14:14:44
AEP-82.jpg Oct 22 2011 14:15:01
AEP-83.jpg Oct 22 2011 14:15:19
AEP-84.jpg Oct 22 2011 14:15:36
AEP-95.jpg Oct 22 2011 14:15:53
AEP-96.jpg Oct 22 2011 14:16:11
AEP-100.jpg Oct 22 2011 14:16:28
AEP-101.jpg Oct 22 2011 14:16:46
AEP-102.jpg Oct 22 2011 14:17:03
AEP-103.jpg Oct 22 2011 14:17:21
AEP-105.jpg Oct 22 2011 14:17:41
AEP-106.jpg Oct 22 2011 14:18:01
AEP-107.jpg Oct 22 2011 14:18:18
AEP-108.jpg Oct 22 2011 14:18:38
AEP-109.jpg Oct 22 2011 14:18:56
AEP-113.jpg Oct 22 2011 14:19:17
AEP-115.jpg Oct 22 2011 14:19:33
AEP-116.jpg Oct 22 2011 14:19:51
AEP-117.jpg Oct 22 2011 14:20:11

If you want a different order, you need to either change their dates or use a different sorting method.

Like if you want them sorted by the numbers:


AEP-1.jpg Oct 21, 2011 16:21:46
AEP-2.jpg Oct 21, 2011 16:22:19
AEP-7.jpg Oct 21, 2011 16:24:26
AEP-9.jpg Oct 21, 2011 16:24:31
AEP-10.jpg Oct 21, 2011 16:21:50
AEP-12.jpg Oct 21, 2011 16:21:55
AEP-13.jpg Oct 21, 2011 16:21:59
AEP-14.jpg Oct 21, 2011 16:22:04
AEP-15.jpg Oct 21, 2011 16:22:09
AEP-16.jpg Oct 21, 2011 16:22:14
AEP-22.jpg Oct 21, 2011 16:22:24
AEP-23.jpg Oct 21, 2011 16:22:28
AEP-25.jpg Oct 21, 2011 16:22:33
AEP-26.jpg Oct 21, 2011 16:22:38
AEP-30.jpg Oct 21, 2011 16:22:43
AEP-31.jpg Oct 21, 2011 16:22:48
AEP-32.jpg Oct 21, 2011 16:22:53
AEP-33.jpg Oct 21, 2011 16:22:57
AEP-34.jpg Oct 21, 2011 16:23:02
AEP-35.jpg Oct 21, 2011 16:23:07
AEP-36.jpg Oct 21, 2011 16:23:12
AEP-37.jpg Oct 21, 2011 16:23:17
AEP-38.jpg Oct 21, 2011 16:23:21
AEP-39.jpg Oct 21, 2011 16:23:26
AEP-40.jpg Oct 21, 2011 16:23:31
AEP-41.jpg Oct 21, 2011 16:23:37
AEP-42.jpg Oct 21, 2011 16:23:43
AEP-43.jpg Oct 21, 2011 16:23:48
AEP-44.jpg Oct 21, 2011 16:23:53
AEP-45.jpg Oct 21, 2011 16:23:58
AEP-46.jpg Oct 21, 2011 16:24:02
AEP-47.jpg Oct 21, 2011 16:24:07
AEP-58.jpg Oct 21, 2011 16:24:12
AEP-59.jpg Oct 21, 2011 16:24:17
AEP-68.jpg Oct 21, 2011 16:24:21
AEP-69.jpg Oct 22, 2011 14:12:24
AEP-70.jpg Oct 22, 2011 14:12:42
AEP-75.jpg Oct 22, 2011 14:13:00
AEP-76.jpg Oct 22, 2011 14:13:17
AEP-77.jpg Oct 22, 2011 14:13:36
AEP-78.jpg Oct 22, 2011 14:13:52
AEP-79.jpg Oct 22, 2011 14:14:10
AEP-80.jpg Oct 22, 2011 14:14:26
AEP-81.jpg Oct 22, 2011 14:14:44
AEP-82.jpg Oct 22, 2011 14:15:01
AEP-83.jpg Oct 22, 2011 14:15:19
AEP-84.jpg Oct 22, 2011 14:15:36
AEP-95.jpg Oct 22, 2011 14:15:53
AEP-96.jpg Oct 22, 2011 14:16:11
AEP-100.jpg Oct 22, 2011 14:16:28
AEP-101.jpg Oct 22, 2011 14:16:46
AEP-102.jpg Oct 22, 2011 14:17:03
AEP-103.jpg Oct 22, 2011 14:17:21
AEP-105.jpg Oct 22, 2011 14:17:41
AEP-106.jpg Oct 22, 2011 14:18:01
AEP-107.jpg Oct 22, 2011 14:18:18
AEP-108.jpg Oct 22, 2011 14:18:38
AEP-109.jpg Oct 22, 2011 14:18:56
AEP-113.jpg Oct 22, 2011 14:19:17
AEP-115.jpg Oct 22, 2011 14:19:33
AEP-116.jpg Oct 22, 2011 14:19:51
AEP-117.jpg Oct 22, 2011 14:20:11
AEP-118.jpg Oct 22, 2011 14:11:51
AEP-119.jpg Oct 22, 2011 14:12:07

You could edit this function as shown (from ddphpalbum_obj_desc.js):


function phpimagealbum(setting){
this.albumvar=setting.albumvar
this.albumvar.images.pop() //remove last "dummy" array element
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].replace(/\D/g, '') - b[1].replace(/\D/g, '');});
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()
}

and then on the page:


<script type="text/javascript">

new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,5],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
autodesc: "%i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage(thumbref.src, "fit2screen")
}
})

</script>

salman1karim
10-23-2011, 09:34 AM
Yes Its working.You always helping us. God Bless You.

salman1karim
10-23-2011, 11:53 AM
Hi, I have another issue :) if we go down and open pag2 than it will not auto scroll to top. How can we do it?

jscheuer1
10-23-2011, 04:55 PM
If you want to continue using that Scroll To Top Control script, simply add the highlighted:


<script type="text/javascript" src="scrolltopcontrol.js">

/***********************************************
* Scroll To Top Control script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>
<script type="text/javascript">
jQuery(function($){
$('.albumnavlinks a').live('click', function(){scrolltotop.scrollup();});
});
</script>
<script type="text/javascript" src="mens/ddphpalbum_obj_desc.js">

If you don't want to see that arrow anymore add the highlighted line to that new script:


<script type="text/javascript">
jQuery(function($){
$('.albumnavlinks a').live('click', function(){scrolltotop.scrollup();});
$('head').append('<style type="text/css">#topcontrol{display: none!important;}<\/style>');
});
</script>

salman1karim
10-23-2011, 08:45 PM
Genius. Thanks John.