Sự miêu tả. Trình chiếu hình ảnh toàn màn hình là một trình chiếu thú vị sử dụng jQuery và PHP để tự động hiển thị các hình ảnh lớn từ một thư mục và sử dụng toàn bộ cửa sổ trình duyệt làm khung vẽ của nó. Hình thu nhỏ của mọi hình ảnh được hiển thị ở cuối trình chiếu để dễ dàng xem theo yêu cầu. Hãy xem danh sách các tính năng của tập lệnh này
- Hiển thị từng hình ảnh trong trình chiếu bằng toàn bộ chiều rộng và chiều cao của cửa sổ trình duyệt. Hình ảnh được tự động thay đổi kích thước và căn giữa
- Sử dụng PHP để tự động lấy tất cả hình ảnh trong một thư mục cụ thể như một phần của hình ảnh trình chiếu. Chỉ cần thả phần tệp PHP của tập lệnh vào thư mục mong muốn
- Hình ảnh có thể được sắp xếp và hiển thị theo tên tệp hoặc ngày
- Hình ảnh thu nhỏ được tạo từ một thư mục riêng chứa các phiên bản nhỏ hơn của mỗi hình ảnh. Điều này giảm thiểu việc tải xuống các phiên bản lớn hơn cho đến khi được yêu cầu
- Tập lệnh có thể được đặt để tùy chọn tự động xoay hình ảnh sau mỗi x giây
Ví dụ. Nhấn vào đây để trình diễn
Hướng
Bước 1. Thêm đoạn mã sau vào phần của trang trống. Đây là trang bạn muốn hiển thị trình chiếu trong
Tải về bên dưới kèm theo. js và lưu nó vào cùng thư mục với trang trên [nhấp chuột phải và chọn "lưu dưới dạng"]
Bước 2. Chuyển đến thư mục trong trang web của bạn sẽ chứa hình ảnh bạn muốn hiển thị như một phần của trình chiếu và giải nén nội dung của tệp sau vào thư mục này
fpslideshowphp. khóa kéo
Nó chứa các tập tin sau
- thử nghiệm. htm
- fpslideshowvar. php
- ảnh mẫu1. jpg
- hình ảnh mẫu2. jpg
vv - /thumbnails/sampleimage1. jpg
- /thumbnails/sampleimage1. jpg
vv
Nó là fpslideshowvar. php sẽ đọc tất cả các hình ảnh trong thư mục chứa nó và sử dụng chúng như một phần của trình chiếu. Thư mục con thumbnails/ phải chứa các phiên bản hình thu nhỏ của các đối tác lớn hơn của chúng trong thư mục mẹ. Tên tệp của hình thu nhỏ phải giống với hình ảnh lớn hơn'
Bạn có nhớ mã của Bước 1 ở trên không? . php được đặt trên trang web của bạn
Đó là nó. Khi bạn đi demo. htm trên trang web của bạn bây giờ, bạn sẽ thấy bản trình chiếu hoạt động trên trang web của mình hiển thị các hình ảnh mẫu có trong tệp zip ở trên. Để hiển thị hình ảnh của riêng bạn, hãy xóa hình ảnh mẫu và tải lên hình ảnh của riêng bạn. Đừng quên rằng bạn cũng cần tạo các phiên bản hình thu nhỏ của những hình ảnh tương tự này và tải chúng lên thư mục phụ thumbnails/. Một chương trình phần mềm miễn phí tốt để dễ dàng thực hiện việc này mà tôi khuyên dùng là Mihov Image Resizer
Các tùy chỉnh bổ sung
Bên trong trình chiếu fps. js ở cuối, bạn sẽ tìm thấy mã khởi tạo để bắt đầu tập lệnh
trình chiếu toàn trang. init[{ //khởi tạo tập lệnh
imagesobj. fpslideshowvar, //không cần thay đổi. Biến đối tượng tham chiếu hình ảnh như được tạo bên trong "fpslideshowvar. php"
thumbdir. 'hình thu nhỏ', //thư mục phụ ngay bên dưới thư mục hình ảnh chính chứa các phiên bản hình thu nhỏ.
sắp xếp. 'ngày', //sắp xếp theo "ngày" hoặc "tên tệp"
độ mờ. 1000,
thứ nguyên. [30,30],
tự động xoay. {đã bật. sai, tạm dừng. 4000}
}]
Tùy chỉnh mã này để thay đổi những thứ như thứ tự của hình ảnh khi hiển thị [sắp xếp theo tên tệp hoặc ngày], kích thước của hình thu nhỏ và cả việc bản trình chiếu có tự động xoay hay không. Dưới đây là mô tả của từng tùy chọn
Các tham số [như 15 ảnh trên mỗi trang và thời gian được sử dụng để trộn] có thể được thay đổi dễ dàng, chỉ cần mở tệp php bằng trình soạn thảo văn bản và xem một vài dòng đầu tiên. Các thông số quan trọng là. $GD_WORKAROUND="";//set this to "oldGD" or "newGD" to switch off automatic GD version detection
//set to "oldGD" if you experience any trouble with the browse mode!
$browsertitle="Image browser";
$slidetitle= "Slideshow";
$autoplay= true; //Shall presentation start automatically in slideshow mode?
$stopOnMouseOver=false;//Shall playing be interrupted while the mouse is over a photo [slideshow mode]?
$imgsperline=5; //5 rows
$maxperpage=$imgsperline*3; //3 columns
$thumbQuality=90; //jpeg compression of thumbs [0 worst, 100 best quality but also largest size]
$resample=true; //resample images when creating thumbs - set to true if you have
//a fast server as quality is a lot better, but takes a bit of processing
$lang="auto"; //"auto": use preferred language if available or English if we don't have a translation for the preferred language
//for one fixed language this can also be set to "English" or "German" or "Swedish" or "Dutch" or "Norwegian" or
//"Portuguese" or "French" or "Russian" or "Spanish" or "Italian"
$basePath="./"; //use "." for browsing current directory
//or for example "./photos" to browse subdir photos
$preloadForward=4;//how many pictures do you want to preload ahead?
$useFading =true; //do you want to blend between images? - Especially if you expect many people with old
//PCs to access your page you might want a false here. N.B.: Fading does not work in oldGD mode!
$fadeMode =rand[0,3];//0:classic, 1:right-to-left, 2:left-to-right, 3:square fading type
$fadeColor =255; //fade to this grey tone [e.g. 255 is #FFFFFF, 0 equals #000000]
$fadeSteps =4; //how many shade levels for fadeing
$fadeTime =70; //milliseconds for one shade level
//[i.e. overall fade time = $fadeSteps*$fadeTime;
// overall fade time must not be bigger than 1200!]
$startFit =true; //shall the slideshow initially fit images to screen or show the actual size
$allowZip =true; //set to false if you do not want to make it easy for people to get
//your photos or save bandwith
$aftertext ="If you are shown on a picture and don't want this let me know and I will remove it.
This page is autogenerated, get the script here.
";
//comes after the rest of the page at the bottom
//Some kind of disclaimer is surely useful and I would really
//very much appreciate it if you let people where they can
//get this script, but it's up to you if and where to do it.
$wiwiMargin=50; //the space reserved around the currently displayed picture in
$wiheiMargin=123; //auto-fit slideshow mode [width/height], might need to be
//bigger if you have free webspace with autogenerated advertisments