Question

after a long search on google i found below php code for image gallery, but it produce jquery effect after cick on thumbnail, instead of jquery i want to go to other page that shows full respective image, like a wordpress blog does!

<?php
    # SETTINGS
    $max_width = 200;
    $max_height = 200;
    $per_page = 9;
    //$imagedir = 'gallery/';
    $page = $_GET['page'];

    $has_previous = false;
    $has_next = false;

    function getPictures() {
        global $page, $per_page, $has_previous, $has_next;
        if ( $handle = opendir(".") ) {
            $lightbox = rand();
            echo '<ul id="pictures">';

            $count = 0;
            $skip = $page * $per_page;

            if ( $skip != 0 )
                $has_previous = true;

            while ( $count < $skip && ($file = readdir($handle)) !== false ) {
                if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
                    $count++;
                    }

            $count = 0;
            while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
                if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
                    if ( ! is_dir('thumbs') ) {
                        mkdir('thumbs');
                    }
                    if ( ! file_exists('thumbs/'.$file) ) {
                        makeThumb( $file, $type );
                    }
                    echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';

                    echo '<img src="thumbs/'.$file.'" alt="" />';

                    echo '<div class="fb">view</div></a></li>';


                    $count++;

                }

            }

            echo '</ul>';

            while ( ($file = readdir($handle)) !== false ) {
                if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
                    $has_next = true;
                    break;
                }
            }
        }
    }

    function getPictureType($file) {
        $split = explode('.', $file); 
        $ext = $split[count($split) - 1];
        if ( preg_match('/jpg|jpeg/i', $ext) ) {
            return 'jpg';
        } else if ( preg_match('/png/i', $ext) ) {
            return 'png';
        } else if ( preg_match('/gif/i', $ext) ) {
            return 'gif';
        } else {
            return '';
        }
    }

    function makeThumb( $file, $type ) {
        global $max_width, $max_height;
        if ( $type == 'jpg' ) {
            $src = imagecreatefromjpeg($file);
        } else if ( $type == 'png' ) {
            $src = imagecreatefrompng($file);
        } else if ( $type == 'gif' ) {
            $src = imagecreatefromgif($file);
        }
        if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
            $newW = 220;
            $newH = $max_height;
        } else {
            $newW = $max_width;
            $newH = 200;
        }
        $new = imagecreatetruecolor($newW, $newH);
        imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
        if ( $type == 'jpg' ) {
            imagejpeg($new, 'thumbs/'.$file);
        } else if ( $type == 'png' ) {
            imagepng($new, 'thumbs/'.$file);
        } else if ( $type == 'gif' ) {
            imagegif($new, 'thumbs/'.$file);
        }
        imagedestroy($new);
        imagedestroy($src);
    }
?>

Answer 1

Remove the rel attribute from the anchor element in the while loop outputting the images. This would prevent the Lightbox script from binding events to this link, so when users click it, they will simply be redirected to the image specified in the href attribute.

In other words, instead of

echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';

use

echo '<li><a href="'.$file.'">';