Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Shadowbox in Iweb

E

enka

macrumors newbie
Original poster
May 9, 2008
9
0
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
 
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>
 
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
 
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back