javascript - 将 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 的内容将在这个 fiddle 中。

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);
      }
    });

我认为您不需要重新实例化 slider 元素，但我对此不确定。