Shadowbox in Iweb

Discussion in 'Web Design and Development' started by enka, Mar 24, 2009.

  1. enka macrumors newbie

    Joined:
    May 9, 2008
    #1
    hello to everyone,

    i'm making a site in iweb and i want to play my videos using the shadowbox effect and quick time as a player.

    I understand the part that i have to use html snippets in iweb to put the codes inside.
    and i have the implemented the shadowbox folder inside my site directory
    (not sure if i use correct terminology). But the result is that it's not working.
    I'm struggling for a week now to get it to work and i've searched on internet but there is no tutorial for iweb...

    Could someone be kind enough to guide me?:)

    thanks in advance

    gr,
    nk
     
  2. enka thread starter macrumors newbie

    Joined:
    May 9, 2008
    #2
    can someone at least give me a hint of what i'm doing wrong...


    here is the code of the whole site:

    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" xml:lang="en">
      <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <meta name="Generator" content="iWeb 3.0" />
        <meta name="iWeb-Build" content="local-build-20090323" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="width=700" />
        <title>Portfolio</title>
        <link rel="stylesheet" type="text/css" media="screen,print" href="Nikos_Kandarakis_files/Nikos_Kandarakis.css" />
        <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Nikos_Kandarakis_files/Nikos_KandarakisIE.css'/><![endif]-->
        <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
        <script type="text/javascript" src="Scripts/iWebSite.js"></script>
        <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
        <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
        <script type="text/javascript" src="Scripts/iWebImage.js"></script>
        <script type="text/javascript" src="Nikos_Kandarakis_files/Nikos_Kandarakis.js">
        <script type="text/javascript" src="%shadowbox/src/adapter/shadowbox-base.js%"></script>
        <script type="text/javascript" src="%shadowbox/src/shadowbox.js%"></script>
        <script type="text/javascript">
         Shadowbox.loadSkin('classic', "%shadowbox/src/skin%");
         Shadowbox.loadLanguage('en', "%shadowbox/src/lang%");
         Shadowbox.loadPlayer(['flv', "html', 'iframe', 'img', 'qt', 'swf', 'wmp'], "%shadowbox/build/player%");
         window.onload = function(){ 
    
             Shadowbox.init();
                };
                Shadowbox.init(options);
                        });
        </script>
      </head>
      <body style="background: rgb(56, 56, 56); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
        <div style="text-align: center; ">
          <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: rgb(56, 56, 56); text-align: left; width: 700px; " id="body_content">
            <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
              <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
            </div>
            <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
              <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
              <div style="height: 1px; line-height: 1px; " class="tinyText">*</div>
              <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 0px; margin-top: 24px; opacity: 1.00; position: relative; width: 700px; z-index: 1; ">
        
                <div id="widget0-navbar" class="navbar">
    
          
                  <div id="widget0-bg" class="navbar-bg">
    
            
                    <ul id="widget0-navbar-list" class="navbar-list">
     <li></li> 
    </ul>
                    
          
    </div>
                  
        
    </div>
              </div>
              <script type="text/javascript"><!--//--><![CDATA[//><!--
    new NavBar('widget0', 'Scripts/Widgets/Navbar', 'Scripts/Widgets/SharedResources', '.', {"current-page-GUID": "8DC13EAC-2EAD-47FB-8362-1799F8C02F2F", "path-to-root": "", "isCollectionPage": "NO", "navbar-css": ".navbar {\n\tfont-family: 'Helvetica Neue', Arial, sans-serif;\n\tfont-size: .85em;\n\tcolor: #999;\n\tmargin: 0px;\n\tline-height: 20px;\n\tfont-weight: bold;\n}\n\n.navbar-bg {\n\ttext-align: left;\n\tpadding: 0px;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 15px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #999;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #999;\n}\n\nli a:hover\n{\n \tcolor: #F00;\n\ttext-decoration: none;\n}\n\n\nli.current-page a\n{\n\t color: #666;\n\ttext-decoration: none;\n\n}"});
    //--><!]]></script>
              <div style="clear: both; height: 0px; line-height: 0px; " class="spacer">*</div>
            </div>
            <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
              <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
              <div style="height: 120px; width: 700px;  height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; z-index: 1; " class="tinyText">
                <div style="position: relative; width: 700px; ">
                  <img src="Nikos_Kandarakis_files/shapeimage_1.png" alt="" style="height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; " />
                </div>
              </div>
              <div style="height: 1px; line-height: 1px; " class="tinyText">*</div>
              <div style="margin-left: 442px; margin-top: 519px; position: relative; width: 258px; z-index: 1; " class="style_SkipStroke shape-with-text flowDefining">
                <div class="text-content style_External_258_104" style="padding: 0px; ">
                  <div class="style">
                    <p style="padding-top: 0pt; " class="paragraph_style"><span style="line-height: 24px; " class="style_1">Contact</span> <br /></p>
                    <p class="paragraph_style_1"><br /></p>
                    <p style="padding-bottom: 0pt; " class="paragraph_style_2">Due to server space I can't host all my work here. Please contact me for a more detailed portfolio at <a class="class1" href="mailto:nikosk@planet.nl" title="mailto:nikosk@planet.nl">nikosk@planet.nl</a></p>
                  </div>
                </div>
              </div>
              
    
    
              <div id="id1" style="height: 41px; left: 40px; position: absolute; top: 78px; width: 620px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
                <div class="text-content graphic_shape_layout_style_default_External_620_41" style="padding: 0px; ">
                  <div class="graphic_shape_layout_style_default">
                    <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Title">Portfolio</p>
                  </div>
                </div>
              </div>
              
    
    
              <div id="id2" style="height: 65px; left: 163px; position: absolute; top: 172px; width: 211px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
                <div class="text-content graphic_textbox_layout_style_default_External_211_65" style="padding: 0px; ">
                  <div class="graphic_textbox_layout_style_default">
                    <p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for The Battle contest.<br /></p>
                    <p class="paragraph_style_3"><br /></p>
                    <p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
                    <p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
                  </div>
                </div>
              </div>
              
    
    
              <div id="id3" style="height: 65px; left: 163px; position: absolute; top: 275px; width: 187px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
                <div class="text-content graphic_textbox_layout_style_default_External_187_65" style="padding: 0px; ">
                  <div class="graphic_textbox_layout_style_default">
                    <p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for STC contest.<br /></p>
                    <p class="paragraph_style_3"><br /></p>
                    <p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
                    <p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
                  </div>
                </div>
              </div>
              
    
    
              <div style="height: 100px; width: 135px;  height: 100px; left: 11px; position: absolute; top: 177px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_3">
                <img src="Nikos_Kandarakis_files/o.jpg" alt="" style="border: none; height: 101px; width: 135px; " />
              </div>
              
    
    
              <div style="height: 108px; width: 135px;  height: 108px; left: 11px; position: absolute; top: 280px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_4 shadow_0">
    <a rel="shadowbox[];width=700;height=504;options={showMovieControls:false}" border="0" href="movie.mp4" title="Ark">
                <img src="Nikos_Kandarakis_files/i.jpg" alt="" style="border: none; height: 108px; width: 135px; " /> </a>
              </div>
              <div style="height: 0px; line-height: 0px; " class="spacer">*</div>
            </div>
            <div style="height: 100px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
              <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
            </div>
          </div>
        </div>
      </body>
    </html>
    
    
    
     
  3. unclejezzy macrumors newbie

    Joined:
    Apr 23, 2009
    #3
    using shadowbox in iweb...

    hi there,

    you need to put your shadowbox javascript DIRECTLY after the iweb javascript... like in this example:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="Generator" content="iWeb 2.0.4" />
    <meta name="iWeb-Build" content="local-build-20090418" />
    <meta name="viewport" content="width=900" />
    <title>My Shadowbox Page</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="My_Shadowbox_Page_files/My_Shadowbox_Page.css" />
    <!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='My_Shadowbox_Page_files/My_Shadowbox_PageIE.css'/><![endif]-->
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
    <script type="text/javascript" src="shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
    language: 'en',
    players: [''qt', 'wmp', 'flv']
    });
    </script>

    <script type="text/javascript" src="My_Shadowbox_Page_files/My_Shadowbox_Page.js"></script>


    </head>



    Hope that helps... If not, just reply here or drop me an email and I'll help you get it sorted..

    Jez.
    p.s I did a more detailed response to this exact problem here: http://iwebfaq.org/forum/viewtopic.php?f=36&t=274&p=947&hilit=shadowbox#p947
     
  4. rajbirdhalla macrumors newbie

    Joined:
    Mar 8, 2009
    #4
    yeah i am having the same problem actually i am preety noob at this at the moment, i just got my site together using i web and i want to install shadow box and see all my images using it :), i still gotta see how to install it, but it is possible to use shadow box or light box with iweb? right
     
  5. BreuerEditor macrumors regular

    BreuerEditor

    Joined:
    Jul 1, 2008
    Location:
    New Jersey
    #5
  6. Giovannino macrumors member

    Joined:
    Feb 21, 2008

Share This Page