Buat tayangan slaid imej menggunakan PHP dan Highslide-tutorial php-php.cn

Buat tayangan slaid imej menggunakan PHP dan Highslide

王林

Lepaskan： 2023-05-11 10:02:02

asal

1607 orang telah melayarinya

Dengan perkembangan teknologi Internet, kesan paparan tapak web menjadi semakin penting. Gambar ialah elemen biasa pada halaman dan sering digunakan pada tapak web untuk memaparkan produk, perkhidmatan atau maklumat syarikat. Walau bagaimanapun, jika ia hanya paparan imej statik yang mudah, ia tidak dapat menarik perhatian pengguna. Oleh itu, adalah sangat perlu untuk melaksanakan paparan imej yang dinamik di laman web untuk menjadikan pengguna lebih berminat untuk melayari.

Artikel ini akan memperkenalkan cara menggunakan PHP dan Highslide untuk membuat persembahan slaid gambar. Highslide ialah pemalam kesan pop timbul imej JavaScript berkualiti tinggi Ia boleh menjadikan paparan imej lebih cantik, dan juga mempunyai pelbagai kesan seperti penskalaan, putaran dan fade-in dan fade-out.

Langkah 1: Penyediaan

Sebelum menggunakan Highslide, anda perlu memuat turun dan nyahmampat pakej Highslide mampat. Alamat muat turun ialah: http://highslide.com/download/. Selepas penyahmampatan, anda boleh mendapatkan dua folder: highslide dan highslide-with-galery.

Folder highslide mengandungi fail teras Highslide, manakala folder highslide-dengan-galeri mengandungi contoh paparan imej dan ciri lanjutan, seperti galeri dan navigasi lakaran kecil.

Salin folder yang dimuat turun ke direktori akar tapak web.

Langkah 2: Tulis kod HTML

Dalam halaman web, anda perlu memperkenalkan fail teras Highslide terlebih dahulu. Tambahkan kod berikut dalam teg kod HTML:

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

Salin selepas log masuk

Antaranya, baris pertama kod mewakili fail JavaScript utama yang memperkenalkan Highslide, dan baris kedua kod mewakili helaian gaya fail yang memperkenalkan Highslide. Kedua-dua fail ini mesti diimport.

Seterusnya, anda perlu menentukan imej yang akan dipaparkan. Kodnya adalah seperti berikut:

<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>

Salin selepas log masuk

Kod di atas mentakrifkan div bernama "highslide-gallery", yang mengandungi tiga tag a. Setiap teg mewakili imej yang akan dipaparkan. Antaranya, atribut href mewakili laluan imej asal, dan atribut src dalam teg img mewakili laluan lakaran kecil. Pada masa yang sama, setiap teg juga perlu menambah atribut class="highslide", yang memberitahu Highslide bahawa ini adalah elemen untuk mencipta kesan pop timbul gambar.

Langkah 3: Buat fail konfigurasi Highslide

Fail konfigurasi Highslide ditulis dalam JavaScript dan boleh menetapkan pelbagai parameter untuk kesan pop timbul imej.

Dalam direktori akar tapak web, buat fail JavaScript bernama "highslide.config.js" dengan kod berikut:

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;

Salin selepas log masuk

Kod di atas menetapkan beberapa parameter asas Highslide, termasuk graphicsDir (Direktori imej lanjutan), outlineType (jenis outline), showCredits (tunjukkan logo Highslide), align (penjajaran), marginBottom (margin bawah), marginLeft (margin kiri), marginRight (margin kanan) dan marginTop (margin atas) )tunggu.

Langkah 4: Tulis kod PHP

Untuk membolehkan imej definisi tinggi dipaparkan pada halaman, PHP perlu digunakan untuk memampatkan imej mengikut keperluan.

<?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);
?>

Salin selepas log masuk

Dalam kod di atas, lebar dan ketinggian asal imej diperoleh melalui fungsi getimagesize, dan kemudian imej itu diskalakan melalui fungsi imagecopyresampled, dan imej akhirnya dikeluarkan.

Langkah 5: Uji

Simpan kod di atas ke dalam fail PHP bernama "index.php", dan kemudian akses fail dalam penyemak imbas untuk melihat kesan paparan Slaid imej yang dicipta. Dalam Highslide, anda boleh menyeret dengan tetikus, zum masuk dan keluar dengan roda, dsb., yang mempunyai kesan yang lebih baik pada pengalaman pengguna.

Kesimpulan

Melalui langkah di atas, kita boleh menggunakan PHP dan Highslide untuk mencipta tayangan slaid gambar untuk menjadikan paparan gambar laman web lebih cantik dan dinamik. Pada masa yang sama, anda boleh mengubah suai mengikut keperluan anda sendiri untuk mengembangkan lebih banyak fungsi dan kesan.

Atas ialah kandungan terperinci Buat tayangan slaid imej menggunakan PHP dan Highslide. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!