동적 이미지 갤러리

StackOverflow https://stackoverflow.com/questions/1896147

  •  19-09-2019
  •  | 
  •  

문제

안녕하세요, 첫 포스팅이에요 :D

문제:

여러 사이트에서 쉽게 재사용할 수 있는 슬라이드 쇼가 아닌 템플릿 갤러리를 만들려고 합니다.
주로 소유자가 그림을 추가하기 위해 코드를 업데이트하는 방법을 모르는 빠른 Folio 사이트에 사용됩니다.

선택한 디렉터리에서 모든 이미지 파일을 읽어야 합니다.(JPG, GIF, PNG, BMP) 코드 변경없이 콘텐츠를 업데이트 할 수 있어야합니다.(폴더에서 동적로드) 보는 페이지에 IMG 태그를 작성해야합니다.(사용자 정의/CSS를 위해 JavaScript를 사용합니까?)

php/JavaScript의 img 태그 출력 세트는 클릭 시 전체 정의 그림에 연결되는 축소판이어야 하며, 처음에 링크를 만들 때 JavaScript로 처리할 수 있습니다.

진전:

폴더에서 파일을 읽고 JavaScript에서 사용할 수 있도록 URL을 배열에 저장하는 PHP 스크립트를 찾았습니다.그러나 그림을 표시하는 데 사용되는 코드는 단일 블록 슬라이드 쇼로 수행됩니다. 여기서는 동일한 이미지의 src를 바꾸는 것이 아니라 모든 이미지를 별도로 게시해야 합니다.

예:

루트/index.htm -pastebin[.]com/m52568ed5
루트/이미지/getimages.php -pastebin[.]com/f5395a572
루트/이미지/pic01.png
루트/이미지/pic03.jpg
루트/이미지/asdfs.gif

그렇다면 JavaScript가 galleryarray[curimg]를 반복하고 내 링크를 작성하도록 하려면 어떻게 해야 합니까?

여기까지 왔는데 막혔어요.

function rotateimages(){
 // document.getElementById("slideshow").setAttribute("src", "res/gallery/painting/"+galleryarray[curimg])
 // curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
 for (curimg=1;curimg!=0;curimg++;) {
 document.write("<div><img class='gallery' src='" + galleryarray[curimg] + "' /></div>")
 }
}

미리 감사드립니다, 브래든.

편집하다:여기 무슨 일이 일어나고 있는지 보여줄 내 샌드박스가 있습니다

-편집하다:링크 삭제됨

예를 들어 전체 섹션을 간단한 에코로 바꾸는 경우 항목당 출력을 어떻게 변경하더라도 내가 얻는 것은 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>My Gallery</title>
    </head>

    <body>
        <div id="gallery"></div>
    </body>
</html>

'foreach()'를 실행하려고 할 때 멈추는 것 같습니다.

현재 PHP는 다음과 같습니다.

<?php

function getDirTree($dir,$p=true) {
    $d = dir($dir);$x=array();
    while (false !== ($r = $d->read())) {
        if($r!="."&&$r!=".."&&(($p==false&&is_dir($dir.$r))||$p==true)) {
                $x[$r] = (is_dir($dir.$r)?array():(is_file($dir.$r)?true:false));
        }
    }

    foreach ($x as $key => $value) {
        if (is_dir($dir.$key."/")) {
                $x[$key] = getDirTree($dir.$key."/",$p);
        }
    }

    ksort($x);
    return $x;
}

$tree = getDirTree("./res/gallery/");

echo '<div id="gallery">';

foreach($tree as $element => $eval) {
    if (is_array($eval)) {

        foreach($eval as $file => $value) {
                if (strstr($file, "jpg")) {
                        $file = 'res/gallery/'.$element.'/'.$file;
                        echo 'test'; //test//echo '<a href="'.$file.'">test</a>'; //test// <img class="gallery" src="'.$file.'" alt="'.$file.'"/></a>';
                }
        }


    }
}
echo '</div>';

제가 이 일을 시작하기 전에는 PHP를 한 번도 해본 적이 없어서 괜찮다고 생각합니다.

도움이 되었습니까?

해결책

매우 간단한 자동 갤러리 스크립트, photos.php:

<?php
function getDirTree($dir,$p=true) {
    $d = dir($dir);$x=array();
    while (false !== ($r = $d->read())) {
        if($r!="."&&$r!=".."&&(($p==false&&is_dir($dir.$r))||$p==true)) {
            $x[$r] = (is_dir($dir.$r)?array():(is_file($dir.$r)?true:false));
        }
    }

    foreach ($x as $key => $value) {
        if (is_dir($dir.$key."/")) {
            $x[$key] = getDirTree($dir.$key."/",$p);
        }
    }

    ksort($x);
    return $x;
}

$tree = getDirTree("./foto/");

echo '<div id="gallery">';
echo '<ul class="linone">';
foreach($tree as $element => $eval) {
    if (is_array($eval)) {
        echo '<li><h4>'.$element.'</h4>';
        echo '<ul class="linone photos">';
        foreach($eval as $file => $value) {
            if (strstr($file, "jpg")) {
                $file = 'foto/'.$element.'/'.$file;
                echo '<li><a href="'.$file.'"><img src="'.$thumb.'" alt="'.$thumb.'"/></a></li>';
            }
        }
        echo '</ul>';
        echo '</li>';
    }
}
echo '</ul>';
echo '</div>';

또한 저는 이 갤러리를 보기 편하게 만들기 위해 라이트박스 jQuery 플러그인을 사용합니다.

또한 이 페이지의 사진을 관리하는 것은 매우 간단합니다. .jpg 파일을 사진 디렉터리(이 예에서는 '/foto/')에 업로드하기만 하면 됩니다.

index.php:

<!DOCTYPE html>
<html>
    <head>
        <title>My Gallery</title>
    </head>

    <body>
        <?php require_once('photos.php') ?>
    </body>
</html>

이 파일에는 photos.php 파일이 포함되어 실행되며, 태그 사이에 photos.php 스크립트의 출력이 표시됩니다.

다른 팁

PHP를 사용하여 img 태그를 작성할 수 있습니다.

또한 for 루프는 항상 true인 종료 조건을 갖기 때문에 무한히 실행됩니다.

편집하다:귀하의 페이스트빈을 살펴보면 PHP의 작동 방식을 오해한 것 같습니다. <script src="res/getimages.php"></script> 클라이언트 측에서 스크립트 태그를 읽으므로 작동하지 않습니다.PHP는 서버 측에서 실행됩니다.달리다 res/getimages.php, 다음과 같은 작업을 수행해야 합니다.

<?php //This is a PHP opening tag; anything after this is PHP code
include('res/getimage.php'); //Imports the PHP file into index.php
?> <!--this is the closing PHP tag - anything after this is HTML -->

다음과 같은 빠른 튜토리얼을 통해 작업하는 것이 좋습니다. W3Schools PHP 튜토리얼, 이 문제를 해결하는 데 정말 도움이 될 것입니다.동일 자바스크립트.이 모든 것이 어떻게 작동하는지에 대해 계속 질문할 수는 있지만 결코 실제로 이해하지 못할 것이며 모든 부분을 하나로 묶는 방법을 알아낼 수 없을 것입니다.몇 시간만 기다려 주세요!

도움을 주신 모든 분들께 감사드리며, 약간의 수정 후에도 완벽하게 작동하는 갤러리 스크립트를 제공해주신 Sergey Kunetsov에게 큰 감사를 드립니다.

그리고 그것을 원하는 사람을 위해 여기에 최종 작업 PHP가 있습니다.

http://pastebin.com/f442f31f3

표시되는 폴더는 $path입니다.

즐거운 시간 보내시고 다시 한번 감사드립니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top