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? ' - ' + 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>
PHP Photo Album script v2.11 - Adding jQuery Lightbox Script
Reply With Quote
Bookmarks