Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Onclick close popup on a DD PHP photo album script

  1. #1
    Join Date
    Sep 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Onclick close popup on a DD PHP photo album script

    1) Script Title:
    PHP photo album

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

    3) Describe problem:
    How could I add a close onclick to the pop up of the script, with an alt tag saying"click to close" ? I have been trying many ways but nothing seems to work. I don't know if I should change the popupsettings or the function...or what !

    Thanx in advance...

  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

    Find the function popuplinkfunc(imgsrc) from step3 on the demo page and change it to this:

    Code:
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open('', "popwin", popupsetting[1])
    popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
    popwin.document.close();
    popwin.focus()
    return false
    }
    else
    return true
    }
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanx John.... but now I have one problem... the title of the pop up does not show the name of the picture any more....

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    The filename?
    You can set it with popwin.title.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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

    I would do the title like so:

    Code:
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open('', "popwin", popupsetting[1])
    popwin.document.write('<title>'+imgsrc.href.toString(10).replace(/^.*\/|\.[^.]*$/g, '')+'</title>\n')
    popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
    popwin.document.close();
    popwin.focus()
    return false
    }
    else
    return true
    }
    Even so IE will show the path too but, it was doing that already. But there could be other problems. If the images are of varying dimensions, you might want to lose the window name:

    Code:
    var popwin=open('', "_blank", popupsetting[1])
    instead of:

    Code:
    var popwin=open('', "popwin", popupsetting[1])
    That will create a new window for every pop up but, allow each to be set to whatever the dimension settings (if any) are. A named window that hangs around, when populated with new content, will not resize itself - and many browsers will not allow windows to be resized by javascript after opening.
    Last edited by jscheuer1; 09-21-2006 at 01:46 PM. Reason: correct code as per later post
    - John
    ________________________

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

  6. #6
    Join Date
    Sep 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanx again John, but it does not seem to work, on mac (Safari or Firefox) at least.
    I have been through the archives to find a solution and I came accross the mixing between the lightbox1 and php album,
    http://www.dynamicdrive.com/forums/a...hp/t-7667.html
    but dont understand at all what to do, cuz this would be the perfect solution for me as I upload my images with my mobile phone, and as the light box 1 has a very nice way to show and close the pictures...
    I have seen that you have been working on it.
    Do you have the exact code I should put in my page ? knowing that I need to download the getpics.php and the lightbox.zip files and put them in the same folder as the pictures and the index....

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

    If you are going to go that route, at least look at the full version:

    http://www.dynamicdrive.com/forums/s...ead.php?t=7667

    It is easier to understand.

    I'm not sure what the problem could be with the code I supplied, it tested out OK here. I'll do some more testing.
    - John
    ________________________

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

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

    I see, I made a typo, use this (tested with the actual script):

    Code:
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open('', "popwin", popupsetting[1])
    popwin.document.write('<title>'+imgsrc.href.toString(10).replace(/^.*\/|\.[^.]*$/g, '')+'</title>\n')
    popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
    popwin.document.close();
    popwin.focus()
    return false
    }
    else
    return true
    }
    Forget what I said about using _blank if you have images of varying dimensions. The script doesn't support that.
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it works on Firfox... cool

    thank you very much

    I'll check for the combination of Lightbox and PHP album

    Petri

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

    If you want to use lightbox, use v2.02 from the author:

    http://www.huddletogether.com/projects/lightbox2/

    Use the php script's style in the head of your page, then under that put this (red) part:

    Code:
    margin-right: 8px;
    margin-bottom: 3px;
    font-size: 110%;
    }
    
    #navlinks a.current{ /*CSS for currently selected navigational link*/
    background-color: yellow;
    }
    </style>
    	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    	
    	<script src="js/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    	<script src="js/lightbox.js" type="text/javascript"></script>
    </head>
    <body>
    Make sure to unzip the files from the lightbox archive and place them in folders as indicated relative to your page.

    Use this version of the PHP script in the body, change the paths (red) to your own:

    Code:
    <script src="http://www.dynamicdrive.com/dynamicindex4/phpgallery/getpics.php" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    /***********************************************
    * PHP Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    var dimension="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
    var imagepath="http://www.dynamicdrive.com/dynamicindex4/phpgallery/" //Absolute path to image directory. Include trailing slash (/)
    var href_target="new" //Enter target attribute of links, if applicable
    
    //Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
    var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"]
    
    //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
    var descriptionprefix=[1, "Photo "]
    
    //Sort images by date? ("asc", "desc", or "")
    //"desc" for example causes the newest images to show up first in the gallery
    //"" disables this feature, so images are sorted by file name (default)
    var gsortorder="desc"
    
    //By default, each image hyperlinks to itself.
    //However, if you wish them to link to larger versions of themselves
    //Specify the directory in which the larger images are located
    //The file names of these large images should mirror those of the original
    //Enter a blank string ("") to disable this option
    var targetlinkdir=""
    
    /////No need to edit beyond here///////////////////
    
    function sortbydate(a, b){ //Sort images function
    if (gsortorder=="asc") //sort by file date: older to newer
    return new Date(a[1])-new Date(b[1])
    else if (gsortorder=="desc") //sort by file date: newer to older
    return new Date(b[1])-new Date(a[1])
    }
    
    if (gsortorder=="asc" || gsortorder=="desc")
    galleryarray.sort(sortbydate)
    
    var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
    
    function buildimage(i){
    var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
    var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox" title="'+galleryarray[i][0].replace(/\.[^.]*$/, '')+'">'
    tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
    tempcontainer+='</a><br />'
    tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
    return tempcontainer
    }
    
    function jumptopage(p){
    var startpoint=(p-1)*totalslots
    var y=1;
    for (i=0; i<totalslots; i++){
    document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
    }
    while(document.getElementById("navlink"+y)!=null){
    document.getElementById("navlink"+y).className=""
    y++
    }
    initLightbox();
    document.getElementById("navlink"+p).className="current"
    }
    
    var curimage=0
    for (y=0; y<dimension.split("x")[1]; y++){
    for (x=0; x<dimension.split("x")[0]; x++){
    if (curimage<galleryarray.length)
    document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
    curimage++
    }
    document.write('<br style="clear: left" />')
    }
    
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open(imgsrc.href, "popwin", popupsetting[1])
    popwin.focus()
    return false
    }
    else
    return true
    }
    
    </script>
    
    <!--Below HTML code refers to the navigational links for the gallery-->
    
    <div id="navlinks">
    <script type="text/javascript">
    for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
    document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
    document.getElementById("navlink1").className="current"
    </script>
    - John
    ________________________

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

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
  •