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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help me put shadowbox into my site please...

    I have this simple site to show off my music and art. I want to use shadowbox to display vimeo videos but simply cannot work out how to integrate it into dreamweaver.

    Can someone please put it in for me on the music page for the 4 small images?

    site is in a zip file here:

    www.kitwebster.com.au/public_html.zip

    Otherwise if it can be put into laments terms I hope to work it out...

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Hi kittt,

    As JC recommended, please either post your code (in [CODE][/CODE] tags) or post a link to your page (preferred). Making us download a zip file just to view your code is very tiresome and it makes it more difficult for us to use our browser-based debugging tools. Help us help you.

    but simply cannot work out how to integrate it into dreamweaver
    I don't know if you're coding by hand by chances are that's what you're going to have to do in order to integrate Shadowbox into your page. Dreamweaver is a tool that helps you create pages which use the Shadowbox script, but you don't put Shadowbox "into" Dreamweaver.

    Again, post a link to your page or your full code (in [CODE][/CODE] tags) and we'll see if we can put it in layman's terms. We're good at that.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <title>WebDesignHelper.co.uk - Page Template 81</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="FW MX DW MX HTML">
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <link href="ssheet1.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#666666" topmargin="50" marginheight="50">
    <div align="center">
      <table border="0" cellpadding="0" cellspacing="0" width="701">
    
        <tr> 
          <!-- Shim row, height 1. -->
          <td width="700"><img src="images/spacer.gif" width="700" height="1" border="0" alt=""></td>
          <td width="10"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
        </tr>
        <tr> 
          <!-- row 1 -->
          <td><img src="images/about_r1_c1.gif" alt="" name="about_r1_c1" width="700" height="36" border="0" usemap="#about_r1_c1Map"></td>
          <td><img src="images/spacer.gif" width="1" height="36" border="0" alt=""></td>
        </tr>
        <tr> 
          <!-- row 2 -->
          <td><img name="about_r2_c1" src="images/about_r2_c1.gif" width="700" height="15" border="0" alt=""></td>
          <td><img src="images/spacer.gif" width="1" height="15" border="0" alt=""></td>
        </tr>
        <tr> 
          <!-- row 3 -->
          <td><img name="about_r3_c1" src="images/about_r3_c1.gif" width="700" height="12" border="0" alt=""></td>
          <td><img src="images/spacer.gif" width="1" height="12" border="0" alt=""></td>
        </tr>
        <tr> 
          <!-- row 4 -->
          <td height="205" align="left" valign="top" background="images/about_r3_c1.gif"><blockquote class="maintxt">
            <table width="640" border="0" align="left">
              <tr>
                <td width="272"><span style="visibility:visible;">
                  <embed src="http://assets.myflashfetish.com/swf/mp3/mp3player.swf" quality="high" wmode="transparent" flashvars="myid=3278667&path=2007/07/10&mycolor=919191&mycolor2=B8B8B8&mycolor3=&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" width="270" height="298" name="myflashfetish" align="middle"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/>              
                </span></td>
                <td width="286"><table width="41%" border="0">
                  <tr>
                    <td width="42%"><div align="center"><img src="content/hope_of_ruins.jpg" width="138" height="104"></div></td>
                    <td width="58%"><div align="center"><img src="content/germart.jpg" width="138" height="104"></div></td>
                  </tr>
                  <tr>
                    <td><div align="center"><img src="content/germ.jpg" width="138" height="104"></div></td>
                    <td><div align="center"><img src="content/figment.jpg" width="138" height="104"></div></td>
                  </tr>
                </table></td>
              </tr>
            </table>
            <p>
            
            <p><span style="visibility:visible;"><br>
            </span></p>
            <p><br>
            </p>
          </blockquote></td>
          <td><img src="images/spacer.gif" width="1" height="205" border="0" alt=""></td>
        </tr>
        <tr> 
          <!-- row 5 -->
          <td><img name="about_r5_c1" src="images/about_r5_c1.gif" width="700" height="28" border="0" alt=""></td>
          <td><img src="images/spacer.gif" width="1" height="28" border="0" alt=""></td>
        </tr>
      </table>
    </div>
    <map name="about_r1_c1Map">
      <area shape="rect" coords="514,15,550,32" href="page_template_example81.html" target="_self" alt="MAIN">
      <area shape="rect" coords="556,16,587,31" href="about.html" target="_self">
      <area shape="rect" coords="593,15,620,32" href="profile.htm" target="_self">
      <area shape="rect" coords="625,16,681,33" href="portfolio.htm" target="_self">
    </map>
    <map name="Map">
      <area shape="rect" coords="10,8,80,43" href="#" alt="LINK TO YOUR WEB PORTFOLIO">
    </map>
    <map name="Map2">
      <area shape="rect" coords="9,10,84,45" href="#" alt="LINK TO YOUR PRINT PORTFOLIO">
    </map>
    <map name="Map3">
      <area shape="rect" coords="3,11,92,45" href="#" alt="LINK TO YOUR MEDIA PORTFOLIO">
    </map>
    <!--Do not remove this comment - site by jerryc cotterjerry@eircom.net - email me if you need help with this template - if i have time i'll help you out - the image was downloaded from www.deviantart.com and may be used for non-commercial projects - i take no responsibility if you use the image for any other purposes. -->
    <style>
    BODY {SCROLLBAR-FACE-COLOR: #95A193; SCROLLBAR-HIGHLIGHT-COLOR: #95A193; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:  #FFFFFF; SCROLLBAR-TRACK-COLOR: #666666; SCROLLBAR-DARKSHADOW-COLOR: #666666; }
    </style>
    </body>
    </html>
    Last edited by kittt; 02-27-2009 at 05:17 PM.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please bear in mind I didnt write this. I just took this code and modified in the design panel...
    Last edited by kittt; 02-27-2009 at 05:06 PM.

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Hi kittt,

    Okay. Frankly, that page is a coding disaster. I'm relieved you didn't code it. It has a slew of issues (no DOCTYPE; invalid, non-semantic markup using tables for layout) and is actually pretty state-of-the-art for 1997. Rather than using a tool like Dreamweaver which lets you get by in design view without learning the nuts and bolts of how your page actually works, consider learning how to build a page using semantic, modern XHTML and CSS.

    To proceed with adding a flashy element like Shadowbox is kind of like putting 20" chrome rims and a spoiler on a car whose engine is falling apart. First fix the engine (code your page well), then add the "bling" (the more sophisticated effects). Otherwise it's just putting lipstick on a pig.

    That said, the Usage link on the Shadowbox site has a great step-by-step walk-through on how to integrate the script. It looks like it's not much more complex than downloading the required files, adding the links to the head of your HTML file, e.g.:

    Code:
    <script type="text/javascript" src="shadowbox-base.js"></script>
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    
    Shadowbox.loadSkin('classic', 'my/skin/dir'); // use the "classic" skin
    Shadowbox.loadLanguage('en', 'my/lang/dir'); // use the English language
    Shadowbox.loadPlayer(['img', 'qt'], 'my/player/dir'); // use img and qt players
    
    window.onload = Shadowbox.init;
    
    </script>
    and calling the script in the body of your page:

    Code:
    <a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>
    As far as obtaining links to Vimeo videos to put in the link tags, their site should have some documentation on that as well.
    matt | design | blog


  •  

    Posting Permissions

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