Hoạt hình - lật trang. Lật trang JQuery - hiệu ứng chuyển trang trong jquery

Nhiều trang web sử dụng các plugin jQuery như thế này để cung cấp danh mục sản phẩm, tài liệu quảng cáo bán hàng, v.v. và tất cả những điều này đều có lý do. Các giải pháp jQuery cho phép bạn cuộn qua các khối nội dung mang lại cho người dùng của bạn rất nhiều Một cách thuận tiện xem bạn có gì để cung cấp cho họ. Nếu thực hiện đúng cách, những tờ rơi quảng cáo điện tử như vậy sẽ hoạt động không thua kém gì những tờ rơi in thật mà bạn có thể cầm trên tay. Với sự trợ giúp của các plugin đặc biệt, bạn có thể cho phép khách truy cập trang web của mình dễ dàng lật trang và cảm thấy như thể họ đang đọc một cuốn sách thực sự.

Sử dụng plugin hiệu ứng vuốt jQuery sẽ cho phép bạn trình bày nội dung trang web của mình theo cách hấp dẫn hơn. Trước khi chọn giải pháp phù hợp cho mình, bạn nên đạt được một số kỹ năng kỹ thuật. Một số plugin vẫn dựa trên Flash và do đó chúng không cho phép người dùng tìm kiếm tài liệu theo cách thích hợp và ngoài ra, chúng sẽ không hoạt động trên thiết bị iOS. Điều này có tác động tiêu cực đến việc tối ưu hóa SEO và cũng sẽ dẫn đến việc người dùng không tìm thấy thông tin họ quan tâm. Các plugin lật dựa trên jQuery cho phép bạn tránh được tất cả những vấn đề này. Để giúp bạn tìm được tập lệnh phù hợp, hôm nay chúng tôi quyết định cung cấp cho bạn tuyển tập một số plugin jQuery tốt nhất để triển khai hiệu ứng lật.

Bộ sưu tập này bao gồm hơn 20 plugin jQuery với mục đích tương ứng sẽ cho phép bạn triển khai cơ chế chuyển trang. Mỗi plugin được trình bày đều có các thuộc tính riêng, vì vậy chúng tôi khuyên bạn nên tự làm quen với từng plugin. Sau đó, tôi muốn bạn bày tỏ quan điểm của mình về plugin bạn đã chọn để giúp người đọc khác tránh được. tìm kiếm thông thường. Chúng tôi cảnh báo trước với bạn rằng một số giải pháp được cung cấp đều phải trả phí.

Plugin này tạo một thư viện hình ảnh dưới dạng tạp chí. Bạn có thể lật các trang sách để xem trước đó hoặc hình ảnh sau đây chỉ bằng cách kéo các góc hoạt hình xuất hiện khi bạn di chuột qua thư viện.

Booklet là một công cụ jQuery để hiển thị nội dung khi lật trang. Nó được phát triển dựa trên thư viện jQuery. Nó lan rộng dưới thỏa thuận cấp phép MIT và GPL.

jPageFlip là một plugin jQuery để mô phỏng quá trình lật trang. Để sử dụng jPageFlip, bạn sẽ phải nhúng tệp jQuery.js. jPageFlip có khả năng tùy biến cao. Nó được lên kế hoạch để thêm nhiều tùy chọn cài đặt hơn trong các phiên bản tương lai. jPageLật trên khoảnh khắc này dựa trên "canvas", chỉ được hỗ trợ trong Firefox, Chrome, Opera và Safari (và trong các phiên bản mới nhất).

Flippy là một plugin jQuery để tạo hiệu ứng lật trang trên nhiều trình duyệt cho phép bạn "lật" bất kỳ phần tử HTML nào bạn muốn.

Plugin imBookFlip có thể tải sách vào iframe hoặc trực tiếp trên trang. Bạn có thể chuyển trang sách sang lật thủ công, bật tự động lật trang ngay sau khi tải trang hoặc cài đặt chức năng bật lật trang sau khi bấm vào bìa. Bạn cũng có thể dễ dàng thêm âm thanh bằng Trình quản lý âm thanh.

