Попробуем сегодня водрузить на седьмые рельсы весьма эффектную галерею изображений ImageFlow, добавив к ее функционалу новое свойство: всплывающие окна на основе jQuery UI. Полностью готовый rails-app, как всегда, можно найти в гитхабе автора.
Базовый HTML, использованный для построения всплывающих окон jquery-ui галереи изображений ImageFlow на основе фреймворка Ruby on Rails 7, для лучшего понимания - можно взглянуть на форуме.
Начинаем. Тем, кто захочет потренироваться в кодинге, используя этот tutorial, понадобятся актуальные (хотя бы более-менее) версии следующего ПО (сразу предупреждаю, работаю я на линуксе, про винду даже не спрашивайте, я ее не знаю / не помню):
$ ruby -v
ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x86_64-linux]
$ bundle -v
Bundler version 2.3.5
$ npm -v
8.5.1
$ yarn -v
1.22.17
$ psql --version
psql (PostgreSQL) 12.10
Работаем:
mkdir image_gallery && cd image_gallery
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '7.0.2.2'" >> Gemfile
bundle install
bundle exec rails new . --force --css=bootstrap -d=postgresql
bin/rails db:create
bin/rails db:migrate
rails g controller Imagegallery index
Сразу уточню: PostgreSQL указываю в опциях в целях возможности запушить сделанное на Heroku, также попросту в силу привычки. Optional.
NB. Очень рекомендую удалить turbo... а впрочем, дело ваше. :)
yarn remove @hotwired/turbo-rails
Открываем страничку загрузки jquery-ui, убираем все галки из чекбоксов, отмечаем Dialog. При желании есть возможность повыбирать стили, открыв страничку Themes, а можно этого не делать, воспользовавшись стандартной темой; далее загружаем и распаковываем архив, который нам вскорости понадобится.
И да, можно было бы, наверное, как-то так:
yarn add jquery-ui
, но в силу ряда причин рекомендую так не делать. Установите этим способом лишь jquery:
yarn add jquery
OK, далее:
mkdir app/javascript/src
, и во вновь созданную директорию помещаем два файла:
app/javascript/src/jquery.js
import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery
, также jquery-ui.js, который возьмете в корне директории загруженного только что архива. И теперь приведите application.js к следующему:
app/javascript/application.js
// Entry point for the build script in your package.json
import "./controllers"
import * as bootstrap from "bootstrap"
import "./src/jquery"
import "./src/jquery-ui"
Теперь стили. Эти два файла нужно поместить в app/assets/stylesheets:
imageflow.css
@charset "utf-8";
/* ImageFlow Settings
==================================== */
@media screen, projection {
.imageflow {
overflow:hidden;
position:relative;
text-align:left;
visibility:hidden;
width:100%;
}
.imageflow img {
border:none;
position:absolute;
top:0px;
visibility:hidden;
-ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */
}
.imageflow p {
margin:0 auto;
text-align:center;
}
.imageflow .loading {
border:1px solid white;
height:15px;
left:50%;
margin-left:-106px;
padding:5px;
position:relative;
visibility:visible;
width:200px;
}
.imageflow .loading_bar {
background:#fff;
height:15px;
visibility:visible;
width:1%;
}
.imageflow .navigation{
z-index:10000;
}
.imageflow .caption {
font-weight:bold;
position:relative;
text-align:center;
z-index:10001;
}
.imageflow .scrollbar {
border-bottom:1px solid #b3b3b3;
position:relative;
visibility:hidden;
z-index:10002;
height:1px;
}
.imageflow .slider {
background:url(slider.png) no-repeat;
height:14px;
margin:-6px 0 0 -7px;
position:absolute;
width:14px;
z-index:10003;
}
.imageflow .slideshow {
cursor:pointer;
height:14px;
margin:20px 0 0 20px;
position:absolute;
width:14px;
z-index:10003;
}
.imageflow .slideshow.pause {
background:url(button_pause.png) no-repeat;
}
.imageflow .slideshow.play {
background:url(button_play.png) no-repeat;
}
.imageflow .images {
overflow:hidden;
white-space:nowrap;
}
.imageflow .button {
cursor:pointer;
height:17px;
position:relative;
width:17px;
}
.imageflow .previous {
background: url(button_left.png) top left no-repeat;
float:left;
margin: -7px 0 0 -30px;
}
.imageflow .next {
background: url(button_right.png) top left no-repeat;
float:right;
margin:-7px -30px 0 30px;
}
}
imageflow1.css
#xStep {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: 50% top;
}
#xStep {
height: 670px !important;
}
#xStep_images {
height: 585px !important;
top: 96px;
position: relative;
}
#xStep_navigation {}
, и добавьте к ним jquery-ui.css, который - правильно - также находится в архиве. Файл application.bootstrap.scss должен теперь выглядеть следующим образом:
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import "jquery-ui";
@import "imageflow";
@import "imageflow1";
Теперь:
mkdir public/js
mkdir public/images
mkdir public/images/slides
Практически последние усилия: переносим нашу деятельность в каталог public, куда придется скопировать несколько графических файлов: button_left.png, button_right.png, button_pause.png, button_play.png, slider.png, также background.jpg; все это оптимально взять из соответствующего репо моего гитхаба. А в только что созданный public/images копируем все, что найдете в директории images все того же архива: поверьте, пригодится. Каталог slides заполняется картинками, можно взять для начала мои.
Сохраняем в каталоге public/js эти три файла:
imageflow.js
(Это очень длинный файл, возьмите в моем репо или на сайте проекта ImageFlow.)
imageflow1.js
domReady(function()
{
var iflow = new ImageFlow();
iflow.init({ ImageFlowID: 'xStep', xStep: 300, reflections: false, slideshow: true, slideshowAutoplay: false, opacity: true, circular: true, glideToStartID: false, opacityArray: [9,4,3,1,1], onClick: jQuery_modal });
});
jQuery_modal.js
var jQ = $.noConflict();
function jQuery_modal(){
if ( 0 == jQ(this).attr('longdesc').indexOf('#') ){
jQ(jQ(this).attr('longdesc')).dialog({ height: 450, width: 600, modal: true });
}
else{
jQ("#dialog-modal").text(jQ(this).attr('longdesc'));
jQ("#dialog-modal").dialog({ height: 240, modal: true });
}
}
Далее:
mkdir app/services
touch app/services/get_images.rb
, содержимое файла приводим к следующему:
class GetImages
def self.get_image_paths(d)
target_folder_path = File.join(Rails.root, d)
Dir.children(target_folder_path)
end
end
И нам осталось лишь отредактировать вьюху:
app/views/imagegallery/index.html.erb
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div id="dialog-modal" style="display: none"></div>
<div id="xStep" class="imageflow">
<% @result.each_with_index do |slide, index| %>
<img alt="<%= File.basename(slide, '.jpg') %>" src="/images/slides/<%= slide %>"
longdesc="#<%= index %>" width="300" height="200">
<% end %>
</div>
<% @result.each_with_index do |slide, index| %>
<div id="<%= index %>" style="display: none"><img src="/images/slides/<%= slide %>"
width="500" height="333" />
</div>
<% end %>
</div>
</div>
</div>
<script src="/js/imageflow.js"></script>
<script src="/js/imageflow1.js"></script>
<script src="/js/jQuery_modal.js"></script>
, контроллер:
app/controllers/imagegallery_controller.rb
class ImagegalleryController < ApplicationController
def index
@result = GetImages.get_image_paths("/public/images/slides")
end
end
, и не забыть про роутинг:
config/routes.rb
Rails.application.routes.draw do
get 'imagegallery/index'
root 'imagegallery#index'
end
Запускаем и любуемся:
$ ./bin/dev
06:33:52 web.1 | started with pid 5268
06:33:52 js.1 | started with pid 5269
06:33:52 css.1 | started with pid 5270
06:33:57 js.1 | yarn run v1.22.17
06:33:57 css.1 | yarn run v1.22.17
06:33:57 js.1 | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --watch
06:33:57 css.1 | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
06:34:00 js.1 | [watch] build finished, watching for changes...
06:34:05 css.1 | Sass is watching for changes. Press Ctrl-C to stop.
06:34:05 css.1 |
06:34:06 web.1 | => Booting Puma
06:34:06 web.1 | => Rails 7.0.2.2 application starting in development
06:34:06 web.1 | => Run `bin/rails server --help` for more startup options
06:34:08 web.1 | Puma starting in single mode...
06:34:08 web.1 | * Puma version: 5.6.2 (ruby 2.7.3-p183) ("Birdie's Version")
06:34:08 web.1 | * Min threads: 5
06:34:08 web.1 | * Max threads: 5
06:34:08 web.1 | * Environment: development
06:34:08 web.1 | * PID: 5268
06:34:08 web.1 | * Listening on http://127.0.0.1:3000
06:34:08 web.1 | * Listening on http://[::1]:3000
06:34:08 web.1 | Use Ctrl-C to stop
Уфффффф... расположить div-ы на странице, размеры картинок подредактировать, стили всплывающего окна, все такое прочее - это сами. Крайне несложно настраивается в конфигах.
Комментарии в блоге