All geek questions in one place

Javascript: popup with movie from images in main window

I'm basically a Javascript'er newbie, and I try it on a web page that, by clicking a button, pops up a window that shows a cyclic "movie" with images from the main window. From what I've tried in Googling, I feel like I'm pretty close, but something is slipping away from me.

I know that it follows the results in two separate issues that deserve two separate posts. But I believe that both of them are related to the same problem / goal, perhaps this refers to the same (albeit long) message. Therefore, I hope that the size of this does not exacerbate people too ...; -)

In any case, here is a snapshot of what I consider the appropriate code:

<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  /*while(true)*/
  for(i=0; i<main.document.images.length; i++) {
    next=main.document.images[i].src;
    popup.document.images[0].src=next;
    timeout=setTimeout('wait();',500);
  }
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>

/ ; , ...

Debian Etch Iceweasel (Firefox 2.x rebrand); . Iceweasel:

  • , , , . setTimeout, , "" .
  • , , , - .

, :

  • setTimeout ? "" , "" setTimeout(), .
  • , , HTML (anim.html), , , " ", . , - , , /, HTML- window.open(), "" HTML.
  • while(true) , , 100% CPU. if for, , "" " " - while(true) ?

, , , .

+3
3

, , , :

timeout=setTimeout('wait();',500);

-, sleep() . , JS timeouts - onclick : , 0- 1-... ; , : " wait(), 500 ".

window.setTimeout(foo,bar,baz) : bar . . bar foo(baz) . setTimeout .

:

function anim() { 
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+
      (main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+
    '</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" ' + 
    'onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');

  // *changed below*
  // start the animation with the 0th image
  next_image(0,main.document.images,popup.document.images[0]);
}

function next_image(index,source_image_array,target_image) {
    // if not at end of array
    if (source_image_array.length < index) { 
        next=source_image_array[index].src;
        target_image.src=next;

        // do this again in 500 ms with next image
        window.setTimeout(next_image,500, index+1 ,
                            source_image_array,target_image);
    }
}

, anim() next_image(0), 0- next_image(1) 500 ; , 1-, next_image(2) 500 .., .

+3

, JavaScript jQuery plugin, - . , , JavaScript , jQuery + , . , DIY, - jQuery, DOM.

+1

: , , :

setTimeout(foo,bar,baz) : bar . . bar foo(baz) . setTimeout .

, ; , ; -)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

, :

  • while(true)is evil, it makes the browser freeze. Instead, I used a condition in a function anim()that returns the index to zero when it reaches the end.
0
source

Source: https://habr.com/ru/post/1705497/

More articles:


All Articles