Статьи

Создайте демонстрацию нескольких изображений PHP с использованием PHP и HTML

Недавно я решил создать витрину для одного из моих сайтов. Мне нужен был ряд из пяти миниатюрных изображений моих продуктов, отображаемых в случайном порядке. Я думал, что будет легко найти этот код PHP, но это оказалось не так, поэтому я засучил рукава и написал свой. Результатом является новый способ (по крайней мере для меня) поворота изображений — я надеюсь, вы найдете его таким же полезным, как и я.

Проблема была в том, что я не хотел случайного отображения. Я хотел случайный, но без дубликатов. У меня было около 25 изображений, так что шанс повторить изображения подряд из пяти был довольно хорошим — и это было бы довольно непрофессионально!

Чтобы еще больше усложнить ситуацию, я хотел бы избежать использования страницы PHP (которая очень сильно упростила бы ситуацию), и вместо этого вызывать скрипт PHP из моего HTML-кода, что-то вроде этого:

<img src="mysite.com/rotate.php?i=0" />  <img src="mysite.com/rotate.php?i=1" />  <img src="mysite.com/rotate.php?i=2" /> 

Использование такого параметра, как '?i=0' позволяет отличать вызовы друг от друга. Это будет ключом к тому, чтобы избежать дублирования изображений.

Простое решение: страница PHP

Если бы я использовал страницу PHP, код был бы чрезвычайно прост: просто возьмите массив URL-адресов изображений, перетасуйте этот массив, затем «разложите их», сначала отобразив запись 0, затем 1, затем 2 и т. Д., как это:

 

Но, поскольку мне иногда приходилось использовать HTML-форму вместо PHP, я решил, что вызов PHP изнутри HTML-страницы будет лучше, хотя это затрудняет решение проблемы.

Причина в том, что приведенный выше код выполняется одновременно. Запросы к сценариям PHP в основном не сохраняют состояния (за исключением сеансов PHP, что в данном случае нецелесообразно). Это затрудняет вызов сценария пять раз (по одному разу для каждого изображения) и возвращение одного и того же «состояния» (перетасованного порядка). Но альтернативой было то, что изображения были совершенно случайными, и в этом случае я получал бы дубликаты.

Лучший вариант: srand()

Чтобы решить эту проблему, я использовал решение, очень похожее на приведенное выше, для одного скрипта PHP: я создал перемешанный массив. Но на этот раз я использовал переданный параметр строки запроса (i=0, i=1, etc.) качестве индекса массива, чтобы определить, какую картинку отображать.

Чтобы этот массив оставался стабильным между вызовами, мне нужно было псевдослучайное значение, которое было предоставлено PHP и его случайной функцией с srand() .

Случайные числа PHP, хотя и достаточно случайные для большинства применений, вовсе не случайны — они основаны на начальном значении. Это означает, что если вы используете одно и то же начальное значение каждый раз, последовательность генерируемых им «случайных» чисел будет одинаковой. Эта повторяемость делала эту функцию идеальной для моих нужд, которая включала перетасованный список изображений, который оставался неизменным в течение длительных периодов времени. Посеяв каждый раз с тем же номером и перетасовывая список с этими числами, мой массив будет каждый раз в том же «случайном» порядке.

В этом случае я использовал time() в качестве начального значения для каждого вызова. Разделив его на 10, я получил начальное значение, которое менялось каждые десять секунд, что означало, что массив будет перемешиваться в том же порядке в течение 10 секунд за раз.

В результате массив выглядит случайным, но порядок остается неизменным достаточно долго для выполнения пяти вызовов PHP, каждый из которых выбирает другое изображение из списка.

Вот новый код:

 

Функция shuffle() теперь заменена моим собственным циклом shuffle, отчасти потому, что я не был доволен выводом shuffle() в этом случае, а отчасти потому, что я хотел убедиться, что «мой» список случайных чисел всегда был используется для перемешивания массива (ключ к сохранению его повторяемости).

Использование кода в вашем приложении

Чтобы использовать этот код, вам нужно сделать следующее:

  1. Замените записи в $images вашими собственными (включая путь по необходимости).
  2. Измените значение $secondsFixed чтобы решить, как долго список будет оставаться прежним, пока он не будет переупорядочен. Таймфрейм должен быть достаточно большим, чтобы все вызовы PHP могли быть легко сделаны за отведенное время.
  3. Загрузите скрипт и назовите его из своего HTML-кода следующим образом:

     <img src='mysite.com/rotate.php?i=0'>image #1  <img src='mysite.com/rotate.php?i=1'>image #2  <img src='mysite.com/rotate.php?i=2'>image #3 

    и так далее…

Конечно, если у вас больше вызовов, чем изображений в массиве, он будет обернут; в противном случае вы получите случайные, не дублирующие изображения.

Одно замечание: установка значения $secondsFixed в 10 гарантирует, что случайный список будет меняться каждые десять секунд. Таким образом, если PHP вызывает страницу, пересекающую эту границу — некоторые в пределах десятисекундной границы, некоторые за ее пределами — список все равно может быть плохо рандомизирован. Чтобы избежать этого, вы можете увеличить значение. Например, на 3600, список будет оставаться неизменным в течение часа, и это редкая загрузка страницы, которая точно пересечет эту границу.

Помимо этой небольшой заминки, это полезная техника PHP, которая позволяет мне показывать случайно выбранную серию изображений без дубликатов. Я уже успешно разместил его на одном из своих сайтов, а также на аукционе eBay клиента (чтобы время от времени «освежать» дисплей). Я надеюсь, что это может оказаться полезным и для вас.