Desperate help needed adding shadowbox.

SOLLERBOY · Nov 24, 2009

I'm in the middle of a college project where I need to be able to add images to a website and wither have them pop out larger or make a slideshow out of them. I am trying to use shadowbox to achieve this but every time I input the code the image disappears. I am using DW CS4. The code currently looks like:

HTML:

<!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">
<head >


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>products</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10pt;
	color: #000;
}
-->
</style></head>

<body>
<table width="100%" border="0" cellspacing="20" cellpadding="0">
  <caption> 
  </caption>
  <tr>
    <td width="48%"><h2>GreenBee XL</h2>
      <p><em><strong>Instant Freedom</strong></em><br />
        The first time you drive the GreenBee XL, prepare to be surprised. You're at freeway speed in seconds without even thinking about it. There is no clutch pedal to contend with and no race-car driving techniques to perform. Just the touch of your foot and you're off, without any of the sluggishness of an automatic.<br />
        How powerful is the acceleration? A quick story to illustrate. A favorite trick here at GreenBee Motors is to invite a passenger along and ask him to turn on the radio. At the precise moment we ask, we accelerate. Our passenger simply can't sit forward enough to reach the dials. But who needs music when you're experiencing such a symphony of motion.<br />
      Rest assured that this responsiveness works at all speeds, as noticeable when you're inching your way through parking lots as when flying along freeways.</p>
      <p><em><strong>100% Torque, 100% of the Time</strong></em><br />
        The GreenBee XL delivers full availability of performance every moment you are in the car, even while at a stoplight. Its peak torque begins at 0 rpm and stays powerful at 14,000 rpm.<br />
    This is the precise opposite of what you experience with a gasoline engine, which has very little torque at a low rpm and only reaches peak torque in a narrow rpm range. This forces you to make frequent gear changes to maintain optimal torque. With the GreenBee XL, you get great acceleration and the highest energy efficiency at the same time. All while requiring no special driving skills to enjoy it. This makes the GreenBee XL six times as efficient as the best sports cars while producing one-tenth of the pollution.</p></td>
    <td width="52%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="2007_Tesla_Roadster2.jpg" T width="250" height="188" /></td>
        <td><img src="2007_Tesla_Roadster3.jpg" width="250" height="188" alt="image2" /></td>
      </tr>
      <tr>
        <td><img src="2007_Tesla_Roadster6.jpg" width="250" height="188" alt="image3" /></td>
        <td><img src="2008-Tesla-Roadster-Gauges-1280x960.jpg" width="250" height="188" alt="image4" /></td>
      </tr>
    </table></td>
  </tr>
</table>
(c) 2009 GreenBee Motors, inc. All rights Reserved. 'GreenBee' and 'GreenBee XL' are trademarks of GreenBee Motors inc.
</body>
</html>

I am trying to use shadowbox with the images. Can anyone help?

SrWebDeveloper · Nov 24, 2009

Must have posted the wrong code. I see absolutely zero references to any Javascript library being loaded, no CSS selectors affecting images or rel attributes set (which is how shadowbox works). That's a simple HTML page that displays images and nothing else happens to them in any way.

The shadowbox stuff is here, follow instructions for installation. Unless you mean something else by the word "shadowbox".

-jim

SOLLERBOY · Nov 24, 2009

SrWebDeveloper said:
Must have posted the wrong code. I see absolutely zero references to any Javascript library being loaded, no CSS selectors affecting images or rel attributes set (which is how shadowbox works). That's a simple HTML page that displays images and nothing else happens to them in any way.

The shadowbox stuff is here, follow instructions for installation. Unless you mean something else by the word "shadowbox".

-jim

Sorry, This is the code without the shadowbox. I followed those steps but the shadowbox stuff doesn't come up. Where should I be posting the code? If someone could use that code and amend it to add the shadowbox stuff it would be a great help.

astroot · Nov 24, 2009

http://www.shadowbox-js.com/usage.html that page tells you everything. But I guess you want it all laid out for you?

Step 1: Download the shadowbox files.
Step 2: Upload those files to your server.
Step 3: Add this before </head> (but make sure your path is correct when you reference shadowbox.css and shadowbox.js):
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Step 4: On your images, use this code as an example: <a href="2007_Tesla_Roadster2.jpg" rel="shadowbox"><img src="2007_Tesla_Roadster2.jpg" T width="250" height="188" /></a>

That's it.. simple. Your code makes my head hurt, though.

angelwatt · Nov 24, 2009

Since it's for a class, are you allowed to use other people's work, or are you suppose to be coding this yourself?

For your code, it would be better to post the code after trying to set it up yourself. That will let us see where you're going wrong and help you learn something in the process. Also, when posting HTML code, please use the HTML block (the button with <> on it) to make it more readable.

SrWebDeveloper · Nov 24, 2009

Reminder - this is a COLLEGE level project, and of course the OP should be doing this on their own. We've provided plenty of highly detailed advice, and we'll assist in any minor fixes after the OP gives it the old "college try" on their own source. One learns by doing, ultimately.

SOLLERBOY · Nov 25, 2009

astroot said:
http://www.shadowbox-js.com/usage.html that page tells you everything. But I guess you want it all laid out for you?

Step 1: Download the shadowbox files.
Step 2: Upload those files to your server.
Step 3: Add this before </head> (but make sure your path is correct when you reference shadowbox.css and shadowbox.js):
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Step 4: On your images, use this code as an example: <a href="2007_Tesla_Roadster2.jpg" rel="shadowbox"><img src="2007_Tesla_Roadster2.jpg" T width="250" height="188" /></a>

