Блог

В настоящее время я занимаюсь проектом загрузки записей дневника о поездке в wordpress.

Мне интересно, есть ли способ с помощью jQuery / JavaScript / php создать временную шкалу, на которой изображение лодки перемещается по временной шкале в зависимости от того, какие сообщения вы читаете.

Например, скажем, есть 90 сообщений, и сообщение один было отправной точкой, сообщения два переместили бы изображение лодки немного вперед, с другой стороны, если у вас 90 сообщений, то лодка будет в конце временной шкалы.

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

Имея под рукой эти фрагменты информации, масштабируйте их до значения от 0 до 100 процентов:

 $precent = ($position / $totalCount) * 100;
 

тогда ваши css и html могут выглядеть примерно так:

 <style type="text/css">
    #boat-progress { position:relative;height:40px;margin-right:100px;overflow:visible; }
    #boat-progress img { position:absolute;top:0;left:0; }
</style>
<div id="boat-progress">
    <img src="boat.png" alt="Boat" style="left:<?php=$percent ?>%;" />
</div>
 

Я включил это «margin-right», потому что, когда изображение на 100%, оно фактически будет с правого края. 100 пикселей — это предположение об изображении, ширина которого может составлять 100 пикселей. Смещение родительского div для обеспечения этого пространства должно сработать. Тем не менее, это довольно быстрое и грязное решение.

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

Для анимации между двумя точками, представляющими страницы, вам понадобится знание того, на какой странице пользователь был ранее. Возможно, вы можете сделать это, сохранив текущую страницу в сеансе пользователя или, возможно, посмотрев на HTTP-реферер.

Как только у вас будет эта информация, останется только анимировать предыдущую страницу на временной шкале и текущую. jquery упрощает это.

$(‘#boat’).animate({‘left’,’100px’);

Вам нужно будет знать, как далеко друг от друга расположены ваши маркеры (возможно, 5 пикселей на страницу), и размещать лодку на маркере предыдущей страницы при загрузке страницы (сделайте это с помощью PHP, поскольку PHP знает предыдущую страницу). Затем, когда страница загружается, используйте вышеупомянутый js для перехода в новую позицию.

Это определенно было бы пользовательским решением, которое вам нужно было бы сделать, а не столько вопросом, на который здесь есть основной ответ.

Однако, если это вообще поможет, вы можете начать с классификации сообщений обычным способом — или пометить их. WP позволяет оба. Поскольку мы не знаем, как вы используете сайт, давайте просто перейдем к тегам.

Я не думаю, что у меня есть время, чтобы выписать здесь полный синтаксис WP, тем более, что у них есть документация, которой легко следовать. Вот основная идея, хотя —

при загрузке страницы получите сообщения с общим тегом, затем запустите цикл…

 $total = 0;
$position = 0;
$i = 0;
$this_id = $whatever_current_id_is;
while($the_tag_result_loop)
{
    $total   ;
    $the_id = get_the_ID();
    if($this_id == $the_id)
    {
        $position = $i;
    }
    $i   ;
}
 

Затем в конце этого ужасно неэффективного цикла вы можете разделить область временной шкалы на $ total var, чтобы получить объем пространства, которое должна представлять каждая страница. Допустим, ваша область экрана или «озеро» имеет ширину 1000 пикселей.

 $each_gets = 1000 / $total;
 

Затем умножьте ваш $position var на $ each_gets, чтобы найти ваше левое поле.

 $left_margin = $each_gets * $position;
 

Затем, конечно, примените это к рассматриваемому элементу.

 <div id="boat" style="margin-left:<?php echo $left_margin; ?>px"></div>
 

Имейте в виду, что это не предназначено для копирования / вставки или чего-либо еще. Это просто точка в направлении, не обязательно лучшем направлении.

Лично я бы написал плагин WP, чтобы написать это при отправке статьи и записать результаты в сам пост. Это было бы не особенно сложно, но определенно не то, что я хотел бы написать здесь.