Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: PHP Photo Album script v2.11 - Adding jQuery Lightbox Script

  1. #1
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album script v2.11 - Adding jQuery Lightbox Script

    1) Script Title: PHP Photo Album script v2.11

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

    3) Describe problem:
    I am using this script successfully now. I know that you can use a different jQuery lightbox script such as the Facebox script available on DD. I would like to use prettyPhoto. - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto - Can anyone show me how to hook the two together? I would use Facebox, but it only shows one image at a time. I want the ability to group photos into a gallery. This script also uses almost any media item there is.

    Any help would be appreciated!

    drmeisner

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    That looks like a really nice jQuery based Lightbox clone. I recently did this same thing for Fancybox:

    http://www.dynamicdrive.com/forums/s...ad.php?t=66002

    It wouldn't be all that different. There are various considerations. If you read through that thread, you will at least get the general idea. You may even decide to use Fancybox.

    That person didn't want their descriptions showing up in the gallery, only in the Lightboxes. That's one major consideration, reading that thread should help you decide on that, it can be done either way, or even with one set of descriptions in the gallery and another set in the Lightboxes. How the descriptions are treated may require different coding in the interface and/or for the PHP Photo Album script itself.

    Another consideration is whether or not you want the thumbnail to be the larger image resized down by the browser (default for PHP Photo), or want to have a separate folder for the larger images, using true thumbnail images made in an image editing program - smaller and/or cropped versions of the larger images, as did the person in that thread.

    If you're at all handy with javascript and jQuery, you can probably set it up yourself using that thread as a general guideline. If not, when I have more time I can set it up for you. But I'd need to know how you want to treat the description and the thumbnail/larger image issues, as well as any other special considerations you can think of after reading that thread.
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album script v2.11 - Adding jQuery Lightbox Script

    Hi John, thanks for the quick response. The way I have been doing things is to have a separate folder for the large images and the thumbnails that I create using Photoshop. I guess I did not know the the script was creating the thumbnails. That would explain why my thumbnails always look blurry... Basically, I use this setup because it is quick for me when I am traveling. I just copy photos from my camera to a folder, then use Photoshop with a couple of actions I made to downsize the original pictures - they are HUGE - from a 12Mpix camera,, and the thumbnails. I never use descriptions, because the work to input them all is too tedious. I guess I would use them in some cases though, but it is not all that important. I then FTP the picures to my site so everyone at home can see them. I have a site where you can see how things are setup now. I am redesigning this portion of the site, and do not have it live yet, just running on my server on my laptop. I have also changed the way the pages load too. I was using DD's Tab Content script and Ajax Includes script, but the downside is that all the pages load at once which can be slow. The new site uses DD's Ajax Tabs Content Script, which loads just one page at a time into an Iframe based on the selected tab. You may remember that you modified that script for me a couple of years ago. The old site is http://www.dwaynemeisner.com/vacations/index.php. Choose any link on that page to see one of the albums. I see fancybox does almost everything prettyPhoto does. Do you think I should just use it? The one thing I like about prettyPhoto are the social links that are shown on the larger picture. It makes it easy for people to share the picture on Facebook etc. Please let me know your thoughts. If it is not too much work for you, I would like to try to use prettyPhoto. Oh, and how do I get PHP Photo to use my thumbnails, not the ones it produces?

    Thanks!

    More Info:

    I made a test page using fancybox as shown in the post you pointed me to. I got it to work, although I did not do anything with the pagination links, I just wanted to quickly test it. I ran into an XML markup error when running it on my local server. The problem was that the getalbumpics.php file used the shortcut to open php - <? rather than <?php. Once I made this change it got rid of that error, but for some reason, I had to point the whole line to my live site. Using my pseudo web address on my server doesn't seem to work. This works - <script type="text/javascript" src="http://www.dwaynemeisner.com/vacations/jamaicavacation2012/images/03thumbs/getalbumpics.php?id=mygallery"></script> but not this: <script type="text/javascript" src="http://www.dwayne-francine-family-tree.com/vacations/jamaicavacation2012/images/03thumbs/getalbumpics.php?id=mygallery"></script>. The local server is setup and run by wampdeveloper. It uses php 5.2.17.0. I am not worried about this because the live site works OK. The fancybox script shows all the pictures no matter how many pagination links there are. I am unsure if this is something I did wrong or something I am missing.

    Thoughts?

    I was only testing in firefox and chrome. Not working IE7. IE says phpimagealbum is undefined. Firebug does not show any errors in firefox. I probably just missed something. Here is the code for the test page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="test.html" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.dwaynemeisner.com/vacations/jamaicavacation2012/images/03thumbs/getalbumpics.php?id=mygallery"></script>
    
    <script type="text/javascript">
    //'imagename.jpg': "Picture slimbox caption here",
    mygallery.cap = {
    };
    mygallery.largerfolder = '/vacations/jamaicavacation2012/images/03/'; // Path to larger images.
    jQuery('.albumnavlinks a').live('click', function(e){
    		e.preventDefault();
    	});
    </script>
    <script type="text/javascript" src="/vacations/jamaicavacation2012/ddphpalbum.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>
    
    <link rel="stylesheet" type="text/css" href="/vacations/jamaicavacation2012/ddphpalbum.css" />
    
    </head>
    
    <body>
    <script type="text/javascript">
    <!--
    		phpimagealbum.prototype.createHiddenLinks = function(){
    		  	var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar,
    		  	$ = jQuery; d.style.display = 'none'; tmpLink.rel = 'lightbox_' + new Date().getTime(); av.hiddenLinksAr = [];
    		  	for(i = 0; i < av.images.length; ++i){
    		  		lbLink = tmpLink.cloneNode(false);
    		  		lbLink.href = (av.largerfolder || av.baseurl) + av.images[i][1];
    				lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0,  av.images[i][1].lastIndexOf('.'));
    		  		d.appendChild(lbLink);
    		  		av.hiddenLinksAr[av.images[i][0]] = jQuery(lbLink);
    		  	}
    			document.body.insertBefore(d, document.body.firstChild);
    			$(d).find('a').fancybox({
    				'titlePosition': 'inside',
    				'cyclic': true, // looping from first larger image to last
    				'margin': 100,
    				'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
    					var newclose = $('#fancybox-close').css({visibility: 'hidden'}).clone(true);
    					return $('<span id="fancybox-title-inside" style="display: block; text-align: left; position: relative;">' +
    					'<span style="display: block; margin-right: 40px;">Image ' + (currentIndex + 1) + ' / ' + currentArray.length +
    					(title.length? ' &nbsp; - &nbsp; ' + title : '') + '<\/span><\/span>').prepend(newclose.css({visibility: 'visible',
    					right: 0, top: '50%', marginTop: -15}).fadeIn('slow', function(){this.style.display = 'block';
    					$('#fancybox-left, #fancybox-right').css({visibility: 'visible', height : $('#fancybox-content').innerHeight()});
    					$('#fancybox-content img').attr('title', '');})
    					.attr('title', 'Close'));
    				}
    			});
    		};
    
    		new phpimagealbum({
    			albumvar: mygallery, //ID of photo album to display (based on getpics.php?id=xxx)
    			dimensions: [5,8],
    			sortby: ["date", "desc"], //["file" or "date", "asc" or "desc"]
    			autodesc: "", //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){
    				this.albumvar.hiddenLinksAr[thumbindex].click();
    			}
    		}).createHiddenLinks();
    		-->
    		</script>
    </body>
    </html>
    Last edited by jscheuer1; 02-01-2012 at 02:18 PM. Reason: Add more information

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Well:

    http://www.dwayne-francine-family-tree.com/

    Gives me a "cannot locate remote server", so perhaps there's a typo there.

    I downloaded Pretty Photo. I'm a little disturbed that some of the demos in the archive don't work in Firefox (could just need updates to some of the other code - not Pretty Photo itself). But the image examples are fine, and if you want the social media links, we should use it.

    I've gotten your test page to work in a local mock up.

    Please don't move:

    dwaynemeisner.com/vacations/jamaicavacation2012/images/03/

    dwaynemeisner.com/vacations/jamaicavacation2012/images/03thumbs/

    dwaynemeisner.com/vacations/jamaicavacation2012/ddphpalbum.js

    dwaynemeisner.com/vacations/jamaicavacation2012/ddphpalbum.css

    until we're done. I'll be seeing about converting it to Pretty Photo.


    My local mock up works fine in IE 7 using my copies of the fancybox-1.3.4.pack.js and fancybox-1.3.4.css files (I couldn't find them on the live server). The error you report indicates IE 7 probably isn't finding the ddphpalbum.js script. I changed the external script tag for it to:

    Code:
    <script type="text/javascript" src="http://www.dwaynemeisner.com/vacations/jamaicavacation2012/ddphpalbum.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>
    and similarly for the stylesheet link:

    Code:
    <link rel="stylesheet" type="text/css" href="http://www.dwaynemeisner.com/vacations/jamaicavacation2012/ddphpalbum.css" />
    I had to also use the http://www.dwaynemeisner.com prefix for the larger image folder, perhaps one or two other things.

    One other thing that might be confusing IE 7 is this:

    Code:
    <base href="test.html" />
    It should point to a folder, not a file. And since presumably it's the current folder, you can just omit the entire tag.

    Once all that's fixed on your copy, as long as IE 7 can find the Fancybox files, it should be OK.



    About the thumbnails being blurry - the code is using the correct images but the stylesheet is distorting them. They (most of them at least) are 100 x 67, while in the ddphpalbum.css file they're set to:

    Code:
    .photodiv img{ /*CSS for each image tag*/
    border: 0;
    width: 200px;
    height: 150px;
    cursor: hand;
    cursor: pointer;
    }
    I changed that to:

    Code:
    .photodiv img{ /*CSS for each image tag*/
    border: 0;
    width: 100px;
    height: 67px;
    cursor: hand;
    cursor: pointer;
    }
    and they cleared right up, albeit they were quite a bit smaller. If you want larger thumbnails, make them that way when you create them and set their dimensions accordingly in the css file. Something between what you actually have and 200 x 150 might be better. But that's up to you.



    About errors from getalbumpics.php, it's a bit dated, see:

    http://www.dynamicdrive.com/forums/s...ad.php?t=54416

    for a drop-in replacement that should be OK on the local and remote hosts. Keep a backup of your current working version just in case.



    Some other things -

    You have some kind of redirect to login.php for files that fit certain criteria (I thinks its for 404 - pretty sure, and possibly for certain others as well). This seems to only work well in the root folder. If I try to navigate directly to a file in the vacations folder and it's redirected to login.php, I get a message from Firefox saying it's being redirected by the server in a way that will never resolve. That may or may not have something to do with IE 7 having trouble finding the script. But probably should be addressed. In the redirect I'm imagining it's to login.php in the current folder, if so make it to login.php in the root. You might also want to reconsider where 404 Not Found gets redirected. Redirecting from private pages to login.php when a user isn't logged in is appropriate, but for a 404, something else might be better. If it also redirects 404 to login.php for logged in users, that's probably not the best either. But I wasn't logged in, so I don't know what it does in that situation.

    I haven't been able to find the live version of test.html - is there one?

    Anyways, here's a bare bones demo with Pretty Photo:

    http://home.comcast.net/~jscheuer1/s...emeisner_h.htm

    The social media links are there, not sure what they do - I'm not a social media person, so I didn't try them.
    Last edited by jscheuer1; 02-01-2012 at 07:55 PM. Reason: Got it working locally with Fancybox & Pretty Photo
    - John
    ________________________

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

  5. #5
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thanks for looking into this so quickly. The http://www.dwayne-francine-family-tree.com/ is on my local server on my laptop. Sorry for the confusion there. I got fancybox to work in IE7 by going to the page that you were working on for the previous person and copying the code from there and changing the necessary bits to work on mine. "I had to also use the http://www.dwaynemeisner.com prefix for the larger image folder, perhaps one or two other things." - So did I... For some reason I was having trouble getting it to run from my local server, even though all the files exist in the same places like they do on the live server. I know now I had the base ref wrong. I don't need it at all if I put the full URL in 2 places - Where the page loads the phpimagealbum script and the where the large image folder is referenced. Either- www.dwaynemeisner.com or www.dwayne-francine-family tree.com works now. So, I guess we were working towards the same end... Figuring out all my mistakes.... You are right about the thumbnails. I am not sure how they got so small. Maybe there is a mistake in my Photoshop action. I will look into that. I will make them a bit bigger and change the CSS to suit. I downloaded the newer version of the getalbumpics.php script. I will have to test it to see if works for this setup, and if so, I will have to change all the instances of it throughout the site. The login/404 error you saw - Not sure why you saw it. Most of my site is password protected, but for the vacation section, you do not have to login. In addition, the live pages you see were not part of the original site, TNG the Next Generation of Sitebuilding. It does allow you to create your own additional pages like the vacation pages. I know now that I did not make them quite right. The new site I am making locally fixes this problem. There is no live version of test.html. The code below is the latest that I have for fancybox. I left the files alone on the live server as you requested, but have made a couple of changes locally, so you may notice some differences, especially the css and js for ddphpalbum. I put them in the folders with the other CSS and Scripts. They are still where there were on the live site. The live site has them for each vacation folder. Kinda redundant... I also figured out how to turn off the pagination links. Not sure whether I will need them or not at this point. I looked at the demo for prettyPhoto. I guess really the only difference between it and fancybox is the social links.
    This code works on IE7, Firefox, Chrome, and Opera:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="/scripts/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.dwayne-francine-family-tree.com/vacations/jamaicavacation2012/images/03thumbs/getalbumpics.php?id=mygallery"></script>

    <script type="text/javascript">
    //'imagename.jpg': "Picture slimbox caption here",
    mygallery.cap = {

    };
    mygallery.largerfolder = 'http://www.dwayne-francine-family-tree.com/vacations/jamaicavacation2012/images/03/'; // Path to larger images.
    jQuery('.albumnavlinks a').live('click', function(e){
    e.preventDefault();
    });
    </script>
    <script type="text/javascript" src="/scripts/ddphpalbum.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>

    <link rel="stylesheet" type="text/css" href="/css/ddphpalbum.css" />
    </head>

    <body>
    <script type="text/javascript">
    phpimagealbum.prototype.createHiddenLinks = function(){
    var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar,
    $ = jQuery; d.style.display = 'none'; tmpLink.rel = 'lightbox_' + new Date().getTime(); av.hiddenLinksAr = [];
    for(i = 0; i < av.images.length; ++i){
    lbLink = tmpLink.cloneNode(false);
    lbLink.href = (av.largerfolder || av.baseurl) + av.images[i][1];
    lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0, av.images[i][1].lastIndexOf('.'));
    d.appendChild(lbLink);
    av.hiddenLinksAr[av.images[i][0]] = jQuery(lbLink);
    }
    document.body.insertBefore(d, document.body.firstChild);
    $(d).find('a').fancybox({
    'titlePosition': 'inside',
    'cyclic': true, // looping from first larger image to last
    'margin': 100,
    'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
    var newclose = $('#fancybox-close').css({visibility: 'hidden'}).clone(true);
    return $('<span id="fancybox-title-inside" style="display: block; text-align: left; position: relative;">' +
    '<span style="display: block; margin-right: 40px;">Image ' + (currentIndex + 1) + ' / ' + currentArray.length +
    (title.length? ' &nbsp; - &nbsp; ' + title : '') + '<\/span><\/span>').prepend(newclose.css({visibility: 'visible',
    right: 0, top: '50%', marginTop: -15}).fadeIn('slow', function(){this.style.display = 'block';
    $('#fancybox-left, #fancybox-right').css({visibility: 'visible', height : $('#fancybox-content').innerHeight()});
    $('#fancybox-content img').attr('title', '');})
    .attr('title', 'Close'));
    }
    });
    };
    </script>
    <div style="padding:10px;">
    <script type="text/javascript">
    new phpimagealbum({
    albumvar: mygallery, //ID of photo album to display (based on getpics.php?id=xxx)
    dimensions: [5,8],
    sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
    autodesc: "", //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){
    this.albumvar.hiddenLinksAr[thumbindex].click();
    }
    }).createHiddenLinks();

    </script>
    </div>
    </body>
    </html>

    Thanks John, let me know how you make out with prettyPhoto. I am anxious to see the final results so we can compare the two.

    Thanks, as always,

    Dwayne

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

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

  7. #7
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John, I copied and pasted the new code for prettyPhoto, and got it up and running on my local site in a few minutes. I noticed you are using a newer jQuery - 1.6.4 rather than the original supplied with the package. I downloaded it and added it to the scripts folder, and it works fine. The only issue I see at the moment is the "Like" button for Facebook does not seem to be working right. The "Tweet" button works, when it is clicked on, it opens a new page at Twitter so one can sign in and share the photo. The "Like" button, however, just goes grey, and there is not enough room to show the number of likes, and it does not open a new page at Facebook. I am not sure what is causing this. I did a quick search and found this: http://forums.no-margin-for-errors.c...rk-wp-3.1.3/p1. Not sure... I assume one could modify the fancy box script to add the social buttons on the bar that carries the "Close" button. Anyway it is great you were able to integrate prettyPhoto with the original script. It gives users another option to use. It is too bad that the main page of the script on DD doesn't show links to both of these solutions. It would save a lot of searching, and also save time for wonderful people like yourself afrom nswering the same questions over and over, or pointing them to the right place in the forum. Anyway, now that I have both scripts working locally, I am going to play around with them to see which I like best. I appreciate your efforts, as always!

    Thanks!
    Dwayne
    Last edited by drmeisner; 02-02-2012 at 01:25 AM. Reason: More Info

  8. #8
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Actually the "Like" button works in IE and Chrome, just not Firefox. In all browsers, there is not enough room to show the number of likes. That is a width setting on the code for the plugin which should be easy to fix.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    As I say, I'm not a social media person. But on my live demo and on my localhost server (wamp) demo, when I click Like in Firefox, it takes me to a FaceBook login. As for the number of likes not having enough room, that would probably be a css thing. But there appears to be plenty of room there as far as what we can control (the width of the iframe that the Like button shows through), the rest is on FaceBook. Unless there's a parameter you can add to or change on the url (src attribute) for the iframe that could affect it, it's probably out of our hands. That information (if it exists) would probably be on FaceBook somewhere.

    Anyways, here's the url (controlled by the pretty photo script, there's a config option for it - social_tools, where you can set the markup and the url):

    Code:
    http://www.facebook.com/plugins/like.php?locale=en_US&href=http%3A%2F%2Fhome.comcast.net%2F~jscheuer1%2Fside%2Fpretty_photo%2Fdwaynemeisner_h.htm%23!prettyPhoto&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23
    This part (at the end):

    Code:
    &layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23
    affects the layout. As you can see, there's plenty of width. I'm not sure what could be added/changed to get the number or count to show up better if it isn't.

    Another issue about this social media stuff. I disabled deeplinking because it made a hash in the url for each image when it was enlarged. This caused the back button to become virtually useless. But without that, there's no way to determine which individual image is being liked. Even with it there isn't, at least not the way it's currently setup on my demo (I generate a unique timestamp as the gallery identifier each time the page loads). If we use a static identifier, it would be best to use a unique one for each gallery. Ideally it would be somewhat descriptive.

    I've made the change to my live demo (also giving PrettyPhoto some credit by using it as the rel since that will now show up in the URL):

    Code:
    <script type="text/javascript">
    <!--
    		phpimagealbum.prototype.createHiddenLinks = function(galid){
    		  	var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar,
    		  	$ = jQuery; d.style.display = 'none'; tmpLink.rel = 'PrettyPhoto[' + (galid || 'pretty_photos') + ']'; av.hiddenLinksAr = [];
    		  	for(i = 0; i < av.images.length; ++i){
    		  		lbLink = tmpLink.cloneNode(false);
    		  		lbLink.href = (av.largerfolder || av.baseurl) + av.images[i][1];
    				lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0,  av.images[i][1].lastIndexOf('.'));
    		  		d.appendChild(lbLink);
    		  		av.hiddenLinksAr[av.images[i][0]] = jQuery(lbLink);
    		  	}
    			document.body.insertBefore(d, document.body.firstChild);
    			$(d).find('a[rel^=PrettyPhoto]').prettyPhoto();
    		};
    
    		new phpimagealbum({
    			albumvar: mygallery, //ID of photo album to display (based on getpics.php?id=xxx)
    			dimensions: [5,8],
    			sortby: ["date", "desc"], //["file" or "date", "asc" or "desc"]
    			autodesc: "", //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){
    				this.albumvar.hiddenLinksAr[thumbindex].click();
    			}
    		}).createHiddenLinks('jamacian_vacation');
    		-->
    		</script>
    Notice the highlighted at the end, that's where you enter the unique static identifier for the gallery. The altered createHiddenLinks function may be used all galleries as long as the unique identifier at the end there is different.
    Last edited by jscheuer1; 02-02-2012 at 03:11 AM. Reason: updated demo
    - John
    ________________________

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

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

    drmeisner (02-02-2012)

  11. #10
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John, I made the changes you suggested, and all is OK. The Like button still does not work in my version of Firefox locally. I guess I will have to put the test page on the live site and try it there. As for the URL for Facebook, I used http:/www.dwaynemeisner.com/vacations/index.php so that the like button references all the vacation pictures that are linked from the index page. Is this the right thing to do?

    Thanks!

    Dwayne

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
  •