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/

我真的希望有人可以帮我解决这个问题。 Thx提前！

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的索引... weirdos; - ）

<强>更新看起来在您的示例中有更多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

我想出了另一种解决方案。

底线是你希望某些图像在某个点可见，然后在另一点可以看到附加的图像。

所以我继续把李添加到ul但是让我不断地留在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都会变成glich。

当您到达想要在图库中再次展示img的位置时，您会像这样：

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

将li附加到jcoverflip图库

2 个答案: