×
ImageFlow Gallery, jQuery Dialog Popup and Bootstrap 5 in Ruby on Rails 7 (03 март 2022)

Очень неновая, но по-прежнему эффектная галерея изображений ImageFlow - на новеньком Ruby on Rails 7.

Идея ImageFlow Gallery, jQuery Dialog Popup and Bootstrap 5 in Ruby on Rails 7

Больше
2 мес. 3 нед. назад - 2 мес. 3 нед. назад #1 от Aleksej
Здесь опубликован базовый HTML, использованный для построения всплывающих окон jquery-ui галереи изображений ImageFlow на основе фреймворка Ruby on Rails 7. К материалу ImageFlow Gallery, jQuery Dialog Popup and Bootstrap 5 in Ruby on Rails 7 . Идея, как видите, крайне проста.

<html>
<head>
    <link rel="stylesheet" href="imageflow.css" type="text/css" />
    <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
    <style>
    #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 {}
    </style>
</head>

<body>
    <div id="xStep" class="imageflow"> <img src="1.jpg" longdesc="#1" width="326" height="400" alt="Description 1" /> <img src="2.gif" longdesc="#2" width="300" height="300" alt="Description 2" /> <img src="3.png" longdesc="#3" width="350" height="433" alt="Description 3" /> <img src="4.png" longdesc="#4" width="360" height="480" alt="Description 4" /> <img src="5.jpg" longdesc="#5" width="365" height="480" alt="Description 5" /> <img src="6.jpg" longdesc="#6" width="400" height="448" alt="Description 6" /> <img src="7.jpg" longdesc="#7" width="426" height="473" alt="Description 7" /> </div>
    <div id="dialog-modal" style="display: none"></div>
    <script src="imageflow.js"></script>
    <script>
    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
        });
    });
    </script>

    <div id="1" style="display: none"><img src="1.jpg" /></div>
    <div id="2" style="display: none"><img src="2.gif" /></div>
    <div id="3" style="display: none"><img src="3.png" /></div>
    <div id="4" style="display: none"><img src="4.png" /></div>
    <div id="5" style="display: none"><img src="5.jpg" /></div>
    <div id="6" style="display: none"><img src="6.jpg" /></div>
    <div id="7" style="display: none"><img src="7.jpg" /></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="jQuery_modal.js"></script>
</body>
</html>
Последнее редактирование: 2 мес. 3 нед. назад пользователем p.rishard.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум