0

私が持っているjqueryライトボックス/画像ギャラリーについて助けを求めたいです。

私が取り組んでいるサイトでは、不動産について説明しています。マウスオーバーすると、「詳細」ツアーを提供するオーバーレイが表示されます。クリックすると、プロパティに関する詳細情報を含むライト ボックスが表示されるはずです。

ライト ボックスには、追加の画像のスライドショーも含まれているはずです。

マウスオーバー オーバーレイとライト ボックスは正常に動作しますが、ライト ボックス内で画像スライダーを動作させることができません。スライダーのすべてのコンテンツが表示され、非表示にする必要があるサンプル画像が表示されず、すべての機能が欠落しています。

これらは、私が使用している2つのプラグインです。

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 に答える