Question

我想问一下我正在使用的jquery灯箱/图库的帮助。

我正在研究的网站谈论房地产，鼠标悬停在一个叠加层上显示提供“更多信息”之旅。单击时，应显示一个灯箱，其中包含有关该属性的更多信息。

灯箱也应该包含其他图像的幻灯片。

鼠标悬停覆盖和灯箱工作正常，但我无法让图像滑块在灯箱内工作。我看到滑块的所有内容，应隐藏的示例图像不是，并且缺少所有功能。

这些是我正在使用的两个插件：

https://github.com/richardscarrott/jquery-modal

http://i-like-robots.github.com/jQuery-Slideshow/

我使用jquery 1.8.3作为我的基础，两个插件都可以使用该基础。

这是一个小提琴：http://jsfiddle.net/stephanief0042/cwKKY/6/

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Image gallery in lightbox</title>
<link rel="stylesheet" type="text/css" href="modal.css" media="all" />
<link rel="stylesheet" href="slideshow.css" />
<link rel="stylesheet" type="text/css" href="outerspaces.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rs.modal.js"></script>
<script src="outerspaces.js" type="text/javascript"></script>
</head>
<body>
<div class="hover firstdiv">Hover here
<div class="overlay-test">overlay test</div>
<!-- First overlay-->
<div class="overlay" style="visibility:hidden">
<a href="#host-space" class="modal-toggle-1"><img src="images/request-a-tour-overlay.png" /></a>
</div>
<div class="host-space-content" style="display: none;">
<div id="host-space" class="host-space">
<div id="host-image-gallery">
<div class="hostname">Host Name</div>
<div class="hostaddress">Host Address</div>
<!-- Image gallery space -->
<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false">
<ul class="carousel">
<li class="slide"><img src="http://placebox.es/440/200/d97ef2/f5f5f5" alt="" width="440"                   height="200" /></li>
<li class="slide"><img src="http://placebox.es/440/200/50ac3d/f5f5f5" alt="" width="440" height="200" /></li>
<li class="slide"><img src="http://placebox.es/440/200/0a77bb/f5f5f5" alt="" width="440" height="200" /></li>
</ul>
</div>
<!-- END image gallery space -->
<div>Host short description</div>
<div>Host indstry/vibe info</div>
<div>Host Website link</div>
<!-- END host-space --></div>
<div id="host-info-area">
<div>Host Info area</div>
<!-- END host-space --></div>
<!-- END host-space-content --></div>
<!-- END CONTAINING DIV --></div>
<script src="slideshow.js"></script>
<script>
$(function()
{
// Create slideshow instances
var $s = $('.slideshow').slides(),
// Access an instance API
api = $s.eq(0).data('slides');
// Transition select
$('select[name=transition]').on('change', function()
{
api.redraw( this.value );
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.modal-toggle-1').click(function (e) {
e.preventDefault();
$.modal.open($('#host-space').clone(), {
maxHeight: 600,maxWidth: 874,fitViewport: true
});
});
});
</script>
</body>
</html>

我的jquery技能不强，除了几个小样式更改我正在使用默认示例。

如果我需要提供更多详细信息，请与我们联系。

谢谢！

Answer 1

由于您不完全使用jscript，我建议您使用一个灯箱插件，该插件允许支持画廊，例如prettyphoto http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

示例代码有一个示例，如下所示：

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>

使这一切工作的原因是rel属性。 rel =“prettyPhoto [pp_gal]”是它的工作原理，括号内的文字[pp_gal]是将图像分组到一个组/专辑中。

Answer 2

希望这会有所帮助。试试这个，让我知道它是怎么回事。刚刚在函数内移动了滑块代码。

http://jsfiddle.net/Purus/qZWDZ/

$('.modal-toggle-1').click(function (e) {
   e.preventDefault();

   $.modal.open($('#host-space').clone(), {
      maxHeight: 600,maxWidth: 874,fitViewport: true
   });

    // Create slideshow instances
    var $s = $('.slideshow').slides(),

    // Access an instance API
    api = $s.eq(0).data('slides');

    // Transition select
    $('select[name=transition]').on('change', function()
    {
       api.redraw( this.value );
    });
});

如何在灯箱/模态中使用jquery图库？

2 个答案: