modal-video-box

modal-video-box.xml

1.Place before closing body tag in home... could also place in feature panel AFTER you have declared everything else:

<!--<style>
        #simplemodal-container a.modalCloseImg {
                background:url(http://archive.wbresearch.com//luis/js/images/x.png) no-repeat; /* adjust url as required */
                width:25px;
                height:29px;
                display:inline;
                z-index:3200;
                position:absolute;
                top:-15px;
                right:-18px;
                cursor:pointer;
        }
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
        </style>-->
<!--<script type="text/javascript" src="http://archive.wbresearch.com/luis/js/jquery.simplemodal-1.4.2.js">-->

2. Declare your variables in a <script> tag, the aboutVideo variable should be the iframe information that will be loaded when the video is clicked:

<!--<script>
 var aboutVideo = '<iframe width="560" height="315" src="http://www.youtube.com/embed/JwFOq_LU2lE?rel=0" frameborder="0" ></iframe>';
 var cssOverlay = '{containerCss:{backgroundColor:"#000", borderColor:"#000", height:300, padding:0, width:400}, overlayClose:true}';
</script>-->

3. write the anchor tag and image tag states with onclick (note this is bad javascript because it isn't safe to call things across networks like this, 2 the way the code is written if someone doesn't have javascript installed nothing will happen when they click the link)

<li>
  <a onclick="$.modal(aboutVideo,cssOverlay)" href="javascript:void(0)">
    <img alt="Feature Panel Slide" src="/uploadedImages/Events/USA/2013/10359_008/Get_Involved_Now/flash/10359_whyattend_etail.jpg" />
  </a>
</li>           

4. Sample Implementation

<root>
  <PageRedirect>
    <RedirectUrl></RedirectUrl>
  </PageRedirect>
  <Titles>
    <HtmlTitle>home_new_featurepanel</HtmlTitle>
  </Titles>
  <fp_image></fp_image>
  <fp_flash></fp_flash>
  <main_flash_xml></main_flash_xml>
  <HtmlContent>
    <HtmlContent>
      <link rel="stylesheet" type="text/css" href="http://38.119.46.100/jqueryfeaturepanel/featurepanel.css"></link>
      <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
      <!--<script type="text/javascript" src="http://archive.wbresearch.com/luis/js/jquery.simplemodal-1.4.2.js">-->
      <!--<script type="text/javascript" src="http://38.119.46.100/jqueryfeaturepanel/featurepanel.js"></script>-->
      
      <div id="featurePanel">
        <div id="slider">
          <div class="slides">
            <li>
              <a onclick="$.modal(aboutVideo,cssOverlay)" href="javascript:void(0)">
                <img alt="Feature Panel Slide" src="	/uploadedImages/Events/USA/2013/11536_007/Get_Involved_Now/flash/11536_whyattend.jpg" />
              </a>
            </li>
          </div>
        </div>
      </div>
      <!--<script>
 var aboutVideo = '<iframe width="560" height="315" src="http://www.youtube.com/embed/yeyRwrNqaKM" frameborder="0"></iframe>';
 var cssOverlay = '{containerCss:{backgroundColor:"#000", borderColor:"#000", height:300, padding:0, width:400}, overlayClose:true}';
</script>-->
   </HtmlContent>
  </HtmlContent>
</root>

in home

<!--<style>
        #simplemodal-container a.modalCloseImg {
                background:url(http://archive.wbresearch.com//luis/js/images/x.png) no-repeat; /* adjust url as required */
                width:25px;
                height:29px;
                display:inline;
                z-index:3200;
                position:absolute;
                top:-15px;
                right:-18px;
                cursor:pointer;
        }
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
        </style>-->
<!--<script type="text/javascript" src="http://archive.wbresearch.com/luis/js/jquery.simplemodal-1.4.2.js"></script>-->