ползунок активного хранения рельсов - PullRequest
Новая
       9

ползунок активного хранения рельсов

0 голосов
/ 17 декабря 2018

Попытка сделать простой слайдер Bootstrap для работы с изображениями, хранящимися в Rails Active Storage.

Я встроил этот код и связанные изображения в общую папку, и он прекрасно работает: 

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <img src="/images/portfolio/item-1.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-2.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-3.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-4.jpg" alt="" class="swiper-slide">
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-1.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-2.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-3.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-4.jpg);"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

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

  <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <%= image_tag(image.sgimage.image, alt: '', class: 'swiper-slide') %>
                  <% end %>
                  </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                  <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

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

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

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

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

Любая помощь приветствуется.Тратить много времени на это.

1 Ответ

0 голосов
/ 18 декабря 2018

Решено!... не уверен, почему, но это сработало.Я просто должен был использовать <div> и фоновое изображение со статической высотой в разделе «Галерея сверху» вместо использования <%= image_tag() %> решения.

код здесь: 

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <div class="swiper-slide" style="height: 200px; background-image:url(<%= rails_blob_url(image.sgimage.image) %>)"></div>
                  <% end %>
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                    <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>
...