jquery - change fancybox design - add another div without window shaking -
i have jw player on fancybox window. works well, have 1 design problem:
when player window shown (when fires), moves "bottom up", down window. because added div under player. how can fix this? here demo example: http://teodore.ge/test/demo/
i have made that:
<script> $(".fancybox").fancybox({ fittoview: false, // show videos in own size content: '<div></div>', // create temp content scrolling: 'no', // don't show scrolling bars in fancybox afterload: function () { // dimensions data attributes var $width = $(this.element).data('width'); var $height = $(this.element).data('height'); var link=$(this.element).context.attributes.yutubelink.nodevalue; this.content = ' <embed type="application/x-shockwave-flash" src="player.swf" width="640" height="383" style="undefined" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="file='+link+'&skin=nacht.zip&autostart=true">'; }, aftershow: function(){ var toolbar = "<div id='tools'>" + $("#appendcontent div").eq(this.index).html() + "</div>"; $(".fancybox-outer").append(toolbar); } }); </script> <div id="appendcontent" style="display: none; width: auto; height: auto;"> <div > 1111 div problem <br><br><br> 1111111 <br> <br> </div> <div> 2222: div problem <br><br><br> 2222222 <br> <br> </div> </div> <a class="fancybox" yutubelink="http://www.youtube.com/watch?v=p3iynhx8p0s" > <img src=" 1.jpg" width="360" height="240"></a><br> <a class="fancybox" yutubelink="http://www.youtube.com/watch?v=usglnbsnrgo"> <img src=" 2.jpg" width="360" height="240"></a> <br>
i move function adding new div beside player. move function aftershow() afterload() function. adding div after loading caused problem (it changes location of div). because player must @ center of screen , when adding new div, position changing.
Comments
Post a Comment