CSS Codes
CSS Layouts
Results 1 to 10 of 10

Thread: PHP Photo Album script v2.11

  1. 10-21-2011, 11:00 AM #1
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album script v2.11

    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.
    Reply With Quote Reply With Quote
  2. 10-21-2011, 12:53 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Go to this post:

    http://www.dynamicdrive.com/forums/s...82&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:

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

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    salman1karim (10-22-2011)
  4. 10-22-2011, 11:46 PM #3
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  5. 10-23-2011, 01:41 AM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Where there is (from the page's source code):

    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:

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

    Code:
    sortby: ["date", "asc"], //["file" or "date", "asc" or "desc"]
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  6. 10-23-2011, 07:40 AM #5
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    I sorted out by file name and date but same thing happening with me.
    Reply With Quote Reply With Quote
  7. 10-23-2011, 08:29 AM #6
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here are the filenames and dates from the server sorted in ascending order by date:

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

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

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

    Code:
    <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>
    Last edited by jscheuer1; 10-23-2011 at 09:03 AM. Reason: add sorting method I think you want
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    salman1karim (10-23-2011)
  9. 10-23-2011, 09:34 AM #7
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Thumbs up

    Yes Its working.You always helping us. God Bless You.
    Reply With Quote Reply With Quote
  10. 10-23-2011, 11:53 AM #8
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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?
    Reply With Quote Reply With Quote
  11. 10-23-2011, 04:55 PM #9
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you want to continue using that Scroll To Top Control script, simply add the highlighted:

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

    Code:
    <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>
    Last edited by jscheuer1; 10-23-2011 at 05:02 PM. Reason: add - If you don't want . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  12. 10-23-2011, 08:45 PM #10
    salman1karim
    salman1karim is offline Junior Coders
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Smile

    Genius. Thanks John.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules