Здесь опубликован базовый HTML, использованный для построения всплывающих окон jquery-ui галереи изображений ImageFlow на основе фреймворка 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>