That's it.. simple. Your code makes my head hurt, though.

step 2 may be the issue. I downloaded it and added it to my site folder but I am working without a server. Uploading it is the final task. Is that the issue??? If I add the code etc to the html will it work when uploaded to the server?

SOLLERBOY · Nov 25, 2009

[/QUOTE]

SrWebDeveloper said:
Reminder - this is a COLLEGE level project, and of course the OP should be doing this on their own. We've provided plenty of highly detailed advice, and we'll assist in any minor fixes after the OP gives it the old "college try" on their own source. One learns by doing, ultimately.

You are totally right. Here is my code so far. This now allows me to open the image the same size in a new window.

HTML:

<!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">
<head >
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>products</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10pt;
	color: #000;
}
-->
</style></head>

<body>
<table width="100%" border="0" cellspacing="20" cellpadding="0">
  <caption> 
  </caption>
  <tr>
    <td width="48%"><h2>GreenBee XL</h2>
      <p><em><strong>Instant Freedom</strong></em><br />
        The first time you drive the GreenBee XL, prepare to be surprised. You're at freeway speed in seconds without even thinking about it. There is no clutch pedal to contend with and no race-car driving techniques to perform. Just the touch of your foot and you're off, without any of the sluggishness of an automatic.<br />
        How powerful is the acceleration? A quick story to illustrate. A favorite trick here at GreenBee Motors is to invite a passenger along and ask him to turn on the radio. At the precise moment we ask, we accelerate. Our passenger simply can't sit forward enough to reach the dials. But who needs music when you're experiencing such a symphony of motion.<br />
      Rest assured that this responsiveness works at all speeds, as noticeable when you're inching your way through parking lots as when flying along freeways.</p>
      <p><em><strong>100% Torque, 100% of the Time</strong></em><br />
        The GreenBee XL delivers full availability of performance every moment you are in the car, even while at a stoplight. Its peak torque begins at 0 rpm and stays powerful at 14,000 rpm.<br />
    This is the precise opposite of what you experience with a gasoline engine, which has very little torque at a low rpm and only reaches peak torque in a narrow rpm range. This forces you to make frequent gear changes to maintain optimal torque. With the GreenBee XL, you get great acceleration and the highest energy efficiency at the same time. All while requiring no special driving skills to enjoy it. This makes the GreenBee XL six times as efficient as the best sports cars while producing one-tenth of the pollution.</p></td>
    <td width="52%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="2007_Tesla_Roadster2.jpg" rel="shadowbox"><img src="2007_Tesla_Roadster2.jpg" T width="250" height="188" /></a></td>
        <td><img src="2007_Tesla_Roadster3.jpg" width="250" height="188" alt="image2" /></td>
      </tr>
      <tr>
        <td><img src="2007_Tesla_Roadster6.jpg" width="250" height="188" alt="image3" /></td>
        <td><img src="2008-Tesla-Roadster-Gauges-1280x960.jpg" width="250" height="188" alt="image4" /></td>
      </tr>
    </table></td>
  </tr>
</table>
(c) 2009 GreenBee Motors, inc. All rights Reserved. 'GreenBee' and 'GreenBee XL' are trademarks of GreenBee Motors inc.
</body>
</html>

I preferably want it to open on the same page, a little bit bigger and floating with a greyed out background. Is there any way to do this? This is my first time building a website out of text edit so I'm getting confused by the jargon and code on the sahadowbox website. Any help is greatly appreciated. I believe this may be rectified by a simple attribute?

SrWebDeveloper · Nov 25, 2009

If you're working without a server and using your own computer, simply save the shadowbox files you downloaded from the site and place into the same directory as where that HTML file you posted here lives, simple as that.

Read the complete documentation and most importantly see the examples on the Shadowbox web site, in addition to the advice given by astroot which if this had been a test, would be your crib sheet! Give it a try, save it, run it in your browser, test it. Come back here and re-post your code if you have troubles.

This is how one learns.

-jim

astroot · Nov 25, 2009

Actually, uploading to a server really won't matter at this point. You can work on it locally and it should work.

- Fix <head > so it's <head>
- <img src="2007_Tesla_Roadster2.jpg" T width="250" height="188" /> get rid of the T before width
- move the <meta http-equiv...> line right after <head> since that should be the first thing in the header.
- I didn't notice this earlier, but the shadowbox.css line needs a self-closing / so it should read <link rel="stylesheet" type="text/css" href="shadowbox.css" />

You really should remove all table elements and replace with headers and paragraphs. You have GreenBee XL in an h2, but that could be an h1, and then Instant Feedback could be an h2, then the text below it should be in <p>. The 100% Torque could be an h2 as well.

Also, replace the apostrophes (you're) to rsquo; so it's (you’re) since you're using UTF-8 charset. Also your copyright thing (c) could be made to ©

Just make sure the path to your shadowbox.css file and shadowbox.js files are correct, add <a href="image" rel="shadowbox"> to your other images.

One thing you might try if you want to group these images is adding something like [Tesla] to the rel="shadowbox" so it reads rel="shadowbox[Tesla]">

Search

Search

Desperate help needed adding shadowbox.

SOLLERBOY

macrumors 6502a

SrWebDeveloper

macrumors 68000

SOLLERBOY

macrumors 6502a

astroot

macrumors regular

angelwatt

Moderator emeritus

SrWebDeveloper

macrumors 68000

SOLLERBOY

macrumors 6502a

SOLLERBOY

macrumors 6502a

SrWebDeveloper

macrumors 68000

astroot

macrumors regular

Our Staff