Avatar billede nielspt Nybegynder
28. august 2006 - 00:10 Der er 20 kommentarer og
1 løsning

link til næste billede (ud fra thumbs)

Hej eXperter!

Jeg benytter nedenstående for at oprette thumbnails, som en besøgende så kan trykke på, hvorefter billedet åbner i et andet vindue. Problemet er, at siden hvert billede åbner i et nyt vindue, er man nødt til at lukke det efter hvert billede, for at se det næste billede..

Typisk vil et thumb-link (som jo åbner i nyt vindue) se sådan ud: http://www.minside.dk/pics/london/billede1.jpg

Kan man på denne (og alle de andre af samme slags) lave et link til næste billede i rækken?

Jeg vil altså gerne have, at første thumb man trykker åbner billedet i et nyt vindue, men at man derefter kan manøvrere sig frem og tilbage..

________


            <?php

    /*
   
        Small thumbnail script - Made for integration into existing pages
       
        Made by Lars Petersen, Weird Silence
        Email me at lars at weirdsilence dot net
        www.weirdsilence.net
        www.ordo.dk
   
    */

    //header( "Expires: 0" );

    //set_time_limit( 0 );  jeg har disable't denne, gav en fejl...
   
    // Edit these
    $c = array();
    // Maximum height of thumbnail
    $c['maxHeight'] = 110;
    // Maximum width of thumbnail
    $c['maxWidth'] = 110;
    // Change thumbdir - BEWARE! This script can DELETE EVERYTHING within that
    // directory - So be CAREFUL!
    $c['thumbDir'] = "pics/test/london/thumbs";
    // This is where you keep your originals - DO NOT SET THUMBS TO BE THE SAME
    $c['imageDir'] = "pics/test/london";
    // How many rows of images?
    $c['rows'] = 8;
    // How many images per row?
    $c['cols'] = 5;
    // What image types do you want to thumbnail?
    $c['fileTypes'] = "jpg,jpeg,jpe,png,gif";
   
    // Only change this if you need to add more image types
    $c['imageTypes'] = array(
        "jpg" => "imagecreatefromjpeg"
        ,"jpeg" => "imagecreatefromjpeg"
        ,"jpe" => "imagecreatefromjpeg"
        ,"png" => "imagecreatefrompng"
        ,"gif" => "imagecreatefromgif"
        );
   
    // Don't change below this point ===========================================
    function resize( $filename )
    {
        global $c;
        $pth = pathinfo( $filename );
        $ext = strtolower( $pth['extension'] );
        if ( !array_key_exists( $ext, $c['imageTypes'] ) )
        {
            return false;
        }
        $srcim = $c['imageTypes'][$ext]( $filename );
        $ow = imagesx( $srcim );
        $oh = imagesy( $srcim );
        $wscale = $c['maxWidth'] / $ow;
        $hscale = $c['maxHeight'] / $oh;
        $scale = ( $hscale < $wscale ? $hscale : $wscale );
        $nw = round( $ow * $scale, 0 );
        $nh = round( $oh * $scale, 0 );
        $dstim = imagecreatetruecolor( $nw, $nh );
        imagecopyresampled( $dstim, $srcim, 0, 0, 0, 0, $nw, $nh, $ow, $oh );
        imagejpeg( $dstim, $c['thumbDir'] . "/" . basename( $filename ), 85 );
        imagedestroy( $dstim );
        imagedestroy( $srcim );
        return true;
    }
   
    if ( !is_writable( $c['thumbDir'] ) )
    {
        die( "Directory $c[thumbDir] is not writable!" );
    }
    $rebuild = false;
    if ( file_exists( $c['thumbDir'] . "/settings" ) )
    {
        $sc2 = file_get_contents( $c['thumbDir'] . "/settings" );
        $sc = serialize( $c );
        if ( $sc != $sc2 )
        {
            $rebuild = true; // Settings changed since last time
        }
    }
    else
    {
        $rebuild = true;
    }
    // Adding ?rebuild to URL will force a rebuild of ALL thumbs
    if ( $rebuild || isset( $_GET['rebuild'] ) )
    {
        $files = glob( $c['thumbDir'] . "/*" );
        foreach ( $files as $file )
        {
            @unlink( $file );
        }
    }
    // Save settings if changed
    if ( $rebuild )
    {
        if ( $fp = fopen( $c['thumbDir'] . "/settings", "w" ) )
        {
            fwrite( $fp, $sc );
            fclose( $fp );
        }
    }
    // Get file list, and see if anything has changed since last run
    $lastChange = 0;
    if ( file_exists( $c['thumbDir'] . "/timestamp" ) )
    {
        $lastChange = file_get_contents( $c['thumbDir'] . "/timestamp" );
        if ( !is_numeric( $lastChange ) || $lastChange < 0 || (int)$lastChange != $lastChange )
        {
            $lastChange = 0;
        }
    }
    $changed = 0;
    $fileTypes = "/\.(" . str_replace( ",", "|", $c['fileTypes'] ) . ")$/i";
    $files = array();
    if ( $dh = opendir( $c['imageDir'] ) )
    {
        while ( $file = readdir( $dh ) )
        {
            if ( preg_match( $fileTypes, $file ) )
            {
                $files[] = $file;
                $stamp = filemtime( $c['imageDir'] . "/" . $file );
                if ( $lastChange < $stamp )
                {
                    $changed = 1;
                    $lastChange = $stamp;
                }                               
            }
        }
    }
    else
    {
        die( "Failed to open directory: $c[imageDir]" );
    }
   
    if ( $changed == 1 )
    {
        // Rebuild images
        print( "Changed detected. Rebuilding images.<br>\n" );
        flush();
        foreach ( $files as $file )
        {
            $chksum = md5_file( $c['imageDir'] . "/" . $file );
            if ( !file_exists( $c['thumbDir'] . "/" . $file ) || !file_exists( $c['thumbDir'] . "/" . $file . "_" . $chksum ) )
            {
                print( "Resizing $file...<br>\n" );
                flush();
                if ( resize( $c['imageDir'] . "/" . $file ) )
                {
                    touch( $c['thumbDir'] . "/" . $file . "_" . $chksum );
                }
            }
        }
        if ( $fp = fopen( $c['thumbDir'] . "/timestamp", "w" ) )
        {
            fwrite( $fp, $lastChange );
            fclose( $fp );
        }
        print( '<script type="text/javascript">window.onload=function(){window.location.href="' . $_SERVER['REQUEST_URI'] . '";}</script>');
        exit;
    }
   
    $nfiles = count( $files );
    $perPage = $c['rows'] * $c['cols'];
    $pages = ceil( $nfiles / $perPage );
    $page = ( !empty( $_GET['p'] ) && is_numeric( $_GET['p'] ) ? $_GET['p'] : 1 );
    $start = ( $page - 1 ) * $perPage;
    if ( $start > $nfiles )
    {
        $start = 0;
        $page = 1;       
    }
    $end = $page * $perPage;
    $end = ( $end > $nfiles ? $nfiles : $end );
    $out = "<div class=\"imgholder\">";
    $a = 0;
    for ( $i = $start; $i < $end; $i++ )
    {
        $a++;
        $out .= "\t<div class=\"imgdiv\">";
        $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"blank_\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";
        if ( $a % $c['cols'] == 0 )
        {
            $out .= "\t<br style=\"clear: both\">\n";
        }
    }
    if ( $a % $c['cols'] != 0 )
    {
        $out .= "\t<br style=\"clear: both\">\n";
    }
    $out .= "</div>\n<div id=\"pager\">\n";
    $out .= "<br>";
    $out .= "Viser " . ( $start + 1 ) . " til $end af $nfiles billeder. ";
    for ( $i = 1; $i <= $pages; $i++ )
    {
        if ( $i == $page )
        {
            $out .= "<b>&nbsp;$i&nbsp;</b>";
        }
        else
        {
            $out .= "<a href=\"$_SERVER[PHP_SELF]?p=$i\">&nbsp;$i&nbsp;</a>";
        }
        if ( $i != $pages )
        {
            $out .= "|";
        }
    }
    $out .= "</div>";
   
