Results 1 to 5 of 5

Thread: Photo Album script v2.0

  1. #1
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Photo Album script v2.0

    1) Script Title: Photo Album script v2.0

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

    3) Describe problem:

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

    http://myweb.tiscali.co.uk/design_jo...LS/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

  2. #2
    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 you have this:

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

    Code:
    //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;
    }
    Last edited by jscheuer1; 11-29-2007 at 09:31 PM. Reason: format
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    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

    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:

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

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

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

    Code:
    <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>
    Last edited by jscheuer1; 11-30-2007 at 05:24 AM. Reason: upgrade code
    - John
    ________________________

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

  5. #5
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.


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
  •