使用 z-index、php、xml 和 jquery/cycle.js 的密集幻灯片

Question

所以我正在做这个项目，创意总监给了我一个难题。

他使用 flash 创建了一个原型，该原型需要使用 jQuery、XML（或 PHP）来构建，以拉入所有内容和图像，然后在相同的 div 尺寸内切换也通过 XML 拉入的更多信息。

我被允许最大程度地使用 JS，这意味着如果我使用 JS 拉取图像，我会给它们一个特定的命名约定。无需进一步告别：

http://joeylabs.com/sites/sgc/prototype/

顺便说一句，由于某种原因，此页面将幻灯片一直推到底部，因此要查看整个内容，只需滚动到底部即可。 :)

所以我的想法是：

1. 通过 php 目录扫描脚本或使用图像命名约定使用 jquery 从文件夹中提取图像。
2. 然后使用 Cycle.js 我创建一个变量，用于在 onBefore 中保存 li before 内的图像，并创建一个变量，用于在 onAfter 中保存 li after 内的图像，将它们分别浮动在 z-index 小于 1 的 div 中比当前幻灯片。 （我还不知道如何做到这一点）
3. 当前幻灯片有一个百叶窗过渡，当用户单击“下一步”时，它会触发 2 张幻灯片，一张在下面，一张在上面。

目前这都是理论，但您不认为可以运行 2 个循环幻灯片，一个在另一个之上，用 1 个触发器吗？有人对此有什么想法、建议吗？

Answer 1

是的，我将每个 img 嵌套在两个 div 和两个 div 中以将其包裹起来...

<div id="before_window_wrapper">
  <div name="before_n_after_window">

    <div id="before_slide_wrapper">
       <div id="before_slide">
         <img src"my/image/directory/1.img"/>
       </div>
       <div id="slide_comment">
         <h3>person comment for this img goes here</h3>
       </div>
    </div>

    <div id="before_slide_wrapper">
      <div id="before_slide">
        <img src"my/image/directory/3.img"/>
      </div>
        <div id="slide_comment">
         <h3>person comment for this img goes here</h3>
       </div>
   </div>

  </div>
</div>

并且：

<div id="after_window_wrapper">
  <div name="before_n_after_window">

    <div id="after_slide_wrapper">
       <div id="after_slide">
         <img src"my/image/directory/2.img"/>
       </div>
       <div id="slide_comment">
         <h3>person comment for this img goes here</h3>
       </div>
    </div>

    <div id="after_slide_wrapper">
      <div id="after_slide">
        <img src"my/image/directory/4.img"/>
      </div>
       <div id="slide_comment">
         <h3>person comment for this img goes here</h3>
       </div>
    </div>

  </div>
</div>

“before_n_after_window”的子项是正在循环的 div：

$("#before_n_after_window").each(function(index){
  $(this).cycle();
});

幻灯片包装器（before_slide_wrapper 和 after_slide_wrapper）位于 Cycle() 下完全控制-很好。但是，嵌套在其中的任何内容都不是，因此您可以为幻灯片放置更多同级（before_slide 和 after_slide） - 因此是“#slide_comment”div。

“before_n_after_window”仅在cycle()的半控制下，并使用与其自身不冲突的CSS代码。 “#before_window_wrapper”和“#after_window_wrapper”由您完全控制（css-wise）。

现在您已经有了“#before_n_after_window”及其子项，只需迭代它们并命名并指向每对控件：

var i = index;
var current_slide = $(this);

// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);

$(current_slide).cycle({
  fx:    'fade',
  pager:    '#nav_' + i,
  prev:     '#previous_button_' + i,
  next:     '#next_button_' + i,
});

// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
  $(current_slide).cycle('resume', true); 
  $('#pause_button_'+i).show();
  $('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() { 
  $(current_slide).cycle('pause'); 
  $('#pause_button_'+i).hide();
  $('#play_button_'+i).show();
});

您必须遵循上面的命名约定或您可能决定的任何其他命名约定。实际的控件可以放置在除窗口内部之外的任何地方 - 错误问题。

附带说明一下，我将这些对设置为在循环后立即暂停，因为我不想在页面上运行多张幻灯片。我希望用户选择循环哪一个。另外，我必须找到一种方法来关闭可能正在运行的任何其他周期。
然而：

if(better_solution){
  return please_post;
}

Answer 2

我认为您不会进行任何目录抓取 - 您将从哪里获取有关每个图像的其余信息（标题、说明文字等）。您需要将每个部分放入数据库中，并参考图像，当用户单击“了解更多”按钮、部分名称、预览标题等时应打开哪个子部分。

我建议使用Galleria 插件：http://galleria.aino.se/

对于子页面（“了解更多”的目的地“按钮），您可以将其 AJAX 到您拉动的绝对 div 中以覆盖整个幻灯片放映。这使得关闭按钮很容易实现 - 它只是将绝对 div 全部删除。