?>
<style type="text/css">
    #imgholder {
        width: <?= ( ( $c['maxWidth'] + 4 ) * $c['cols'] ) ?>px;
    }
    DIV.imgdiv:hover {
        background-color: #ffd;
    }
    .imgdiv {
        text-align: center;
        padding: 2px;
        width: <?= $c['maxWidth'] ?>px;
        height: <?= $c['maxHeight'] ?>px;
        float: left;
    }
</style>
<div id="container"><?= $out ?></div>


_____


Mvh. Niels
Avatar billede coderdk Praktikant
28. august 2006 - 00:14 #1
Prøv at lave linjen:

        $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"blank_\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";

om til:

        $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"galPic\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";
Avatar billede coderdk Praktikant
28. august 2006 - 00:14 #2
Jeg kan slet ikke huske jeg har skrevet den kode :) Bortset fra resize() funktionen altså :)
Avatar billede coderdk Praktikant
28. august 2006 - 00:17 #3
Prøv at lave linjen:

        $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"blank_\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";

om til:

        $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"galPic\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";
Avatar billede nielspt Nybegynder
28. august 2006 - 00:23 #4
Det ændrede desværre ikke noget..

Jo, det var vidst dig, der hjalp mig med koden i sin tid :-)
Avatar billede nielspt Nybegynder
28. august 2006 - 00:33 #5
hvad er target=\"galPic\" egentlig også? Det har jeg aldrig hørt om før..? :)
Avatar billede coderdk Praktikant
28. august 2006 - 00:57 #6
Det var underligt, jeg kan heller ikke få det til at virke, faktisk - Det virker dog i IE, har jeg lige fundet ud af...

Anyway, target i en <a> fortæller at linket skal åbnes i et vindue med navnet der står i, i dette tilfælde galPic...

Prøvede lige at eksperimentere med javascript's window.open, men den vil firefox heller ikke gå med til, hvor IE vil...
Avatar billede coderdk Praktikant
28. august 2006 - 01:13 #7
Uuunderligt. Nu har jeg fået det til at virke, men med lidt besvær :P Det kan måske gøres simplere, men jeg gider ikke eksperimentere mere, så du får det der virker :)
Før linjen:

<div id="container"><?= $out ?></div>

Indsættes:

    <script type="text/javascript">
        var galPic = null;
        function ow(url)
        {
            closeWin();
            galPic = window.open( url, 'galPic', 'toolbar,menubar,scrollbars,resizable,location,height=450,width=700' );
            galPic.focus();
        }
        function closeWin()
        {
          if ( galPic != null )
          {
              if ( !galPic.closed )
                galPic.close();
          }
        }
    </script>

og linjen:

  $out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"galPic\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";

rettes til:

  $out .= "<a href=\"$c[imageDir]/$files[$i]\" onclick=\"ow('$c[imageDir]/$files[$i]'); return false;\" target=\"galPic\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";
Avatar billede nielspt Nybegynder
28. august 2006 - 12:02 #8
Okay, nu åbner den hvert billede i ny side (der lægger sig øverst), efter den har lukket den forgående ned.

Men jeg vil stadig meget gerne have en 'næste billede' knap, så man ikke behøver thumbnail-siden for at vælge næste billede (eller forrige).. Er det til at implementere? Du ved - ligesom tre pile, én tilbage én 'op' og én frem..

Ellers mange tak so far..
Avatar billede coderdk Praktikant
28. august 2006 - 12:05 #9
Mjah, så skal der laves en del om, da billedet jo åbner for sig selv i et nyt vindue - Der skal så laves en ny "visningsside" som der ikke var der før...
Avatar billede nielspt Nybegynder
28. august 2006 - 12:38 #10
Kan man håbe på hjælp til dette? :) Mine besøgende har nemmelig brokket sig ret meget over den 'gamle' metode..
Avatar billede nielspt Nybegynder
28. august 2006 - 16:11 #11
Du sidder tilfældigvis ikke med et andet system jeg så kan benytte - ét der er lidt mere brugervenligt? :-)
Avatar billede coderdk Praktikant
28. august 2006 - 17:20 #12
Nej ikke lige, desværre :) Jeg bruger selv coppermine, som er lidt mere avanceret...
Avatar billede coderdk Praktikant
28. august 2006 - 17:21 #13
Avatar billede nielspt Nybegynder
28. august 2006 - 22:59 #14
Ja, den ser fin ud - bortset fra at den ikke selv laver thumbs..

Kan man omskrive den kode jeg postede i start-indlægget, til at spytte thumbs ud i .gif-format? (den laver dem i .jpg lige nu)
Avatar billede coderdk Praktikant
29. august 2006 - 00:04 #15
Hvis det er billeder er jpg langt bedre end gif... Men jo, det tror jeg da. Disse linjer:

        $dstim = imagecreatetruecolor( $nw, $nh );
        imagecopyresampled( $dstim, $srcim, 0, 0, 0, 0, $nw, $nh, $ow, $oh );
        imagejpeg( $dstim, $c['thumbDir'] . "/" . basename( $filename ), 85 );

skal ændres til:

        $dstim = imagecreate( $nw, $nh );
        imagecopyresized( $dstim, $srcim, 0, 0, 0, 0, $nw, $nh, $ow, $oh );
        imagegif( $dstim, $c['thumbDir'] . "/" . basename( $filename ) . ".gif" );

og denne linje:

$out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"blank_\"><img src=\"$c[thumbDir]/$files[$i]\" style=\"border: 0px\"></a></div>\n";

skal rettes til:

$out .= "<a href=\"$c[imageDir]/$files[$i]\" target=\"blank_\"><img src=\"$c[thumbDir]/$files[$i].gif\" style=\"border: 0px\"></a></div>\n";

Så *tror* jeg det vil virke...
Avatar billede nielspt Nybegynder
29. august 2006 - 00:22 #16
Næsten.! :-)

Hvis navnet på originalen er: test.jpg
så laver den thumb'en som: test.jpg.gif

Kan man få det til at blive nøjagtigt det samme - bortset fra fil-extention'en.? - Altså test.jpg og test.gif?
Avatar billede nielspt Nybegynder
29. august 2006 - 00:28 #17
Hmm... Lige meget.. :-( Det vil alligevel ikke virke..

Det var bare fordi at galleriet på http://dave.imarc.net/php/ vil have thumbs og originale billeder i samme directory - og med samme navn, hvor thumbs er med .gif-extention, og originalen med .jpg-extention.

Jeg må ud og lede med lys og lygte efter et ordentligt og brugervenligt galleri-script, der selv laver thumbs...

Men mange tak for hjælpen!
Avatar billede coderdk Praktikant
29. august 2006 - 00:38 #18
Ok, beklager :)
Avatar billede nielspt Nybegynder
29. august 2006 - 10:39 #19
Helt ok - smid gerne et svar, så jeg kan lukke spørgsmålet.
Avatar billede coderdk Praktikant
29. august 2006 - 12:04 #20
Nej tak du, bare tag dem selv :)
Avatar billede nielspt Nybegynder
29. august 2006 - 13:03 #21
Ok - så lukker jeg..
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester