Они пришли, они купили … но они вернулись? Самые важные посетители сайта электронной коммерции — это те, кто на самом деле отказывается от пластика, и как только вы подключитесь к сети, вам нужно, чтобы они вернулись — и привели своих друзей тоже. Как? Ну, покупатели — это люди, и людям нравится чувствовать что-то. Почему бы не сделать своих клиентов частью вашего сайта, создав для них галерею изображений?
Я знаю, о чем вы думаете: подобные галереи имеют тенденцию становиться слишком большими, и когда они это делают, они начинают терять свою привлекательность. У меня недавно был клиент с интересным решением: заставить галерею вращаться.
Сядьте в свою машину и вращайтесь
Мой клиент хотел, чтобы их галерея показывала только двенадцать изображений за раз и вращала один старый элемент и один новый элемент каждый день. Этот клиент продает детали и комплекты уличных удилищ, а его клиенты любят присылать свои фотографии на дросселях своих T-образных ковшей, задирать колеса на парковке компании и пугать бабушек. Вот пример, который показывает это в действии. Этот пример настроен на вращение один раз в секунду, поэтому обновите браузер несколько раз, чтобы увидеть его в действии.
Так что я ехал по извилистым улочкам, где я живу, слушая Эрика Долфи, когда я понял, как я собираюсь заставить это работать. Я собирался использовать таблицу в базе данных, чтобы клиент мог добавлять картинки через раздел администратора. Нам нужен был способ сдвигаться вперед на одну запись каждый день, независимо от количества записей. Я также мог видеть, что между последней записью и первой будет пересечение, которое необходимо сгладить.
Встряхни эту Моди
Мне пришло в голову, что если бы у меня было большое число, которое увеличивалось ежедневно, я мог бы разделить его на количество записей, чтобы вычислить, с какой записи начинать. Например, если мы посчитаем количество дней с 1 января 2000 года (назовем его тикером), а затем разделим тикер на количество записей, остаток всегда будет на 0 — один меньше, чем количество записей. Поскольку наш тикер будет постепенно увеличиваться (если солнце встает), наш остаток также будет увеличиваться с той же скоростью. Если бы мы хотели, мы могли бы заставить галерею вращаться каждый час, минуту или секунду, настраивая способ расчета тикера.
Начиная
В этом примере предполагается, что у вас есть базовое понимание HTML и языка ColdFusion. Если вы только начинаете с ColdFusion, посмотрите отличную серию из трех частей Криса Бизли здесь .
ColdFusion Server 5 теперь доступен бесплатно для разработчиков; пробная версия становится однопользовательской лицензией по истечении 30-дневной пробной версии. Вы можете скачать его здесь .
Вам понадобится этот ZIP-файл .
Это содержит:
- вращающийся шаблон ColdFusion.
- sitepoint_gallery.mdb База данных Microsoft Access
- 26 миниатюр (.gif)
База данных содержит только одну таблицу с именем «галерея». Поля в нем:
- ID (автоинкремент, первичный ключ)
- img_name — имя файла изображения (12.gif)
- img_x — ширина изображения
- img_y — высота изображения
- img_title — текст для отображения с этим изображением
Есть 26 записей, по одной на каждую из 26 миниатюр.
Разархивируйте в папку, сопоставленную с сервером ColdFusion. Нажмите Alt-M в ColdFusion studio, чтобы открыть окно сопоставлений, прочитайте документацию ColdFusion, если вам нужна помощь. Вам также необходимо создать системный DSN с именем sp_gallery , который указывает на файл доступа .mdb . Опять же, если вам нужна помощь, попробуйте документацию.
Направьте ваш браузер на rotating_gallery.cfm ‘. Вы должны увидеть небольшую галерею из 12 пронумерованных изображений, аналогичную приведенному выше примеру .
Убери свой пистолет
Давайте посмотрим rotating_gallery.cfm ‘.
<cfprocessingdirective suppresswhitespace="Yes"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Rotating Gallery</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </head> <body>
Начните страницу, как и любой другой, тэг cfprocessingdirective помогает подавить лишние пробелы, создаваемые циклами ниже. Это делает файл меньшего размера, когда шаблон анализируется и отправляется в браузер, что ускоряет работу посетителя.
<cfquery name="qGallery" datasource="sp_gallery" cachedwithin="#CreateTimeSpan(0,0,10,0)#"> SELECT ID,pic_thumb,pic_x,pic_y,pic_title FROM gallery ORDER BY ID; </cfquery>
Мы запускаем простой запрос, чтобы извлечь все записи из таблицы галереи.
<!--- initialize variables ---> <cfset start_day = DateDiff("y","01/01/2000",Now())>
Это наше значение тикера, которое нам нужно увеличивать каждый день. Мы используем функцию DateDiff, чтобы сообщить нам, сколько дней (» y «) прошло с 01.01.2000 и сегодня, и назначить ее переменной ‘ start_day ‘. Это значение должно быть больше, чем ваша учетная запись, поэтому перенесите дату назад, если у вас есть большое количество элементов для циклического перехода.
<cfset total_items = 12>
Установите для total_items общее количество элементов, отображаемых на странице. Мы будем использовать эту переменную, чтобы определить точку остановки.
<cfset start_item = (start_day MOD qGallery.recordcount) + 1>
Переменная start_item будет содержать значение элемента в первой позиции. Мы находим это, добавляя единицу к оставшейся части переменной start_day деленной на количество записей в нашем запросе. Чтобы найти остаток (или модуль) уравнения деления, мы используем математическую функцию MOD . В ColdFusion (5 MOD 2) возвращает 1, остаток от 5 / 2. Модуль всегда будет целым числом ниже делителя. Если вы думаете об этом, любое число, разделенное на 4, всегда будет давать остаток (или модуль) 0, 1, 2 или 3.
<cfset end_item = start_item + (total_items - 1)>
Нам также нужно знать, на какой записи остановиться, мы можем легко найти ее, вычтя одну из переменной total_items и добавив это значение в переменную start_item . Мы присваиваем этот результат переменной end_item .
<cfif end_item GT qGallery.recordcount> <cfset end_item = end_item - qGallery.recordcount> </cfif>
Что произойдет, если start_item — это запись 20, а записей всего 23? Когда мы добавляем 11, мы получаем 31! Нам нужно разобраться с перекрытием с последней записи на первую. Нам все еще нужно знать, на какой записи останавливаться, поэтому, если переменная end_item больше, чем recordcount, мы вычитаем количество записей из значения end_item , чтобы найти правильный end_item .
<cfset columns = 4>
Установите для переменной ‘ columns ‘ желаемое количество столбцов таблицы.
<cfset col_tick = 0>
Мы будем увеличивать переменную ‘ col_tick ‘ по мере вывода ячеек таблицы в каждой строке.
<cfset count = 0>
Счет также будет увеличен, и когда он достигнет значения нашей переменной total_items , мы в конце.
Теперь наш запрос выполнен и все необходимые переменные инициализированы. Продолжаем с забавной частью: строим галерею!
<div align="center"> <table width="70%" border="0" cellpadding="0" cellspacing="0"> <tr>
Начнем с таблицы и откроем строку.
<cfif start_item LT end_item>
Если наше значение end_item выше, чем стартовая машина, мы можем выполнить очень простой вывод. Если нет, мы должны иметь дело с перекрытием от последней записи к первой записи.
Я использую CFLOOP ниже для ясности, которую обеспечивают атрибуты startrow и endrow. Однако это также может быть достигнуто с помощью CFOUTPUT .
<cfloop query="qGallery" startrow="#start_item#" endrow="#end_item#">
Мы устанавливаем startrow и endrow для наших start_item и end_item .
<cfset col_tick = IncrementValue(col_tick)> <cfset count = IncrementValue(count)>
Мы будем отслеживать общее количество выводимых элементов с помощью переменной count, когда она соответствует total_items , мы закончили. Переменная col_tick используется для подсчета столбцов таблицы, когда col_tick равен столбцам, нам нужно начать новую строку таблицы и сбросить col_tick в ноль.
<cfoutput>
Мы открываем тег cfoutput , так как знаем, что нужно выводить значения наших переменных в браузер.
<td width="40"><img src="#pic_thumb#" height="#pic_y#" width="#pic_x#" alt="#pic_title#"></td>
Наконец, мы записываем наш тег img в браузер.
<cfif count EQ total_items> </tr></table> <cfelseif col_tick EQ columns> </tr><tr><cfset col_tick = 0> </cfif>
Здесь мы сравниваем нашу переменную count с переменной total_items . Когда они совпадают, мы закончили и должны закрыть наш стол. Если не верно, мы проверяем, соответствует ли наша переменная col_tick нашей переменной столбцов. Если они совпадают, нам нужно закрыть строку текущей таблицы и начать новую.
</cfoutput>
Закройте наш тег cfoutput .
</cfloop>
Закройте петлю.
<cfelse><!--- if start_item LT end_item --->
Если наше значение end_item меньше, чем значение start_item , нам нужно иметь дело с перекрытием от последней записи к первой. Мы можем сделать это, выводя результаты запроса дважды. Один раз до конца набора записей, а затем от начала набора записей до значения end_item .
Код ниже идентичен коду выше, за исключением значений startrow и endrow в тегах cfloop.
Для первого вывода мы устанавливаем startrow start_item значению start_item как указано выше, но на этот раз мы устанавливаем значение endrow соответствующее количеству recordcount из нашего запроса. Кроме того, нам не нужен оператор <cfif count EQ total_items> , так как мы знаем, что этот цикл не завершит галерею.
<cfloop query="qGallery" startrow="#start_item#" endrow="#qGallery.recordcount#"> <cfset col_tick = IncrementValue(col_tick)> <cfset count = IncrementValue(count)> <cfoutput> <td width="40"><img src="#pic_thumb#" height="#pic_y#" width="#pic_x#" alt="#pic_title#"></td> <cfif col_tick EQ columns> </tr><tr><cfset col_tick = 0> </cfif> </cfoutput> </cfloop>
Второй вывод будет от начала набора записей до значения end_item .
<cfloop query="qGallery" startrow="1" endrow="#end_item#"> <cfset col_tick = IncrementValue(col_tick)> <cfset count = IncrementValue(count)> <cfoutput> <td width="40"><img src="#pic_thumb#" height="#pic_y#" width="#pic_x#" alt="#pic_title#"></td> <cfif count EQ total_items> </tr></table> <cfelseif col_tick EQ columns> </tr><tr><cfset col_tick = 0> </cfif> </cfoutput> </cfloop> </cfif><!--- close if start_item LT end_item --->
Теперь мы закрываем наше заявление if.
</div> </body> </html> </cfprocessingdirective>
Закройте нашу страницу, и мы закончили!
Соображения
Этот код можно легко применить к блокам текста или баннеров. Если вы хотите, чтобы он вращался с интервалом, отличным от ежедневного, настройте эту строку:
<cfset start_day = DateDiff("y","01/01/2000",Now())>
« y » возвращает количество дней между 01.01.2000 и настоящим. Чтобы галерея вращалась в час, измените « y » на « h ». См. Документацию ColdFusion для полного обсуждения функции DateDiff .
Содержимое наших циклов очень похоже, если мы оставим их в операторах if, которые мы пропустили во втором наборе вывода, мы могли бы поместить этот код во включаемый файл.
Добавьте еще несколько полей в базу данных, и миниатюры могут привести к большим изображениям, сопровождаемым описательными абзацами.
С некоторыми изменениями это может стать отличным пользовательским тегом! Я использовал это, чтобы вращать в продаже предметы для других сайтов. Не стесняйтесь изменять код, дайте мне знать, что вы придумали!
Вывод
Мы порадовали нашего клиента и создали лучшую галерею. Ощущение посетителя от того, что его фотография размещена на Сайте, только усиливается тем фактом, что оно будет там в течение определенного времени, исчезнет для заклинания, а затем вернется позже. Если бы вы только что потратили один год и два миллиарда долларов, создавая шасси космической трубы 1923 года с кричащим силовым агрегатом и стеками Вебера, не хотели бы вы показать друзьям сайт, на котором вы их разместили? Клиенты сейчас проводят целевой маркетинг для владельцев сайта!
Теперь иди и размножайся — или, вернее, разделяй и властвуй.