Flip là một plugin jQuery có thể dễ dàng lật các phần tử trên trang của bạn theo 4 hướng.

FlipPage là một plugin jQuery mô phỏng việc lật trang như trong một cuốn sách.
Plugin ban đầu được phát triển để thuyết trình; nó cũng tìm thấy vị trí của nó trong các thiết bị như sách điện tử. Plugin này được thiết kế để khai thác sức mạnh của phần cứng đồ họa để chơi hình ảnh động mượt mà trên HTML5/CSS3.

Thanh trượt có khả năng thay đổi hình ảnh từ danh mục đầu tư, lướt qua chúng khi người dùng nhấp vào điều khiển. Nghĩa là khi người dùng nhấp vào hình ảnh, nó bắt đầu xoay 360 độ và khi hoạt ảnh kết thúc, người dùng sẽ nhìn thấy một hình ảnh mới.

Turn.js là một thư viện JavaScript sẽ biến nội dung của bạn thành một cuốn sách hoặc tạp chí gần như thực tế với tất cả lợi ích của HTML5. Internet đã thay đổi đáng kể với sự ra đời của giao diện dựa trên HTML5. Turn.js lý tưởng để xuất bản tạp chí, sách hoặc danh mục dựa trên HTML5.

Plugin này tạo hiệu ứng chuyển trang lên trên hoặc bên trong các hình ảnh được hiển thị giống với đồ họa 2D.

Mỗi ngày jQuery ngày càng trở nên phổ biến hơn nhờ sự tiện lợi, linh hoạt và tốc độ của nó. Hoạt hình kiểu notepad này lý tưởng để trình bày thông tin trên trang web.

BookBlock là một plugin jQuery mà bạn có thể sử dụng để tạo các thành phần kiểu tập sách nhỏ giúp bạn có khả năng triển khai điều hướng lật trang. Bạn có thể sử dụng bất kỳ nội dung nào ở đây, có thể là hình ảnh hoặc văn bản. Plugin chỉ chuyển đổi cấu trúc khi cần thiết (ví dụ: khi lật một trang) và sử dụng lớp phủ ở dạng bóng cho các trang, mang lại cảm giác chân thực.

FlipBook có khả năng thu thập nhiều hình ảnh và sau đó tạo hiệu ứng động cho chúng. Mỗi hình ảnh được hiển thị trong một khoảng thời gian ngắn và sau đó được thay thế bằng một hình ảnh khác trong danh sách. Hoạt ảnh bắt đầu khi hình ảnh đầu tiên được tải đầy đủ và những hình ảnh chưa được tải xuống từ máy chủ sẽ bị bỏ qua. Chúng chỉ được đưa vào hoạt ảnh sau khi được trình duyệt tải đầy đủ.

Metro JS là một plugin javascript dành cho jQuery được thiết kế để cung cấp cho bạn khả năng tạo giao diện kiểu Metro. Bản phát hành này tập trung vào Live Tiles, Application Bar và Theming. Hiện tại nó đang trong giai đoạn phát triển ban đầu nhưng tất cả các tính năng sẽ hoạt động trên IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera và Safari(OSX/iOS).

Một cải tiến thú vị đối với tài liệu PDF siêu văn bản là thêm hiệu ứng lật trang cho tài liệu đó. Ngoài ra, bạn có thể tích hợp các yếu tố đa phương tiện vào tài liệu: chèn hình ảnh, thêm âm thanh và video.

Một món đồ chơi như vậy - một tài liệu đa phương tiện - có thể hữu ích ở đâu và để làm gì? Có lẽ trước hết là khi tạo bài thuyết trình. Các hiệu ứng bổ sung ban đầu sẽ trang trí cho trình chiếu và thêm thông tin vào tài liệu. Một món quà hoặc kho lưu trữ độc quyền sẽ là một album ảnh có kèm theo các lá bài, âm nhạc và giọng nói. Ngoài ra, các tài liệu và sách 3D hấp dẫn đa phương tiện như vậy được sử dụng làm tài nguyên giáo dục để thúc đẩy việc học tập tốt hơn.

