0

我想就我拥有的 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 技能不强，除了一些小的样式更改外，我使用的是默认示例。

任何帮助将不胜感激，如果我需要为我的问题提供更多详细信息，请告诉我。

谢谢！

4

2 回答 2

0

由于您没有完全使用 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] 是将图像分组到一个组/相册中的原因。

于 2013-03-10T15:05:36.697 回答
0

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

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 );
    });
});
于 2013-03-11T16:58:47.090 回答