Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Lightbox Issues

  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    108
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Lightbox Issues

    Ok I just came across Lightbox and dang is that cool. Anyway even though it is easy to intigrate im having issues getting it working with my code. Am I doing this right?
    Here is my code and what I am doing.
    PHP Code:
    <html>
    <head>
    <title>Your Personal Images</title>
    </head>
    <body>
    <style>
    body {
        background: #fff;
    }
    fieldset {
    background:#fff;
        width: 500px;
        }
    #message {
        font-size: .95 em;
        color: #FF0000;
        font-style: italic;
        font-weight: bold;
    }
    #delete {
        clear: both;
        width: 500px;
    }
    display {
        background:#fff;
    }
    </style>
     
    <div align="center">
    <?php 
    if (isset($message))
    {
        echo 
    '<div id="message">'.$message.'</div>';
    }
    ?>



    <?php
    echo '<fieldset class="display">';
    echo 
    '<div class="display" align="left" >';
    $sql "SELECT * FROM images ORDER BY id ASC";
    $query mysql_query($sql);
    $count mysql_num_rows($query);
    if (
    $count == 0)
    {
        echo 
    'No pictures have been uploaded';
    }
    else
    {
        echo 
    '   <form action="" method="POST">';
        while (
    $rows mysql_fetch_array($query))
        {
            echo    
    '<div style="border: 2px solid #fff; margin: 5px; float: left;">
                        <div>
                            <img src="images/thumbs/' 
    $rows['id'] . $rows['ext'] . '"/>
                        </div>
                        <div>
                            <input type="hidden" name="image_name" value="' 
    $rows['image_name'] . '">
                            <input type="checkbox" name="' 
    $rows['id'] . '" value="delete">
                        </div>
                    </div>'
    ;
        }
        echo 
    '<div id="delete"><input type="submit" name="delete" value="Delete Images"></div>
    </form>'
    ;
    }
    echo 
    '</div>';
    echo 
    '</fieldset>';
    ?>
    Then I change these parts above to this...

    PHP Code:
    <html>
    <
    head>
    <
    title>Your Personal Images</title>
    <
    script type="text/javascript" src="../scripts/lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="../scripts/lightbox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="../scripts/lightbox/js/lightbox.js"></script>
    <link rel="stylesheet" href="../scripts/lightbox/css/lightbox.css" type="text/css" media="screen" />
    </head>
    <body> 
    and this...
    PHP Code:
    <?php
    echo '<fieldset class="display">';
    echo 
    '<div class="display" align="left" >';
    $sql "SELECT * FROM images ORDER BY id ASC";
    $query mysql_query($sql);
    $count mysql_num_rows($query);
    if (
    $count == 0)
    {
        echo 
    'No pictures have been uploaded';
    }
    else
    {
        echo 
    '   <form action="" method="POST">';
        while (
    $rows mysql_fetch_array($query))
        {
            echo    
    '<div style="border: 2px solid #fff; margin: 5px; float: left;">
                        <div>
                            <a href="images/thumbs/' 
    $rows['id'] . $rows['ext'] . '" rel="lightbox"></a>
                        </div>
                        <div>
                            <input type="hidden" name="image_name" value="' 
    $rows['image_name'] . '">
                            <input type="checkbox" name="' 
    $rows['id'] . '" value="delete">
                        </div>
                    </div>'
    ;
        }
        echo 
    '<div id="delete"><input type="submit" name="delete" value="Delete Images"></div>
    </form>'
    ;
    }
    echo 
    '</div>';
    echo 
    '</fieldset>';
    ?>
    With the code edits I have made the page comes up and everything but my images dont. I am assuming that the issue lies in my <a href=""><a/> syntax since I did try that by itself and got the same results. So what am I doing wrong?
    Thanks alot for the help.

  • #2
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    The <a> tag is an anchor, AKA a link. I've never used lightbox, so i'm not sure how the javascript works in it, but an <a> tag will not display a picture, esp. an empty one. If you are supposed to have a link on the image, then it should probably look like:
    PHP Code:
    <a href="images/thumbs/' . $rows['id'] . $rows['ext'] . '" rel="lightbox"><img src="images/thumbs/' . $rows['id'] . $rows['ext'] . '"/></a
    In the code above, the image tag is enclosed by the anchor tag so that the image is "clickable".

    -Shane

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    108
    Thanks
    0
    Thanked 2 Times in 2 Posts
    well that worked. thanks

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Posts
    108
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Well im having one other issue now that I am uploading my stuff to the server and Imnot sure why im getting it since everything works perfectly when ran localy. Anyway this is the error I am getting
    Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/millerm/public_html/hotspot/cms/includes/class.thumbnail.php on line 21
    Any ideas?

    Thanks again for your help This is an awesome class and it works perfectly locally. So it almost makes me wonder if its not a php4 vs. php5 thing? I am running 4.3.11 on the server and 5 localy. anyway here it is
    PHP Code:
    <?php
    /**
     * thumbnail.inc.php
     * 
     * @author         Ian Selby (ian@gen-x-design.com)
     * @copyright     Copyright 2006
     * @version     1.1 (PHP5)
     * 
     */

    /**
     * PHP class for dynamically resizing, cropping, and rotating images for thumbnail purposes and either displaying them on-the-fly or saving them.
     *
     */
    class Thumbnail {
        
    /**
         * Error message to display, if any
         *
         * @var string
         */
        
    private $errmsg
        
    /**
         * Whether or not there is an error
         *
         * @var boolean
         */
        
    private $error;
        
    /**
         * Format of the image file
         *
         * @var string
         */
        
    private $format;
        
    /**
         * File name and path of the image file
         *
         * @var string
         */
        
    private $fileName;
        
    /**
         * Image meta data if any is available (jpeg/tiff) via the exif library
         *
         * @var array
         */
        
    public $imageMeta;
        
    /**
         * Current dimensions of working image
         *
         * @var array
         */
        
    private $currentDimensions;
        
    /**
         * New dimensions of working image
         *
         * @var array
         */
        
    private $newDimensions;
        
    /**
         * Image resource for newly manipulated image
         *
         * @var resource
         */
        
    private $newImage;
        
    /**
         * Image resource for image before previous manipulation
         *
         * @var resource
         */
        
    private $oldImage;
        
    /**
         * Image resource for image being currently manipulated
         *
         * @var resource
         */
        
    private $workingImage;
        
    /**
         * Percentage to resize image by
         *
         * @var int
         */
        
    private $percent;
        
    /**
         * Maximum width of image during resize
         *
         * @var int
         */
        
    private $maxWidth;
        
    /**
         * Maximum height of image during resize
         *
         * @var int
         */
        
    private $maxHeight;

        
    /**
         * Class constructor
         *
         * @param string $fileName
         * @return Thumbnail
         */
        
    public function __construct($fileName) {
            
    //make sure the GD library is installed
            
    if(!function_exists("gd_info")) {
                echo 
    'You do not have the GD Library installed.  This class requires the GD library to function properly.' "\n";
                echo 
    'visit http://us2.php.net/manual/en/ref.image.php for more information';
                exit;
            }
            
    //initialize variables
            
    $this->errmsg               '';
            
    $this->error                false;
            
    $this->currentDimensions    = array();
            
    $this->newDimensions        = array();
            
    $this->fileName             $fileName;
            
    $this->imageMeta            = array();
            
    $this->percent              100;
            
    $this->maxWidth             0;
            
    $this->maxHeight            0;

            
    //check to see if file exists
            
    if(!file_exists($this->fileName)) {
                
    $this->errmsg 'File not found';
                
    $this->error true;
            }
            
    //check to see if file is readable
            
    elseif(!is_readable($this->fileName)) {
                
    $this->errmsg 'File is not readable';
                
    $this->error true;
            }

            
    //if there are no errors, determine the file format
            
    if($this->error == false) {
                
    //check if gif
                
    if(stristr(strtolower($this->fileName),'.gif')) $this->format 'GIF';
                
    //check if jpg
                
    elseif(stristr(strtolower($this->fileName),'.jpg') || stristr(strtolower($this->fileName),'.jpeg')) $this->format 'JPG';
                
    //check if png
                
    elseif(stristr(strtolower($this->fileName),'.png')) $this->format 'PNG';
                
    //unknown file format
                
    else {
                    
    $this->errmsg 'Unknown file format';
                    
    $this->error true;
                }
            }

            
    //initialize resources if no errors
            
    if($this->error == false) {
                switch(
    $this->format) {
                    case 
    'GIF':
                        
    $this->oldImage ImageCreateFromGif($this->fileName);
                        break;
                    case 
    'JPG':
                        
    $this->oldImage ImageCreateFromJpeg($this->fileName);
                        break;
                    case 
    'PNG':
                        
    $this->oldImage ImageCreateFromPng($this->fileName);
                        break;
                }

                
    $size GetImageSize($this->fileName);
                
    $this->currentDimensions = array('width'=>$size[0],'height'=>$size[1]);
                
    $this->newImage $this->oldImage;
                
    $this->gatherImageMeta();
            }

            if(
    $this->error == true) {
                
    $this->showErrorImage();
                break;
            }
        }

        
    /**
         * Class destructor
         *
         */
        
    public function __destruct() {
            if(
    is_resource($this->newImage)) @ImageDestroy($this->newImage);
            if(
    is_resource($this->oldImage)) @ImageDestroy($this->oldImage);
            if(
    is_resource($this->workingImage)) @ImageDestroy($this->workingImage);
        }

        
    /**
         * Returns the current width of the image
         *
         * @return int
         */
        
    private function getCurrentWidth() {
            return 
    $this->currentDimensions['width'];
        }

        
    /**
         * Returns the current height of the image
         *
         * @return int
         */
        
    private function getCurrentHeight() {
            return 
    $this->currentDimensions['height'];
        }

        
    /**
         * Calculates new image width
         *
         * @param int $width
         * @param int $height
         * @return array
         */
        
    private function calcWidth($width,$height) {
            
    $newWp = (100 $this->maxWidth) / $width;
            
    $newHeight = ($height $newWp) / 100;
            return array(
    'newWidth'=>intval($this->maxWidth),'newHeight'=>intval($newHeight));
        }

        
    /**
         * Calculates new image height
         *
         * @param int $width
         * @param int $height
         * @return array
         */
        
    private function calcHeight($width,$height) {
            
    $newHp = (100 $this->maxHeight) / $height;
            
    $newWidth = ($width $newHp) / 100;
            return array(
    'newWidth'=>intval($newWidth),'newHeight'=>intval($this->maxHeight));
        }

        
    /**
         * Calculates new image size based on percentage
         *
         * @param int $width
         * @param int $height
         * @return array
         */
        
    private function calcPercent($width,$height) {
            
    $newWidth = ($width $this->percent) / 100;
            
    $newHeight = ($height $this->percent) / 100;
            return array(
    'newWidth'=>intval($newWidth),'newHeight'=>intval($newHeight));
        }
    Line 21 is this
    private $errmsg;
    Thanks again for your help

  • #5
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Php 5 class running on a php 4 server. http://www.php.net/public

    Here's a fantastic post as a resource illustrating the differences between 4 & 5:
    I do Web Design, Brisbane based.
    More time spent in PHP/MySQL Web Development.
    And Search Engine Optimisation takes up the rest of it.

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Posts
    108
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Yea I finally got that now and have it fixed....thank you

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Posts
    108
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Another small issue I am having is that the images for the close button and "X" dont show up on my images like they should. If i got this right my paths should be "../images/loading.gif" which means go up one directory then enter the "images" dir and display "loading.gif" correct?
    I also know that I need these to be active which as you can see I do..
    var fileLoadingImage = "../images/loading.gif";
    var fileBottomNavCloseImage = "../images/closelabel.gif";
    Is there anything else I am missing or something I have done wrong?

    Thanks

  • #8
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts
    "../" is relative to the document. As soon as you try that path one folder up or down it will not resolve correctly. Another problem might be permissions. Check that everyone on linux or IUSR_SERVERERNAME has read perms to the image files.
    I do Web Design, Brisbane based.
    More time spent in PHP/MySQL Web Development.
    And Search Engine Optimisation takes up the rest of it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •