Append li to jcoverflip Image Gallery

Question

I have an image Gallery that looks like this:

<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>

At some point, when the user clicks something, I want to add more images to this gallery. I have achieved this by doing this:

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

problem is, I think I need to refresh/reload the gallery, because the image is being appended to the site but never as a part of the gallery.

example:

I have tried several things but have now come to a halt and am in dire need of help.

The gallery script is being referred to like this in my code:

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

It also has script file being called in the head tag.

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

The content of Flipper.js will be in this fiddle.

https://jsfiddle.net/5evk9ehn/

I really hope someone can help me figure this out. Thx in advance!

Answer 1

I came up with an alternative solution to this.

Bottom line is you want some images to be visible at some point and then aditional ones at another point.

So i went on to never append the li to ul but making the li stay in the ul constantly:

<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> 

The problem is you can't just do:

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

This you can't do because as soon as you interact with gallery the img will show again. I don't know why but it does.

So I went on and did this:

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

You have to do the fadeTo because else the img will glich everytime you interact with the gallery.

when you reach the point where you want to show the img again in the gallery you go about it like this:

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