Neler yeni
Türkiye'nin En Güncel Forum Sitesi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı yada giriş yapmalısınız. Forum üye olmak tamamen ücretsizdir.

Video Popup List (ing)

ByOnur58

Kayıtlı Üye
MFC Üyesi
  • Üyelik Tarihi
    7 Ocak 2015
  • Mesajlar
    2,113
  • MFC Puanı
    10
  • MFC Seviyesi

Kod:
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Patrick Hunlock | http://www.hunlock.com/Licensed under: Public Domain
 */

function getElementsByClass (searchClass) {
  // This function returns an array of all HTML objects with the
  // specified className.  Tag is optional
  var returnArray = [];
  var els = ********.getElementsByTagName('*');
  var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
  for (var i = 0; i < els.length; i++) {
    if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
  }
  return returnArray;
}

function popVideo(vid, darken) {
  // This function accepts a division ID (vid), either a string or the actual
  // object itself.   vid is mandatory.   darken is optional, if it's true
  // the page will be greyed out under the video.
  var videos = getElementsByClass('video');     // Get all the videos on the page.
  var isplaying=null;
  for(i=0; i<videos.length; i++) {              // Loop through all the videos
    if (videos[i].style.display=='block') {     // This video is playing
      isplaying=videos[i].id;                   // remember its name
      var tmp=videos[i].innerHTML;              // Get the division contents
      videos[i].innerHTML='';                   // destroy the contents
      videos[i].style.display='none';           // Terminate the video.
      videos[i].innerHTML=tmp;                  // rebuild the contents.
    }
  }
  // This handles the darkening of the background while a video is playing.
  // First we see if the dark layer exists.
  var dark=********.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    var tbody = ********.getElementsByTagName("body")[0];
    var tnode = ********.createElement('div');          // Create the layer.
        tnode.style.backgroundColor='rgb(0, 0, 0)';     // Make it black.
        tnode.style.opacity='0.7';                      // Set the opacity (firefox/Opera)
        tnode.style.MozOpacity='0.70';                  // Firefox 1.5
        tnode.style.filter='alpha(opacity=70)';         // IE.
        tnode.style.zIndex='1';                         // Zindex of 50 so it "floats"
        tnode.style.position='absolute';                // Position absolutely
        tnode.style.top='0px';                          // In the top
        tnode.style.left='0px';                         // Left corner of the page
        tnode.style.overflow='hidden';                  // Try to a**** making scroll bars
        tnode.style.display='none';                     // Start out Hidden
        tnode.id='darkenScreenObject';                  // Name it so we can find it later
    tbody.appendChild(tnode);                           // Add it to the web page
    dark=********.getElementById('darkenScreenObject'); // Get the object.
  }
  dark.style.display='none';
  if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
  if (typeof(vid)=="string") { vid=********.getElementById(vid); }
  if (vid&&typeof(vid)=="object") {
    if (darken) {
      // Calculate the page width and height
      if( window.innerHeight && window.scrollMaxY )  {
        var pageWidth = window.innerWidth + window.scrollMaxX;
        var pageHeight = window.innerHeight + window.scrollMaxY;
      } else if( ********.body.scrollHeight > ********.body.offsetHeight ) {
        var pageWidth = ********.body.scrollWidth;
        var pageHeight = ********.body.scrollHeight;
      } else {
        var pageWidth = ********.body.offsetWidth + ********.body.offsetLeft;
        var pageHeight = ********.body.offsetHeight + ********.body.offsetTop;
      }
      //set the shader to cover the entire page and make it visible.
      dark.style.width= pageWidth+'px';
      dark.style.height= pageHeight+'px';
      dark.style.display='block';
    }
    // Make the video visible and set the zindex so its on top of everything else
    vid.style.zIndex='100';
    vid.style.display='block';
    var scrollTop = 0;
    if (********.********Element && ********.********Element.scrollTop)
      scrollTop = ********.********Element.scrollTop;
    else if (********.body)
      scrollTop = ********.body.scrollTop;

    // set the starting x and y position of the video
    vid.style.top=scrollTop+Math.floor((********.********Element.clientHeight/2)-(vid.offsetHeight/2))+'px';
    vid.style.left=Math.floor((********.********Element.clientWidth/2)-(vid.offsetWidth/2))+'px';
  }
  return false;
}

// This portion will allow the video to be dragged and dropped

var savedTarget=null;   // The layer being moved
var orgCursor=null;     // The original mouse style so we can restore it
var dragOK=false;       // True if we're allowed to move the element under mouse
var dragXoffset=0;      // How much we've moved the element on the horozontal
var dragYoffset=0;      // How much we've moved the element on the verticle

function moveHandler(e){
  // This function moves the layer when the mouse is moved.
  // it's called automatically by the onmousemove handler
  if (e == null) { e = window.event }
  if (e.button<=1&&dragOK){
    savedTarget.style.left=e.clientX-dragXoffset+'px';
    savedTarget.style.top=e.clientY-dragYoffset+'px';
    return false;
  }
}

function cleanup(e) {
  // This is called when the user releases the mouse
  // it clears out the move and mouseup event handlers
  // and resets the cursor.
  ********.onmousemove=null;
  ********.onmouseup=null;
  savedTarget.style.cursor=orgCursor;
  dragOK=false;
  return false;
}

function dragHandler(e){
  // This is called when the user clicks on the page
  // It checks to see if the click happened over an
  // element with a class name of "video", if if it
  // did, it sets up move and mouseup handlers.
  var cursorType='-moz-grabbing';
  if (e == null) { e = window.event; cursorType='move';}
  var target = e.target != null ? e.target : e.srcElement;
  if (target.className=="video") {
    orgCursor=target.style.cursor;
    savedTarget=target;
    target.style.cursor=cursorType;
    dragOK=true;
    dragXoffset=e.clientX-parseInt(target.style.left);
    dragYoffset=e.clientY-parseInt(target.style.top);
    ********.onmousemove=moveHandler;
    ********.onmouseup=cleanup;
    return false;
  }
}

//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
********.onmousedown=dragHandler;
</script>


<h2>Check these videos</h2>
<ul>
  <li><a href="http://www.youtube.com/watch?v=LUcB-TLLg40" onclick='return popVideo("vid1")'>Alan Meckler, Chairman and Chief Executive Officer, Jupitermedia Corporation</a> [4:19]</li>
  <li><a href="http://www.youtube.com/watch?v=YRDtwcGrGyM" onclick='return popVideo("vid2")'>How to Install a Testing Server on Your PC</a> [10:16]</li>
</ul>


<!--  Place this at the bottom of your Web page, before the closing BODY tag.  -->

<div id='vid1' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LUcB-TLLg40&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/LUcB-TLLg40&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>

<div id='vid2' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/YRDtwcGrGyM&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/YRDtwcGrGyM&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>
 
Üst Alt