Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: can lightbox read the contents of a folder

  1. #1
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default can lightbox read the contents of a folder

    1) Script Title: lightbox v2.03a

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...box2/index.htm

    is there a way for lightbox to read a folder instead of having to list the urls?

    the reason i ask is because i have a site with many properties and i will be constantly uploading new images

    any help would be greatly appreciated!

  2. #2
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sorry if my question is a newbie one.

    im very new to php and ive searched everywhere for the answer to this question.

    if lightbox cant do this, is there a good image gallery that can?

    please please help

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    No, lightbox can't do this. You can use PHP, however.
    Here is a starting place. I modified the PHP photo album to write lightbox links. You may need to experiment depending on which version of the script(s) you're using.

  4. #4
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks traq!

    im looking at those links and im very new to php so i dont want to go down the wrong direction so please bare with me.

    here is what i have so far:
    example:

    property table/
    id - street - city - state
    12 - 1234 street - dallas - texas

    when a property is created, a folder is also created that links to the property by name(ie. uploads/12/)
    this is where the images go

    what im going for is when someone views the property, you can click on a thumbnail which then opens lightbox and then be able to scroll through all the images

    its complicated and i dont even know if its the right way to do it

    my head hurts - please help!

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    download the PHP Photo Album script and compare its code to the modified code in those discussions. It shouldn't be too hard to figure out (I only had to change a few lines, and I was brand new to PHP when I tried it.) Try it out and post what you come up with so we can help.

  6. #6
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    great!

    ill start working on it

    thanks for the help!

  7. #7
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok, i did the modifications on this page: http://www.dynamicdrive.com/forums/s...00&postcount=5

    one problem:
    when the images are viewed in lightbox, for some reason the images are doubled

    for instance, the first image opened reads: "12 of 22", when there are only 11 images total

  8. #8
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    heres my code:
    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" />
    <title>Test</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <style type="text/css">
    
    .slideshow{ /*CSS for DIV containing each image*/
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    
    .slideshow img{ /*CSS for each image tag*/
    border: 0;
    width: 400px;
    height: 212px;
    }
    
    #navlinks{ /*CSS for DIV containing the navigational links*/
    width: 400px;
    }
    
    #navlinks a{ /*CSS for each navigational link*/
    margin-right: 8px;
    margin-bottom: 3px;
    font-size: 110%;
    }
    
    #navlinks a.current{ /*CSS for currently selected navigational link*/
    background-color: yellow;
    }
    </style>
    </head>
    
    <body>
    <script src="http://localhost/test/gallery/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="2x6" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
    var imagepath="http://localhost/test/gallery/" //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=[1, "width=500px, height=400px, scrollbars, resizable"]
    
    //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
    var descriptionprefix=[0, "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="asc"
    
    //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)
    
    document.write('<div style="display:none;">');
    for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
    document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[joe]"></a>');
    document.write('</div>');
    
    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+'" target="'+href_target+'" rel="lightbox[joe]" onClick="return popuplinkfunc(this)">'
    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++
    }
    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){
    myLightbox.start(imgsrc); return false;
    }
    
    </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>
    </div>
    </body>
    </html>

  9. #9
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    bump.

  10. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    ...not sure. I'm comparing your code to a functioning album I have. I'll let you know.

    Could you also post your file structure and getpics.php?

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
  •