Which gallery? Slimbox? I see you have that on the page you linked to in your post. It doesn't appear to be working there, the larger images are 404 Not Found. Could be an upper and lower case problem. Upper and lower case almost always matter on the web in paths and filenames, usually not on the local machine.
Slimbox doesn't do pagination. And I've been working on things as promised. In doing so I discovered that the larger images are larger than fits on most screens and that the native lightbox of PHP Photo was scaling them down to fit. Slimbox cannot do that. So I moved on to Fancybox:
http://fancybox.net/
I didn't like the default Fancybox box, so I made one that seems to suit your needs and integrates with PHP Photo. You need PHP Photo to get that image retrieval thing and to setup pagination. If you don't like the order of the images in PHP Photo, they can be sorted differently than what's currently available in the script. Let me know if that's a problem.
Fortunately you haven't moved any of the PHP Photo files (scripts, css, images), so I've been able to continue working on it.
I'd be happy to explain how to set it up. There are a lot of steps though. So if things don't work as expected, give me a link to the live page so I can see what's gone wrong. It is working here. Might be a good idea to setup a test page on the server in the same folder as the projects page.
First grab the jquery.fancybox-1.3.4.zip from the http://fancybox.net/ site.
You can set it up right out of the .zip to run its example page. But for what we're going to do you only need it's fancybox folder. Copy that folder (the whole folder, not just its contents) to the same folder as your page.
Then in the head of the page (the page that was projects.html), make it like:
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.cchunter.mockupwebsite.com/projects.html" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.mockupwebsite.com/cchunter/gallery/thumb/getalbumpics.php?id=mygallery"></script>
<script type="text/javascript">
//'imagename.jpg': "Picture slimbox caption here",
mygallery.cap = {
'cchunter01.jpg': "This is the caption for cchunter01.jpg His busy girls woefully add to their exacting universalists. That demanding student abusively affords little for that cultivated tetrahedron. A compelling tautology unsatisfactorily admits an exasperating in law.",
'cchunter02.jpg': "This is the caption for cchunter02.jpg",
'cchunter03.jpg': "This is the caption for cchunter03.jpg",
'cchunter04.jpg': "This is the caption for cchunter04.jpg",
'cchunter05.jpg': "This is the caption for cchunter05.jpg",
'cchunter06.jpg': "This is the caption for cchunter06.jpg",
'cchunter07.jpg': "This is the caption for cchunter07.jpg",
'cchunter08.jpg': "This is the caption for cchunter08.jpg",
'cchunter09.jpg': "This is the caption for cchunter09.jpg",
'cchunter10.jpg': "This is the caption for cchunter10.jpg",
'cchunter11.jpg': "This is the caption for cchunter11.jpg",
'cchunter12.jpg': "This is the caption for cchunter12.jpg",
'cchunter13.jpg': "This is the caption for cchunter13.jpg",
'cchunter14.jpg': "This is the caption for cchunter14.jpg",
'cchunter15.jpg': "This is the caption for cchunter15.jpg",
'cchunter16.jpg': "This is the caption for cchunter16.jpg" //<-- Important - no comma after the last entry
};
mygallery.largerfolder = 'http://www.mockupwebsite.com/cchunter/gallery/large/'; // Path to larger images.
jQuery('.albumnavlinks a').live('click', function(e){
e.preventDefault();
});
</script>
<script type="text/javascript" src="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="ddphpalbum.css" />
</head>
Make sure to include the highlighted credit as shown for the Photo Album script. It's required by Dynamic Drive's usage terms.
Also highlighted is the mygallery.cap object. It is here that you configure the captions for the larger images, mygallery is the same albumvar from the new phpimagealbum declaration. Notice the red line. that's where you put the path to the larger images. I've already got it setup for what the page was when you first linked me to it. If you use a different folder, that can be edited. It's also based on the same albumvar. The green lines right below it are to prevent some browsers from doing unexpected things when the pagination links are clicked. It need not be changed.
In the body where you had the new phpimagealbum script, make it like so:
Code:
<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: [4,2],
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>
Almost done. In the fancybox folder the jquery.fancybox-1.3.4.css file needs to be edited in three places (starting around line #133). Using a text only editor like NotePad, add/change the highlighted as shown:
Code:
#fancybox-left, #fancybox-right {
position: absolute;
top: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
visibility: hidden;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
/* margin-top: -15px; */
cursor: pointer;
z-index: 1102;
display: block;
}
Junior Coders
How to display description on large image in PHP photo album?
Posting Permissions
Reply With Quote
Bookmarks