PHP Lang
  1. PHP Lang
  3. лучший подход для слайдера jQuery с динамическим представлением / следующим контентом?
Intereting Posts
как поймать ошибку функции pg_connect ()? Как дважды отобразить запись данных на одной странице? Как объединить 3 массива в один большой массив (те же ключи) Юникод-символы от JSON.stringify к действительным символам юникода После того, как поле aliasing sql выбрано, я не могу получить доступ к результату в php Не удалось перенаправить старый URL-адрес PHP на новую страницу ASP Получение pagename с помощью PHP_SELF – опасности? Использование SimpleXML для создания объекта XML с нуля TCPDF – печать таблицы из mysql PHP: отображать записи из базы данных группами по пять? Добавление 2 гексадецималов в виде строк Преобразование многомерного массива в одномерный Каковы наилучшие методы предотвращения инъекций sql? Несколько пространств имен в одном модуле в ZF2 Сгенерировать код ZPL с помощью PHP и распечатать хелл-аддон для тестирования?

лучший подход для слайдера jQuery с динамическим представлением / следующим контентом?

расположение

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

Этот сайт в основном является бесплатным региональным новостным блогом. Изображение внизу демонстрирует макет (игнорируйте сбой перекрытия даты). Он закодирован в PHP, jQuery и xajax.

Мой вопрос связан с динамической загрузкой контента. Как и при загрузке страницы, я назначаю стрелки URL-адресам предыдущих / следующих статей. Без проблем. URL-адреса являются дружественными, страница перезагружается в следующую статью, и я могу прокручивать их в течение всего дня.

Но … Я хотел бы превратить стрелки в слайдер (а не в href) со следующим поведением:

Щелчок правой стрелки будет …

  1. Начните загрузку нового контента за кадром через xajax,
  2. Из-за того, что старый контент сдвигается влево (с экрана на экран), закрашивается новое содержимое, которое также сдвигается влево (от экрана до экрана).

Зачем? Слайдеры потрясающие, и я думаю, что это будет выглядеть профессионально. И это основной материал слайдера (например, этот слайдер scrollLeft jQuery ), за исключением того, что содержимое динамически загружается щелчком стрелки, что вызывает ряд вопросов:

  • Каков наилучший подход для этого?
  • Я использую PHP, чтобы предварительно заполнить ВСЕ пустые скрытые статьи DIVs?
  • Я использую jQuery для добавления / добавления / удаления статьи DIV с каждым нажатием стрелки?
  • Что будет выглядеть смещение jQuery «scrollLeft»? Содержимое DIV – это статическая ширина, но лучше ли мне с помощью jQuery scrollTo ?

Надеюсь, мой вопрос ясен … Любые предложения были бы очень признательны!

Related of "лучший подход для слайдера jQuery с динамическим представлением / следующим контентом?"

Вот решение, которое я придумал.

http://jsfiddle.net/tXUwZ/

Если у кого-то есть идеи о том, как очистить его или сделать его более плотным, сообщите мне об этом!

Большое спасибо @Jamie за толкание в правильном направлении!

На мой взгляд, у вас есть два варианта:

  1. Заполняйте каждый слайдер при загрузке страницы, чтобы функция щелчка jQuery анимировала содержимое
  2. Заполнение данных на основе слайдов с помощью вызова AJAX

Если это всего лишь несколько элементов / слайдов, я бы заполнил загрузку страницы. Если вы смотрите на множество слайдов (что вы можете ожидать в ежедневном блоге новостей), или если в каждом слайде будет много данных (например, изображения с высоким разрешением и т. Д.), Я бы пошел со вторым вариантом.

Второй вариант легко сделать. Все, что вам нужно, это три div (один для экранного слайда и два для фланговых слайдов, которые будут «заменять» экранный экран при нажатии любой стрелки). Я бы использовал что-то вроде этого: 

<div class="container"> <div class="inner-container"> <div class="back"></div> <div class="content off_screen_left" id="1"></div> <div class="content on_screen" id="2"></div> <div class="content off_screen_right" id="3"></div> <div class="next"></div> </div> </div>

И необходимый CSS: 

 .container{width:200px;height:150px;overflow:hidden} .inner-container{width:600px;height:150px;margin-left:-200px} .content{float:left;width:200px;height:150px}

А что касается jQuery: 

 $(".next").live('click', function(){ var current_id=$(this).prev(".on_screen").attr("id"); // get current page ID $(".content").css("float","right"); // float all elements to the right $(".off_screen_right").animate({display:none;}); // make the furthest right disappear gradually $(".on_screen").attr("class","off_screen_right"); // make on_screen the new off_screen_right and add the correct ID attribute $(".off_screen_left").attr("class","content on_screen"); // make off_screen_left the new on_screen $(".container").prepend('<div class="content off_screen_left" id="'+current_id-1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute $(".off_screen_left").load("load-content.php?page_id="+current_id-1); // populate the new off_screen_left element }); $(".back").live('click', function(){ var current_id=$(this).next(".on_screen").attr("id"); // get current page ID $(".content").css("float","left"); // float all elements to the left $(".off_screen_left").animate({display:none;}); // make the furthest left disappear gradually $(".on_screen").attr("class","off_screen_left"); // make on_screen the new off_screen_left and add the correct ID attribute $(".off_screen_right").attr("class","content on_screen"); // make off_screen_right the new on_screen $(".container").append('<div class="content off_screen_right" id="'+current_id+1+'"></div>'); // add the new off_screen_left element and add the correct ID attribute $(".off_screen_right").load("load-content.php?page_id="+current_id+1); // populate the new off_screen_left element });

Но это всего лишь один вариант. Вы можете использовать слайдер из коробки, но я предпочитаю настраивать код, чтобы я точно знал, что делаю.