Как сделать кнопки «вперед-назад» для сайта портфолио?

Question

[sabanovvv]

Всем привет, делаю для сайт портфолио, знаний пока маловато, поэтому сюда обращаюсь.

Как сделать кнопки: показать следующую работу и показать предыдущую работу без перезагрузки сайта?

CMS Drupal (isotope filter)

www.subjay.ru/node/8

Должно получиться вот так примерно

Comments

[Илья Лесных]

Немного странно делать сайт-портфолио, и при этом задавать такие вопросы. Или тематика портфолио не веб-разработка?

Answer 1

[Misha7]

На ajax это делается просто. ruseller.com/project.php?id=7
Получаешь html разметку следующей работы и подгружаеш ее в div. Метод load Вам в помощь. Будут вопросы пишите))

Comments

[sabanovvv]

в мое случае какой будет примерно код?

[Misha7]

Ну например следующяя работа находиться по этому адресу www.subjay.ru/node/9 Так?

Кнопка следующяя работа имеет такой код. next

Обратите внимание id="nextWork" Теперь создайте javascript файл и подключите его к странице с работой.
Напишите в нем такой код $('#nextWork').click(
function () {
$('#node-8')..load('www.subjay.ru/node/9 #node-9');
}
);

Этот код будет работать только на странице с собакой (www.subjay.ru/node/8 ) Переделать под остальные страницы просто. Создайте переменную в которой храниться id соответствующей работы. То есть на странице с собакой id=8 на следующей странице id=9 и т.д. Если нажата кнопка "следующая работа" к переменной прибавляется 1. Если нажата предыдущая работа, то от переменной отнимается 1. И подгружаеться соответствующая работа.

Появились вопросы пишите.

Answer 2

[Слава]

ajax + html5history

Answer 3

[Алексей]

Как вариант и наиболее быстрое решение - вы можете использовать базовый функционал модуля Views

Решение простое на мой взгляд. Делаем представление, в нем указываем все поля которые хотим отображать на странице. Там это всё удобно. Потом устанавливаем настройки показала - с использованием пагинации ( её потом тоже можно достилизовать ), и выводим по 1 материалу на страницу. И в последнюю очередь включаем AJAX в настройках представления. Всё легко и просто :)

Но учтите что это обходное решение. Если же вам требуется грамотный и рабочий функционал то придется немного пописать код на AJAX + HTML5History ( как упоминалось выше ). AJAX для загрузки страниц, а хистори для навигации. Больше рукописного кода.

Comments

[sabanovvv]

как включить ajax?

[Алексей]

screenshot.ru/upload/image/0B9