Вращающиеся изображения, подобные AJAX, в Ruby on Rails

Question

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

Кто-нибудь делал это с Rails и Javascript-фреймворками, которые он поддерживает?

Answer 1

Вы можете использовать плагин jquery цикл, вот ссылка: http://malsup.com/jquery/cycle/. Похоже, он будет делать то, что вы хотите.

Answer 2

Я использовал эту очень простую функцию. Он не использует никаких фреймворков и не исчезает между слайдами, но он должен помочь вам начать работу.

function SlideShow( elem_id, hold_time )
{
  this.elem = document.getElementById( elem_id );
  this.slides = [];
  this.num_slides = 0;
  this.cur_slide = 1;
  this.add_slide = function( image )
  {
    this.slides[ this.num_slides++ ] = image;
  }
  var self = this;
  this.next_slide = function()
  {
    if ( self.num_slides > 1 )
    {
      self.elem.src = self.slides[ self.cur_slide++ ].src;
      if ( self.cur_slide == self.num_slides )
        self.cur_slide = 0;
    }
  }
  setInterval( self.next_slide, hold_time )
}

параметры - это element_id тега img и количество мс для отображения каждого слайда.

функция add_slide принимает объект JavaScript Image.

Причина, по которой cur_slide инициализируется значением 1, заключается в том, что я предварительно загружаю тег img первым изображением.

В моем приложении я создаю слайд-шоу в методе window.onload и организую добавление каждого изображения в слайд-шоу по мере его загрузки.

Пример (не проверено):

window.onload = function() {
  var slide_show = new SlideShow( "slide_image", 4000 )

  { var img = new Image();
    img.onload = function(){ slide_show.add_slide(img); };
    img.src="/images/slide1.jpg"; }
   ...
   /* Repeated for each image */
}

Этот подход действителен, только если вы не заботитесь о порядке слайдов.

Answer 3

Между прочим, Rails особо не привязан к какой-либо JS-инфраструктуре, хотя и поставляется с прототипом из коробки.

Я предполагаю, что когда вы говорите AJAX, вы не имеете в виду AJAX. Если бы вы поворачивали изображение с помощью AJAX, вы бы получили повернутое изображение, генерируемое на стороне сервера и отправленное клиенту, поскольку AJAX = выполнение запросов с использованием JavaScript.

С учетом сказанного вы можете использовать практически любой ротатор изображений JS, который вы можете найти в Google .

РЕДАКТИРОВАТЬ: О, вы имели в виду циклический просмотр изображений, а не вращение их, например. 90º по часовой стрелке и т. Д. (?)

Answer 4

Я предполагаю, что вы хотите вносить постоянные изменения в изображения. Я работаю над приложением Rails, в котором мы реализовали изменение размера, обрезку и поворот, аналогично функциям в snipshot.com

С технической стороны мы использовали YUI для изменения размера и обрезки в пользовательском интерфейсе и RMagick на сервере для обработки изображений и отправки результатов обратно в UI. YUI предоставляет готовый виджет изображения.

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