Hãy thử một số công cụ để xây dựng những sản phẩm thông tin tuyệt vời này.

Một ứng dụng máy tính để bàn phổ biến là Flip Builder. Tải xuống hàm tạo này để lật qua các tài liệu pdf từ trang web chính thức của nhà phát triển. Khai mạc trang chủđịa chỉ: flipbuilder.com và nhấp vào lá cờ Nga để Nga hóa nó. Nhấp vào nút "Tìm hiểu thêm", truy cập trang tải xuống và nhấp vào "Tải xuống" để bắt đầu quá trình tải xuống. Sau khi quá trình tải xuống hoàn tất, hãy giải nén kho lưu trữ zip và chạy tập tin cài đặt: flip-pdf-pro.exe

Chúng tôi thực hiện các bước của trình hướng dẫn cài đặt và trong cửa sổ cuối cùng, hãy nhấp vào nút “Thử”. Sau đó, giao diện ứng dụng mở ra và chúng ta bắt đầu làm việc.

Nhấp chuột Nút màu xanh lá cây"Tạo mới". Cửa sổ "Nhập PDF" xuất hiện, trong đó, sử dụng nút "Xem", mở Explorer và chọn tệp PDF được chuẩn bị để chuyển đổi trên máy tính của bạn. Sau đó nhấp vào nút "Nhập ngay":

Sau một thời gian, tài liệu sẽ mở trong ứng dụng và sẵn sàng lật qua. Bây giờ bạn có thể bắt đầu chỉnh sửa và thêm các yếu tố bổ sung vào đó.

Đầu tiên, hãy thực hành sử dụng các mẫu để thiết kế tài liệu. Các mẫu, như được nêu trong phần nhận xét, không chỉ khác nhau vẻ bề ngoài, nhưng cũng có chức năng:

Sau khi chọn mẫu thích hợp, hãy mở rộng menu cài đặt của nó. Bằng cách thay đổi giá trị của các thành phần trong danh sách, bạn có thể điều chỉnh chế độ hiển thị của bảng, nút điều khiển, v.v.:

Chúng ta đã hoàn thành mẫu và chuyển sang phần chỉnh sửa.

Tiếp theo, để làm ví dụ, tôi sẽ trình bày chi tiết cách tôi tạo một tài liệu quảng cáo đa phương tiện - một tài liệu nhỏ chuyến tham quan lịch sửở quê hương mình. Đã viết một cuốn sách về Almaty. Đã viết nó, tất nhiên, nó được nói lớn. Sao chép và dán từ nguồn khác nhau theo ý kiến của tôi, mô tả các sự kiện quan trọng trong lịch sử của thành phố. Tôi đã chỉnh sửa chúng khi cần thiết và sắp xếp chúng theo thứ tự thời gian. Tôi minh họa nội dung bằng hình ảnh phù hợp. Tôi đã thực hiện tất cả các thao tác này trong Word. Sau đó, tôi đánh số trang bắt đầu từ trang thứ 3 và tạo mục lục tương tác, như đã mô tả trong bài: siêu liên kết trong Word. Sau đó tôi đã lưu tài liệu từ định dạng Word sang PDF.

Để lồng tiếng, trước đây tôi đã chuẩn bị các tệp âm thanh ở định dạng mp3 cho mỗi trang - Tôi đã kết hợp các đoạn văn bản với các bản nhạc nền. Tôi trộn âm thanh bằng ứng dụng Audacity. Tải xuống phiên bản mới nhất các chương trình có thể được tìm thấy trên trang web chính thức của các nhà phát triển tại: http://www.audacityteam.org

Bằng cách kết nối tai nghe âm thanh, bạn có thể ghi trực tiếp âm thanh từ micrô vào trình chỉnh sửa - tạo bản nhạc hoặc nhập tệp âm thanh được chuẩn bị trước. Dễ học, trực quan chương trình rõ ràng, trong đó mỗi công cụ có một chú giải công cụ. Trong quá trình cài đặt, chọn ngôn ngữ tiếng Nga. Chúng tôi xuất dự án âm thanh đã hoàn thành và lưu nó vào tệp mp3.

Hãy quay trở lại với nhà thiết kế Flip PDF Professional.

Trong trình soạn thảo trang lật của chương trình này, sử dụng nút “thêm” để mở rộng danh sách yếu tố bổ sung và chọn phần “Thêm trình phát âm thanh”:

Cửa sổ "Loại âm thanh" sẽ xuất hiện - loại trình phát, nơi chúng tôi chọn loại trình phát, sau đó chèn nó vào mở trang tài liệu:

Bây giờ, ở phần ba bên phải của cửa sổ soạn thảo, hãy nhấp vào nút “Chọn âm thanh”, đi tới Explorer, tìm trên máy tính tệp âm thanh được chuẩn bị trước đó cho trang này và mở nó:

Trong phần này chúng ta sẽ cấu hình các chế độ hoạt động của đầu phát. Tôi đặt chế độ phát lại bắt đầu khi bạn nhấp vào trình phát để người đọc có thể lựa chọn: tự đọc hoặc nghe. Và mình chọn tắt âm thanh khi thoát trang:

Bạn cũng có thể chỉnh sửa bìa của trình phát trong cửa sổ này.

Do đó, chúng tôi cài đặt trình phát có tệp âm thanh tương ứng trên tất cả các trang tài liệu được chọn để lồng tiếng. Sau khi chỉnh sửa xong, hãy lưu các thay đổi bằng nút “Lưu và thoát”, nằm ở góc trên bên phải.

Để xuất bản tài liệu đa phương tiện đã hoàn thành, hãy sử dụng nút “Chuyển đổi” để mở danh sách các định dạng được đề xuất và chọn định dạng thích hợp:

Bạn có thể tải xuống kho lưu trữ và xem tài liệu tương tác ở định dạng này bằng liên kết: .

Các nhà phát triển công cụ xây dựng lật đã sử dụng hình mờ làm động lực để mua sản phẩm của họ. Thật vậy, một dấu hiệu như vậy ở giữa mỗi trang của tài liệu khiến nó không phù hợp để trưng bày hoặc phân phối:

Nhưng mặt khác, trong ứng dụng demo của hàm tạo này không có hạn chế nào về khối lượng của tài liệu, không giống như chương trình tương tự FlippingBook chẳng hạn, ở đâu trong phiên bản dùng thử Chỉ tải được mười trang.

Trong đó đánh giá nhỏ hiển thị một ví dụ về việc hình thành một tài liệu đa phương tiện đơn giản có điều hướng và phần đệm âm thanh. Sử dụng các khả năng chỉnh sửa khác, bạn có thể tạo các dự án thú vị và ấn tượng hơn nữa trong trình thiết kế.

Nhiều trang web sử dụng các plugin jQuery như thế này để cung cấp danh mục sản phẩm, tài liệu quảng cáo bán hàng, v.v. và tất cả những điều này đều có lý do. Các giải pháp jQuery cho phép bạn cuộn qua các khối nội dung mang đến một cách rất thuận tiện để người dùng khám phá những gì bạn cung cấp cho họ. Nếu thực hiện đúng cách, những tờ rơi quảng cáo điện tử như vậy sẽ hoạt động không thua kém gì những tờ rơi in thật mà bạn có thể cầm trên tay. Với sự trợ giúp của các plugin đặc biệt, bạn có thể cho phép khách truy cập trang web của mình dễ dàng lật trang và cảm thấy như thể họ đang đọc một cuốn sách thực sự.

Bộ sưu tập này bao gồm hơn 20 plugin jQuery với mục đích tương ứng sẽ cho phép bạn triển khai cơ chế chuyển trang. Mỗi plugin được trình bày đều có các thuộc tính riêng, vì vậy chúng tôi khuyên bạn nên tự làm quen với từng plugin. Sau đó, tôi muốn bạn bày tỏ ý kiến của mình về plugin bạn đã chọn để giúp những người đọc khác tránh khỏi việc tìm kiếm thông thường. Chúng tôi cảnh báo trước với bạn rằng một số giải pháp được cung cấp đều phải trả phí.

Plugin này tạo một thư viện hình ảnh dưới dạng tạp chí. Bạn có thể lật các trang sách để xem hình ảnh trước đó hoặc tiếp theo bằng cách kéo các góc hoạt hình xuất hiện khi bạn di chuột qua thư viện.

Booklet là một công cụ jQuery để hiển thị nội dung khi lật trang. Nó được phát triển dựa trên thư viện jQuery. Nó được phân phối theo thỏa thuận cấp phép MIT và GPL.

jPageFlip là một plugin jQuery để mô phỏng quá trình lật trang. Để sử dụng jPageFlip, bạn sẽ phải nhúng tệp jQuery.js. jPageFlip có khả năng tùy biến cao. Nó được lên kế hoạch để thêm nhiều tùy chọn cài đặt hơn trong các phiên bản tương lai. jPageFlip hiện dựa trên “canvas”, chỉ được hỗ trợ trong Firefox, Chrome, Opera và Safari (và trong các phiên bản mới nhất).

Flippy là một plugin jQuery để tạo hiệu ứng lật trang trên nhiều trình duyệt cho phép bạn "lật" bất kỳ phần tử HTML nào bạn muốn.

Flip là một plugin jQuery có thể dễ dàng lật các phần tử trên trang của bạn theo 4 hướng.

FlipPage là một plugin jQuery mô phỏng việc lật trang như trong một cuốn sách.
Plugin ban đầu được phát triển để thuyết trình; nó cũng tìm thấy vị trí của nó trong một thiết bị như máy đọc sách điện tử. Plugin này được thiết kế để khai thác sức mạnh của phần cứng đồ họa nhằm hiển thị hoạt ảnh HTML5/CSS3 mượt mà.

Plugin này tạo hiệu ứng chuyển trang lên trên hoặc bên trong các hình ảnh được hiển thị giống với đồ họa 2D.

Сodrops là nhiều nhất blog hay nhất trong thiết kế web. Bạn luôn có thể tìm thấy rất nhiều thứ sáng tạo nhất dành cho một nhà thiết kế web ở đó. Một điểm cộng rất lớn là họ cũng cho bạn biết cách đính kèm hoặc tạo hiệu ứng này hoặc hiệu ứng kia. Nó rất phổ biến ở nước ngoài, nhưng vì lý do nào đó mà không có nhiều trên Internet Nga. Nhìn chung, đây là một trang web rất hữu ích dành cho nhà thiết kế, bạn có thể có được nhiều cảm hứng và học hỏi được nhiều điều ở đó vì ở đó có những bài học CSS thực sự nâng cao.

Hôm nay tôi muốn giới thiệu với các bạn 15 bài học thú vị từ trang web tuyệt vời này. Tất cả các “chip” đều hoàn toàn miễn phí và bạn có thể dễ dàng tải xuống. Bây giờ chúng ta hãy xem xét kỹ hơn.

Bạn cũng có thể quan tâm đến điều này:

Lưới động với hình ảnh động đẹp mắt

Đây là một giải pháp tuyệt vời để sắp xếp các khối của bạn trên trang web và lưới này cũng có thể dễ dàng sử dụng cho hình ảnh. Lưới này được tạo bằng CSS thuần túy.

Làm thế nào để làm hiệu ứng mát mẻ cho hình ảnh khi di chuột bằng CSS

Hướng dẫn này chỉ cho bạn cách tạo hiệu ứng siêu di chuột trên hình ảnh. Ví dụ này chứa tới 7 ví dụ hoàn toàn khác nhau, cũng như hướng dẫn về cách tạo ra điều kỳ diệu này bằng CSS.

Các nút tuyệt vời với hiệu ứng đẹp trong CSS

Một loạt Ví dụ CSS các nút có hiệu ứng di chuột tuyệt vời, các nút này có thể được tùy chỉnh để phù hợp với sở thích của bạn.

Cách làm một cây đàn piano

Một bài học tuyệt vời hướng dẫn bạn cách tạo ra một cây đàn piano điện tử thực sự cho trang web của mình.

Hiệu ứng di chuột đẹp cho biểu tượng

Có 9 ví dụ trong hướng dẫn này có những phong cách khác Khi bạn di chuột qua các biểu tượng, mọi thứ trông rất phong cách và hiện đại. Ví dụ: bạn có thể thoải mái sử dụng các hiệu ứng này cho các biểu tượng đánh dấu trang xã hội Trực tuyến.

Lật hiệu quả cho một khối

Ở đây bạn sẽ học cách làm điều đó với sử dụng CSS lật khối hiệu quả. Ngoài ra còn có 5 ví dụ hoàn toàn khác nhau.

Những ví dụ thú vị sử dụng CSS hoạt hình

Dưới đây là 4 ví dụ thể hiện chi tiết khả năng của hoạt ảnh CSS.

Hình thức tìm kiếm bất thường

Ví dụ: tôi chưa bao giờ thấy điều này trước đây, chẳng hạn bạn muốn ăn ở một nhà hàng nên bạn tìm kiếm nhà hàng mong muốn trên Google, nhập địa điểm mong muốn vào trường tìm kiếm. Bây giờ hãy xem làm thế nào điều này có thể được thực hiện một cách sáng tạo và thuận tiện hơn nhiều.

Cách hiển thị hình ảnh khác nhau cho các thiết bị khác nhau

Ở đây bạn sẽ tìm hiểu cách triển khai hiển thị hình ảnh khác nhau, tùy thuộc vào thiết bị nào tài nguyên của bạn được xem.

Chúng ta hãy làm thực đơn đáp ứng với sự hỗ trợ cho màn hình Retina

Một bài học tuyệt vời trong đó bạn sẽ học cách tạo một menu đẹp mắt và phản hồi nhanh bằng CSS có hỗ trợ cho màn hình Retina.

Một số hiệu ứng CSS lật trang

Các hiệu ứng đẹp mắt mà bạn có thể thực hiện chuyển trang toàn màn hình

Hiệu ứng chuyển trang thường được tạo bằng sử dụng Flash hoạt hình. Trên Internet, hiệu ứng này đang trở nên phổ biến ở tạp chí trực tuyến và thuyết trình. Điều này là do việc thực hiện hiệu ứng này trong sách điện tử và thiết bị di động.

Trong bài viết này, chúng tôi sẽ sử dụng PHP và plugin Turn.js để triển khai hiệu ứng chuyển trang bằng CSS3 và jQuery thuần túy. Chúng tôi sẽ lấy những bức ảnh phổ biến nhất từ Instagram.com và tạo ra một tạp chí đẹp mắt.

HTML

Trước hết, chúng ta cần hiểu những điều cơ bản của ví dụ này. Chúng tôi sẽ sử dụng một thiết kế trang đơn giản kết hợp đánh dấu HTML5 và PHP trong một tệp. Điều này sẽ làm cho nó dễ hiểu hơn. Bạn có thể xem kết quả thực hiện bên dưới:

chỉ mục.php

Ở đây chúng tôi kết nối phong cách.css, trong đầu, và tập tin javascriptở phía dưới. Tiếp theo chúng tôi bao gồm thêm 3 tệp js: thư viện jQuery, Turn.js, script.js, trong đó chúng ta sẽ khởi tạo plugin và nhận các sự kiện bàn phím. Mã PHP mà chúng ta sẽ viết sau sẽ được thực thi trong #magazine khối div. PHP sẽ tạo các trang tạp chí của chúng tôi, những trang này sẽ cần thiết cho Turn.js.

Ví dụ: bạn có thể xem ba trang đầu tiên của nhật ký được tạo bằng sử dụng PHP:

1 // 32 2 // 32 3 // 32

Mã bạn thấy nằm hoàn toàn trong khối div #magazine. Đây là thứ duy nhất mà Turn.js cần. Bạn không cần phải tạo bất kỳ lớp học đặc biệt hoặc thuộc tính ngày tháng cho các thành phần sẽ được diễn giải thành các trang. Với điều này, chúng tôi đã sẵn sàng để bắt đầu viết PHP mã số!

PHP

PHP sẽ kết nối với API Intagram, lưu trữ kết quả và tạo đánh dấu mà bạn đã thấy ở trên.

Bước đầu tiên sẽ là đăng ký Instagram trang web của nhà phát triển. Sau đó, bạn sẽ nhận được khóa client_id, khóa này chúng tôi sẽ chèn dưới dạng giá trị vào một biến $instagramID khách hàng, trong tập tin mục lục.php. Chúng tôi không cần chức năng API nâng cao, chúng tôi chỉ yêu cầu những hình ảnh phổ biến nhất. Điều này sẽ giúp chúng tôi không phải sử dụng xác thực OAuth bổ sung, điều này sẽ chỉ khiến mã trở nên khó hiểu hơn.

Dưới đây là ví dụ về phản hồi JSON của các hình ảnh phổ biến hiện nay trên Instagram. Tôi đã ẩn một số thuộc tính để làm cho mã rõ ràng hơn.

("meta": ("code": 200), "data": [( "tags": ["beautiful", "sky"], "location": "null", "comments": ("count": 31, "data": [...] ), "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\ /", "lượt thích": ( "đếm": 391, "dữ liệu": [..]), "hình ảnh": ("low_solution": ("url": "http:\/\/distilleryimage8.instagram.com \ /03c80dd86f7911e1a87612313804ec91_6.jpg "," chiều rộng ": 306," chiều cao ": 306) 91_5.jpg "," chiều rộng ": 150, "chiều cao": 150 ), "standard_solution": ( "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 )), "caption": ( "created_time": "1331910148", "text": "Chúc ngủ ngon.\ue056", "from": ("tên người dùng": "jent99", "profile_picture": "http:\/ \ /images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99", "id": "148395540733414783" ), "type": "image" , "id": "148395420004568888_6227738", "user": ( "username": "jent99", "website": "", "bio": "Chủ yếu là ảnh thiên nhiên.\ue32b\ue32b\ue32b Hy vọng bạn thích chúng.\ ue056 \ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" ) ), ( /* Xem thêm ảnh ở đây... */ )] )

API được giới hạn ở 32 hình ảnh mới nhất, nhưng điều này là khá đủ cho ví dụ của chúng tôi. Bạn có thể thấy rằng mỗi bức ảnh có ba kích cỡ, nhưng chúng tôi sẽ chỉ sử dụng một kích cỡ. Cũng có mặt ở đây thông tin thêm về thẻ, nhận xét, v.v.

PHP sẽ lưu trữ kết quả của yêu cầu API này. Bằng cách này chúng ta sẽ nhận được những hình ảnh mới nhất mỗi giờ. Điều này sẽ làm cho ứng dụng của chúng tôi nhanh hơn và hạn chế số lượng lệnh gọi API.

chỉ mục.php

// Bạn có thể lấy ID khách hàng từ API Instagram page $instagramClientID = "-- chèn khóa id khách hàng của bạn vào đây --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60)( // Nếu tệp bộ đệm tồn tại và nó // mới hơn 1 giờ, chúng tôi sẽ sử dụng nó $images = unserialize( file_get_contents($cache )); ) else( // Tạo yêu cầu API và tạo tệp bộ đệm // Nhận 32 ảnh phổ biến trên Instagram $response = file_get_contents($api); $images = array(); // Giải mã phản hồi và tạo một mảng foreach(json_decode( $response)->data as $item)( $title = ""; if($item->caption)( $title = mb_substr($item->caption->text, 0,70,"utf8"); ) $src = $item->images->standard_solution->url; $images = array("title" => htmlspecialchars($title), "src" => htmlspecialchars($src )); ) // Xóa ảnh cuối cùng, nhưng chúng ta sẽ có // 32 ảnh khi thêm bìa array_pop($images); // Thêm bìa vào đầu mảng array_unshift($images,array( "title"=>"Cover", "src"=>"assets/img /cover.jpg")); // Cập nhật tệp bộ đệm file_put_contents($cache,serialize($images)); ) // tạo đánh dấu $ TotalPages = count($images); foreach($images as $i=>$image)( ?> " />