Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post javascript to automatically trigger opening a popup window with a given URL?

    Hi,

    I have this page on my website with client videos. I have used the shadowbox javascript that whenever someone clicks on a certain video thumbnail, a pop-up window would open and the video would automatically play.

    Is it possible to create a function for this to create a link for each popup window such that when I give this link to someone and that someone tries to visit that link, a pop-up window would be triggered for with the specific video automatically playing? I’m really not sure what this process is called or if it is really possible.

    Here’s the actual code from my website:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/shadowbox.css">
    <link rel="stylesheet" href="http://neville-adomi.myrealpagewebsite.com/_media/Media/csstyle.css" type="text/css" />
    
    <script type="text/javascript" src="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/jquery.min.js"></script>
    <script type="text/javascript" src="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/shadowbox.js" ></script>
    
    <script type="text/javascript">
      Shadowbox.init({
      // Global Shaodowbox Options go here.
      });
    
      $(document).ready(function(){
      // jQuery .each is used to check every anchor tag on the webpage. Optionally, use a known Class Name too improve performance.
        $('a').each(function(index) {
          //
          var SBselector = $(this).attr('href').match('www.youtube.com');
            if(SBselector){
              console.info('The current matched index number is: ' + index); 
              console.info('The ORIGINAL anchor link is shown below:');
              console.info( this );
              // This Regular Expression will match:  ?v=anythingElseAddedOppsImeanTheVideoID
              // Here is a breakdown of what this regular expression does:
              //    First is the variable container like so:              SBregexMatch = /          /;
              //    A non-capturing group is used for the match:          SBregexMatch = /(?:      )/;
              //    The first thing to match is the question mark:         SBregexMatch = /(?:\?    )/;
              //    Immediately after above line, match two chars:        SBregexMatch = /(?:\?v=  )/;
              //    Last thing is match any single character many times:  SBregexMatch = /(?:\?v=.+)/;
              var SBregexMatch = /(?:\?v=.+)/;
              // The JavaScript .exec Method is used analyse the .each item's 'href attribute' using the above regular expression in SBregexMatch variable.
              // Along with the required match, the matched Object is then converted to a String and the first 3 characters are Sliced out since the first three characters are always  ?v=
              // The expected variable contents is the unique YouTube Video ID
              var SBregexForYouTube = SBregexMatch.exec(this.href).toString().slice(3); 
              // Use the SBregexForYouTube variable containing the unique YouTube Video ID with the current URL syntax to view the video directly.
              // The expected variable contents should be a URL to show the video in the entire browser viewport.
              // The following markup can easily be updated as required... that is whenever YouTube changes it's URL syntax as seen in EMBED Share Button via "Use old embed code".
              var SByouTubeLink = "http://www.youtube.com/v/" + SBregexForYouTube + "?version=3";
              // Replace the anchors current href with the MODIFIED version.
              $(this).attr('href',SByouTubeLink);
              // This SBtitle variable will recycle the anchors title or use JavaScript OR to apply a Default Title when one was not provided. Use '' (i.e., two empty quotes) if no Default Title is desired.
              // This title is used for Shadowbox Titlebar and the optionally created thumbnail/poster image hover title.
              var SBtitle = this.title || '';
              // Use Shadowbox.setup to add the new anchor to Shadowbox's cache.
              // If the original anchor does not have a title attribute, it's omitted from Shadowbox without error.
              // Adjust the width and height as provided in the EMBED markup.
              // Add additional Shadowbox options below. The last Shadowbox Option should NEVER have a comma at the end.
              // If all found items should not be inside a Shadowbox Gallery, simply remove that option below.
              // Power-tip: Not discussed here is to use YouTube API. That in itself may have options to acquire the native video's width and height so it can be applied to the above Shadowbox.setup. Google for that if desired!
              Shadowbox.setup( this ,{
                content: this.href,
    			gallery: 'gallery',
                player: 'swf',
                title: SBtitle,
                width: 640,
                height: 360
              });
                          
              console.warn('The unique video ID for YouTube is: ' + SBregexForYouTube);
              console.info('The MODIFIED anchor link is shown below:');
              console.info(this);
              console.log(' ');
              console.log(' ');
              console.info('To keep this DEMO short, any changes to Title and Thumbnail/Poster Image is not shown in console but explained in the HTML file.')
    
              // This next section is a special request to insert a Thumbnail/Poster-Image wherever a text-link for a video was shown on the video page.
              // To keep this DEMO simple, only the Class Name of  poster  will have this image option applied by using an 'if' statement to check for Boolean true that the current .each item has this Class Name.
              // Note that the img tag contains a Class Name of posterStyle that is created. This allows the dynamic image to use a pre-defined style as shown at the top of this HTML page.
              if( $(this).hasClass('poster') ){
                          
              // The SBtitle variable is updated to use something more simple for the thumbnail/poster image title.
              SBtitle = 'Click To Play';
              // The following will use an image provided from online image placeholder website as shown. Change 140x120 to apply different dimensions to thumbnail/poster.
              // The next line (and the complement line thereafter) tells the W3C Validation Service to ignore the Less Than and Greater Than symbols used in the markup below so this webpage validates.
              }
           }
       });
     });
     </script>
    </head>
    
    <body>
    	<p>VIDEO 1:</p>
      	<a href="http://www.youtube.com/watch?v=6YpDEjnR14E&autoplay=1" class="poster" title="&nbsp;E. & M. Carnegie">
    	<div class="img" ><img src="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/thumbnails/0.png" alt="Carnegie" width="190" height="140">
    	<div class="caption">Click Here to Watch Video Testimonial</div></div></a>
    	<br />
    
    	<p>VIDEO 2:</p>
    	<a href="http://www.youtube.com/watch?v=pcO8U6Y7WjY&autoplay=1" class="poster" title="&nbsp;T. & S. Swan">
    	<div class="img" ><img src="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/thumbnails/1.png" alt="Swan" width="190" height="140">
    	<div class="caption">Click Here to Watch Video Testimonial</div></div></a>
    	<br />
    
    	<p>VIDEO 3:</p>
    	<a href="http://www.youtube.com/watch?v=6hkKmKj-O9k&autoplay=1" class="poster" title="&nbsp;A. & R. Tasse">
    	<div class="img" ><img src="http://neville-adomi.myrealpagewebsite.com/_media/shadowbox/thumbnails/2.png" alt="Tasse" width="190" height="140">
    	<div class="caption">Click Here to Watch Video Testimonial</div></div></a>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I was wondering if it is possible to automatically popup the shadowbox player and the video will automatically play when provided with a link?

    say for example i want somebody to watch a certain video testimonial, but instead of bringing them to the page where i have all my video thumbnails, i would just like to give them a link. With that link, the specific video which I wanted him/her to watch would automatically play in a pop-up window. (the main page where my video testimonials behind it)

    help anyone?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •