将 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>');

问题是，我想我需要 refresh/reload 画廊，因为图像被附加到网站，但从未作为画廊的一部分。

示例：

我尝试了几件事，但现在都停了下来，急需帮助。

图库脚本在我的代码中是这样引用的：

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

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

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

将 li 附加到 jcoverflip 图片库

Append li to jcoverflip Image Gallery

javascript

jquery

image

reload

html-lists