将 li 附加到 jcoverflip 图片库

Question

我有一个看起来像这样的图片库：

<div id="mycontainer">
<div id= wrapper>
  <ul id="flip">
  <li><img id="contact" src="./Photos/PhoneMenu.png" /></li>
  <li><img id="info" src="./Photos/InfoMenu.png" /></li>
  <li><img id="home" src="./Photos/LogoMenu.png" /></li>
  <li><img id="product" src="./Photos/SignUpMenu.png" /></li>
  <li><img id="thumbs" src="./Photos/FacebookMenu.png" /></li>
</ul>
</div>
</div>

在某些时候，当用户单击某些内容时，我想向此图库添加更多图像。我通过这样做实现了这一点：

$("#mycontainer div ul").append('<li><img id="Coin" src="./Photos/Coin1.png" /></li>');

问题是，我认为我需要刷新/重新加载图库，因为图像被附加到网站但从未作为图库的一部分。

示例：

我已经尝试了几件事，但现在停止了，我急需帮助。

画廊脚本在我的代码中是这样引用的：

$.getScript("./JqueryScriptFiles/Flipper.js");

它还有在head标签中被调用的脚本文件。

<script type="text/javascript" src="./JqueryScriptFiles/jquery.jcoverflip.js"></script>

Flipper.js 的内容将在这个小提琴中。

https://jsfiddle.net/5evk9ehn/

我真的希望有人能帮我解决这个问题。提前谢谢！

Answer 1

根据文档，jcoverflip does not support directly adding or removing items。

他们列出了一种解决方法，不过，@vijayP 建议这样做：销毁对象，添加一个 li，然后再次创建它。在您的情况下，它看起来像这样：

var $ul = $("#mycontainer div ul");
$ul.jcoverflip('destroy');
$ul.append('<li><img id="Coin" src="./Photos/Coin1.png" /></li>');
$ul.jcoverflip();

请注意，在执行此操作时，图库将返回到第一个项目。您可能必须在销毁画廊之前弄清楚选择了哪个项目，然后在创建它时将其重新设置。

如果您确实想保持画廊位置：

似乎他们不容易弄清楚当前位置。您可以通过在销毁它之前查找具有完全不透明度集的图像来破解它：

var pos = 0;
$("#mycontainer div ul img").filter(function(i) {
    pos = i;
    return $(this).css("opacity") == 1;
});

然后在您重新实例化库时使用它：

$ul.jcoverflip({current: pos+1});

请注意，他们似乎使用基于 1 的索引...奇怪 ;-)

更新： 看起来您的示例中有更多 jcoverflow 元素的自定义设置。当您重新初始化 jcoverflip 元素时（在销毁原始元素并附加新的 li 之后），我将使用您在 Flipper.js 中发布的相同代码重新初始化该元素。我认为你只需要实例化 jcoverflip 元素：

jQuery( '#flip' ).jcoverflip({
      current: 2, // Or whatever the currently select position in the gallery is
      beforeCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: "4.16vw", height: "2.76vw"}, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: "5.20vw", height: "3.43vw"}, {} )
        ];
      },
      currentCss: function( el, container ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '10.41vw', height: "6.87vw" }, { } )
        ];
      },
      change: function(event, ui){
        jQuery('#scrollbar').slider('value', ui.to*25);
      }
    });

我认为您不需要重新实例化滑块元素，但我不确定。

Answer 2

我想出了一个替代解决方案。

底线是您希望一些图像在某个点可见，然后在另一个点显示其他图像。

所以我继续从不将 li 附加到 ul 中，而是让 li 不断地留在 ul 中：

<div id="mycontainer">
  <div id= wrapper>
    <ul id="flip">
      <li><img id="contact" src="./Photos/PhoneMenu.png" /></li>
      <li><img id="info" src="./Photos/InfoMenu.png" /></li>
      <li><img id="home" src="./Photos/LogoMenu.png" /></li>
      <li><img id="product" src="./Photos/SignUpMenu.png" /></li>
      <li><img id="thumbs" src="./Photos/FacebookMenu.png" /></li>
      <li><img id="Coin" src="./Photos/Coin1.png" /></li>
    </ul>
    </div>
    </div> 

问题是你不能这样做：

$("#Coin").hide();

您不能这样做，因为一旦您与图库互动，img 就会再次显示。我不知道为什么，但确实如此。

所以我继续这样做：

var Hide = setInterval(function() {
    $("#Coin").fadeTo(0, 0.00);
    $("#Coin").hide();
}, 0);

您必须执行 fadeTo，否则每次您与图库互动时，img 都会出现故障。

当您到达要在图库中再次显示 img 的位置时，您可以这样做：

if(//event has occured){
                clearInterval(Hide);
                $("#Coin").fadeTo(0, 1.0);
                $("#Coin").show();
                }