PHP와 Highslide를 사용하여 이미지 슬라이드쇼 만들기-PHP 튜토리얼-php.cn

PHP와 Highslide를 사용하여 이미지 슬라이드쇼 만들기

王林

풀어 주다： 2023-05-11 10:02:02

원래의

1607명이 탐색했습니다.

인터넷 기술의 발달로 인해 웹사이트의 디스플레이 효과가 점점 더 중요해지고 있습니다. 그림은 페이지의 공통 요소이며 웹사이트에서 제품, 서비스 또는 회사 정보를 표시하는 데 자주 사용됩니다. 그러나 단순한 정적인 이미지 디스플레이라면 사용자의 관심을 끌 수 없습니다. 따라서 사용자가 탐색에 더 흥미를 갖도록 하려면 웹사이트에 이미지의 동적 표시를 구현하는 것이 매우 필요합니다.

이 글에서는 PHP와 Highslide를 사용하여 사진 슬라이드쇼를 만드는 방법을 소개합니다. Highslide는 이미지를 더욱 아름답게 표시할 수 있는 고품질 JavaScript 이미지 팝업 효과 플러그인으로, 크기 조정, 회전, 페이드인 및 페이드아웃 등 다양한 효과도 제공합니다.

1단계: 준비

Highslide를 사용하기 전에 Highslide 압축 패키지를 다운로드하여 압축을 풀어야 합니다. 다운로드 주소는 http://highslide.com/download/입니다. 압축을 풀면 highslide와 highslide-with-gallery라는 두 개의 폴더를 얻을 수 있습니다.

highslide 폴더에는 Highslide의 핵심 파일이 포함되어 있고 highslide-with-gallery 폴더에는 이미지 표시 예제와 갤러리 및 썸네일 탐색과 같은 고급 기능이 포함되어 있습니다.

다운로드한 폴더를 웹사이트의 루트 디렉터리에 복사하세요.

2단계: HTML 코드 작성

웹 페이지에서는 먼저 Highslide의 핵심 파일을 소개해야 합니다. HTML 코드의 태그에 다음 코드를 추가합니다.

<head>
    <script type="text/javascript" src="highslide/highslide.js"></script>
    <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>

로그인 후 복사

그 중 첫 번째 코드 줄은 Highslide를 소개하는 기본 JavaScript 파일을 나타내고, 두 번째 코드 줄은 Highslide를 소개하는 스타일 시트 파일을 나타냅니다. . 이 두 파일을 가져와야 합니다.

다음으로 표시할 이미지를 정의해야 합니다. 코드는 다음과 같습니다.

<body>
    <div class="highslide-gallery">
        <a href="images/picture1.jpg" class="highslide" onclick="return hs.expand(this)">
            <img src="images/picture1_small.jpg" />
        </a>
        <a href="images/picture2.jpg" class="highslide" onclick="return hs.expand(this)">
            <img src="images/picture2_small.jpg" />
        </a>
        <a href="images/picture3.jpg" class="highslide" onclick="return hs.expand(this)">
            <img src="images/picture3_small.jpg" />
        </a>
    </div>
</body>

로그인 후 복사

위 코드는 세 개의 a 태그가 포함된 "highslide-gallery"라는 이름의 div를 정의합니다. 각 태그는 표시할 이미지를 나타냅니다. 그 중 href 속성은 원본 이미지의 경로를 나타내고, img 태그의 src 속성은 썸네일의 경로를 나타냅니다. 동시에 각 태그에는 class="highslide" 속성을 추가해야 합니다. 이 속성은 Highslide에게 이것이 그림 팝업 효과를 생성하는 요소임을 알려줍니다.

3단계: Highslide 구성 파일 만들기

Highslide의 구성 파일은 JavaScript로 작성되었으며 이미지 팝업 효과에 대한 다양한 매개변수를 설정할 수 있습니다.

웹사이트의 루트 디렉터리에 다음 코드를 사용하여 "highslide.config.js"라는 JavaScript 파일을 만듭니다.

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.showCredits = false;
hs.align = 'center';
hs.marginBottom = 80;
hs.marginLeft = 50;
hs.marginRight = 50;
hs.marginTop = 80;

로그인 후 복사

위 코드는 GraphicsDir(고급 이미지 디렉터리),outlineType( 윤곽선 유형), showCredits(Highslide 로고 표시), align(정렬), marginBottom(하단 여백), marginLeft(왼쪽 여백), marginRight(오른쪽 여백) 및 marginTop(상단 여백) 등

4단계: PHP 코드 작성

고화질 이미지를 페이지에 표시하려면 PHP를 사용하여 필요에 따라 이미지를 압축해야 합니다.

<?php
    $image = 'picture1.jpg'; // 原图名称
    $width = 800; // 最大宽度
    $height = 600; // 最大高度
    $quality = 80; // 图片质量

    header('Content-Type: image/jpeg');

    list($originalWidth, $originalHeight) = getimagesize($image);

    $ratio = min($width / $originalWidth, $height / $originalHeight);

    $newWidth = $originalWidth * $ratio;
    $newHeight = $originalHeight * $ratio;

    $newImage = imagecreatetruecolor($newWidth, $newHeight);

    $source = imagecreatefromjpeg($image);
    imagecopyresampled($newImage, $source, 0, 0, 0, 0, $newWidth, $newHeight, $originalWidth, $originalHeight);

    imagejpeg($newImage, null, $quality);
?>

로그인 후 복사

위 코드에서는 getimagesize 함수를 통해 이미지의 원래 너비와 높이를 구한 후, imagecopyresampled 함수를 통해 이미지의 크기를 조정하고 최종적으로 이미지가 출력됩니다.