jQuery Reel Plugin: showing or hiding the reel image dynamically

Excuse my English.

I tried to use the jQuery Reel Plugin and it works perfectly on my html file.

 <img src="DSCN0691.jpg" width="210" height="186"
  class="reel"
  id="image1"
  data-images="fish/DSCN####.JPG|691..702">

But if I add the script through document.innerHTML, it doesn't work at all.

The image will show up, but I can't reel it.

document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';

I also tried the element.setAttribute(name, value) function, or loaded the whole html file using jQuery. But it turns out the same way...

Have no idea what to do now.

Or are there any other solution that I can show and hide the reel image dynamically ?

Thanks a lot.

Down here are the whole script and project.

JQuery Reel Project

 <script language="JavaScript">
 function WriteToFile(passForm) {       

document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';

 }
 </script>

<head>
    <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
    <script src='jquery.reel.js' ></script>
</head>

<body>  
  <div id="Hello"></div>    
  <input type="button" value="submit" onclick="WriteToFile(this);">

  <img src="DSCN0691.jpg" width="210" height="186"
    class="reel"
    id="image1"
    data-images="fish/DSCN####.JPG|691..702">
  </body>

Answers:

Answer

The reel plugin is initializing all images with the class "reel" on document load. If you change the HTML Dom afterwards, you need to initialize the added image. You can do this by the following javascript instead:

$('#image').reel({
    images: 'fish/DSCN####.JPG|691..702'
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.