PDA

View Full Version : Photo Album script v2.0



its_jon
11-29-2007, 07:01 PM
1) Script Title: Photo Album script v2.0

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

3) Describe problem:

Great code..... I am trying to implement it on this page:-

http://myweb.tiscali.co.uk/design_jon/JEDBOWLS/gallery.htm

As you can see, I have set the popup window to open within _self
'self' being an iframe window.

What I am trying to do is either find a way to match the background colour of the popup to the site or ensure that the image contained in the popup has no border by fitting itself to the absolute top left corner of its popup window.

I get the feeling both solutions may be simple however im lost when it comes to editing Javascript and not much better with HTML .... however I would love to get the gallery working in the way I envisage it ...... I just need some technical support at the moment..

This is mainly a internet explorer problem.... Firefox at least gets the backgroung correct and seems to position the image more to the corner

Thanks for any help
John.
Scotland

jscheuer1
11-29-2007, 08:12 PM
Where you have this:


//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable

Add to it:


//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
var page=window.open("", "_self");
page.document.write('<body onclick="history.go(/Apple/.test(navigator.vendor)? 0 : -1);" '+
'style="cursor:pointer;margin:0;padding:0;background:#a6cb89 url'+
'(http://myweb.tiscali.co.uk/design_jon/JEDBOWLS/images/background_gal_top.jpg) '+
'center top no-repeat;" title="Click to Return"><table align="center" height="100%">'+
'<tr><td height="100%"><img src="'+link.href+'"><\/td><\/tr><\/table>');
page.document.close();
return false;
}

its_jon
11-30-2007, 12:33 AM
Thanks ! ....No way I could have worked it out..

I have updated the code and graphics to suit the new system arranging images in sets of 9.

The only issue now is that if you click for a larger image in gallery '2' or '3' then click to return.....you will always return to gallery '1' .....

hope its simple to adapt ?

again... thanks for the help.

I have used lots of dd scripts in my first sites up to now and I want to keep using new stuff for each site I do .... see
http://www.bordersbigband.org.uk/stage.htm and
http://www.neverdrinkalone.org/gallery.htm

jscheuer1
11-30-2007, 04:47 AM
Now it gets a little more complicated, but there might be an easier way, it just hasn't occurred to me.

Add this line (red) to the photogallery.prototype.showpage function in the photogallery.js file:


photogallery.prototype.showpage=function(gdiv, pagenumber){
photogallery.rel=pagenumber;
var totalitems=this.galleryarray.length //total number of images
var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
var tablecells=gdiv.getElementsByTagName("td")
for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
tablecells[currentcell].innerHTML=""
currentcell++
}
}

Then add this cookie code from quirksmode.org to the very end of the photogallery.js file:


function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

Add this (red) to the thepics.onselectphoto function we created before:


thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
createCookie('nav',photogallery.rel);
var page=win . . .

Finally, add this script at the end of the page in the iframe, right before the closing </body> tag:


<script type="text/javascript">
;(function(){
if(!window.opera&&readCookie('nav')){
for (var a=document.links, i = a.length-1; i > -1; --i)
if(a[i].rel==readCookie('nav'))
a[i].onclick();
eraseCookie('nav')
}})();
</script>

its_jon
11-30-2007, 11:37 AM
Bravo !

Thanks SO much Sir.

I sincerely hope the additional code is also helpful to others.

It appears to be working flawlessly in I.E. and FF. and it has a great 'feel' to it in use.

:)