HTML - Lightbox With Flickr Albums With Added Facebook Like Buttons

My images look very clear in Google Chrome and very pixelated in Internet Explorer.
Why?

Can anyone help me figure our why the side menu is missing when I added HTML code. If I take the code away, the side menus appear. Thanks!
Here is the page http://www.tedskitchen.com/Side/Cate...r/Lo_Mein.html

Code:

<div id="container">
<div id="indexHtml1" style="position:absolute;left:430px;top:200px;width:700px;z-index:80">
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   <font face="Arial" font size="1" color="#8B000">
   <h1 property="v:name">Chicken Lo Mein</h1></font><br><br><br>
<img src="/images/Lo_Mein2.jpg" style="position:absolute;top:80%;left:1%;margin:-83px 0px 0px -200px;" rel="v:photo" width="130" height="110" right="300"color="#8B000"/>  


<font face="Arial" font size="1px">
<div style="position:absolute;left:1px;top:38px;width:700px;z-index:60;>

<span property="v:summary">Boiled Chinese noodles, in a tangy sauce,</span><br/>
   <span property="v:summary">stri fried with Chinese vegetable.</span><br/><br/><br/>
<br/>
<br/>
<font face="Arial" font size="3px">
<div style="position:absolute;right:195px;width:700px;top:90;z-index:60>
By: <span property="v:author">Photo by: Suat Eman</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <span rel="v:Review">
      <span typeof="v:Review-aggregate">
         <span rel="v:rating">
            <span typeof="v:Rating">
               <span property="v:average">4.0</span> stars based on 
               <span property="v:count">35</span> reviews
            </span>
         </span>
      </span>
   </span> 
<br/>
<br/>
<font face="Arial" font size="2px">
<div right:200px;width:700px;z-index:60;>
 Prep time: <span property="v:prepTime" content="PT30M">30 min</span>&nbsp;&nbsp;
   Cook time: <span property="v:cookTime" content="PT1H">30 min</span>&nbsp;&nbsp;
   Total time: <span property="v:totalTime" content="PT1H30M">30 min</span>&nbsp;&nbsp;
   Servings: <span property="v:yield">6</span><br/> 

<br/>
<br/>
<br/>

<font face="Arial" font size="3px">
    <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:amount">1/2 lb</span>:   
         <span property="v:name">Chinese noodles</span>
<br/> 
         <span property="v:amount">1/2 lb</span>:   
         <span property="v:name">Cooked chicken (chunked), shrimp or pork</span>  
<br/>   
         <span property="v:amount">1 bunch</span>:   
         <span property="v:name">fresh green scallions</span>     
<br/>   
         <span property="v:amount">1 knob</span>:   
         <span property="v:name"> fresh ginger</span>
<br/> 
         <span property="v:amount">3-4</span>:   
         <span property="v:name">cloves garlic</span>  
<br/>   
         <span property="v:amount">1 lb</span>:   
         <span property="v:name">bean sprouts</span>     
<br/>   
         <span property="v:amount">1/2 cup</span>:   
         <span property="v:name">pea pods</span>
<br/> 
         <span property="v:amount">1/2 cup</span>:   
         <span property="v:name">shredded Chinese cabbage</span>  
<br/>   
         <span property="v:amount">2 1/2 tablespoons</span>:   
         <span property="v:name">soy sauce</span>     
<br/>   
         <span property="v:amount">2 1/2 tablespoons</span>:   
         <span property="v:name">hosin sauce</span>
<br/> 
         <span property="v:amount">1 teaspoon</span>:   
         <span property="v:name">cornstarch</span>  
<br/>   
         <span property="v:amount">1/4 tablespoons</span>:   
         <span property="v:name">sea salt</span>     
<br/>   
         <span property="v:amount">3 tablespoons</span>:   
         <span property="v:name">peanut oil</span>
<br/>   
         <span property="v:amount">1 tablespoon</span>:   
         <span property="v:name">dry sherry</span>
     </span>
  
<br/> 
<br/> 
<br/>
<br/>
   <div property="v:instructions">
   1. Boil noodles according to package directions; rinse briefly under cold<br/>
        water and drain set aside.<br/> 
   2.Slice scallions lengthwise then into 1 inch longs pieces.<br/> 
       Wash and peel ginger, then grate using a fine grater.<br/> 
       Peel and finely mince garlic. Wash bean sprouts well in cold running water.<br/>  
   3.In a small bowl, combine soy and oyster sauce, salt and cornstarch.<br/>  
   4.Heat peanut oil in a large wok or skillet until sizzling hot.<br/>
       Add pork, onion and ginger, stirring constantly for 1 minute.<br/> 
       Add garlic, and sherry; stir in bean sprouts<br/>
      (and other vegetables and shrimp, if using) and soy sauce mixture.<br/>  
   5.Quickly stir in noodles and stir fry for 3 minutes<br/> 

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

i followed this help post http://www.htmlforums.com/html-xhtml...ie-108215.html, and i got to a certain point but now im stuck.

I wanted to remove the big space that you see under the header.

the link to my blog is http://kumarradio.tumblr.com.

and the coding of the blog is posted as an attachment.

heres the new line i added for a faster reference.

<body>
<h1 align=center><img src="http://img69.imageshack.us/img69/6729/newn.gif" id="" alt=""/></a>
</h1>

what should i change so that the space is removed ?

I am trying to edit a website. The lightbox images on this page (after popping up) have the "X" and "Close" with the popup:

http://www.ryekids.com/patients/treatments/care.php

But for the life of me, I cannot get that "X" & "Close" on the office staff lightbox images on this other page:

http://www.ryekids.com/office/staff.php

Any pointers? Thanks in advance for your help and advice!

Hi, I have a load of images I want to appear in a series of lightboxes that look like the attached file.

Ignore the blur latin. I just want the red text and to be able to click prev<->next to rotate the images.

What do you think the best way to achieve this would be. I have looked at a few lightbox scripts but non will let be format the text the way I need.

I am not to worried about the prev/next so long as they are there and the red text does not change so was thinking a HTML template in the lightbox that has the smarts to switch the images when prev/next is clicked.

Any ideas welcomed.



Cheers,
Kevin.

I am trying to modify the behaviour of an existing html page to use the Lightbox utility rather than opening a new browser window. The trouble is, no matter where in the source code I place the the Lightbox references ie:

<link rel="stylesheet" href="lightbox.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

the function does not work. It also stops the behaviour of the sliding tabs.

Would some mind taking a look at the attached html and advising me where Im going wrong.
p.s. I have tried the lightbox utility in a new page thus:

<html>

<link rel="stylesheet" href="lightbox.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>
<body>
<a href="pulrosetest.jpg" rel="lightbox"> <img src="pulrose.jpg">
</body>
</html>

and it works fine.

Thanks, Steve

Hi,
I want to develop a webpage where I can display the images using LightBox.My question is how to use Lighbox plugin to make that happen.I have not used any tool(Dreamweaver) to design the webpage.I wrote HTML in the notepad.

Any help is greatly appriciated.

Thanks in advance.

Hello everybody.

I was wondering if you could help.

Firstly I'm a noob to css/html.

I've come stuck. I've created a site in illustrator imported into dreamweaver (I know this isn't the right way but it's easier for me at the moment, sort of) and added lightbox 2 to it. It's been smooth sailing and lightbox works great.

This is the code I see: (note I've just put the code for the image I want to use)

<div align="center"><a href="images/locogsequins copy.jpg"rel="lightbox"><img src="images/index_03.jpg" width="262" height="188"


Messy I know , but it's working for me so far.

However, on top of having the lightbox effect I would like to add a rollover effect. So when a viewer lands on the page they will see everything in black and white, when they roll over an image it turns to colour.

The code I've found is

<div><img src="images/locogsequins_bw.jpg"
onmouseover="this.src='images/locogsequins copy.jpg'"
onmouseout="this.src='images/locogsequins_bw.jpg'">

which works. (I've tested via preview in DW)

My question is where do I insert this into the earlier code so they work together?

I'd very grateful for any help.

Thanks x

I am trying to figure out what code goes where (and how much of it, etc!), to add "lightboxes" to my images on my site.

The desired "lightbox" effect can be seen when you click the images here- http://shop.vintageacademe.com/produ...r-satin-jacket

And I want to add it to my site's images rather than having the viewer directed to a new page, example of my page seen here- http://decadence-fashion.co.uk/item3286.html

I have some html knowledge, as my website is under construction, and really am hoping to add the lightbox system to all the pages! Please help!
Thank You

Does anyone know why lightbox images would be displaying in reverse order? The numbers are correct but it pops up on the last one and I have to hit previous to get to the front.

Hi

I'm not sure if I am posting this in the correct forums, so I'm sorry.

I'm trying to setup Lightbox v2.0 fro www.huddletogether.com/projects/lightbox2 on my site however for some reason it doesn't work, I think I'm doing something wrong, so could please someone give me a detailed tutorial on how to set it up.

Thank you

Hi


my lightbox works partially on my website. i've loaded the lightbox on this image

<a rel="lightbox" href="http://visualadvice.com/wp-content/uploads/2008/10/happiness_101.jpg">

and simply activated the plug in, in my manager. I didn't add the JS and CSS links at the top of my header in my word press template.

on this link it works fine!
http://visualadvice.com/?p=271

But on my main page it doesnt work
http://visualadvice.com/

so i looked up the code and i saw that the JS and the CSS file links were missing from the main page. so i went on my theme editor and put the link in the header but then where it used to work properly.

http://visualadvice.com/?p=271
it had a huge black square at the top. so i looked up the code and the JS and CSS file links were duplicated.

and where it didnt work. worked fine
http://visualadvice.com/

what i want to know is how to delete the links that are automatically set up, so i can just put one set of links in my header.

ive looked up at the plugin editor,

would it have to do anything with this code??


function lightbox_wp_head() {
global $lightboxpluginpath, $post;
$lightboxcolor1 = get_option("lightbox_color1");
$lightboxlb_opacity = get_option("lightbox_lb_opacity");
$lightboxlb_resize = get_option("lightbox_lb_resize");
$lightboxoff = false;
$lightboxoffmeta = get_post_meta($post->ID,'lightboxoff',true);
if ($lightboxoffmeta == "false") {
echo '<script type="text/javascript"> lb_path = "' . $lightboxpluginpath . 'lightbox/"; lb_opacity= "' . $lightboxlb_opacity . '"; lb_resize= "' . $lightboxlb_resize . '";</script>'."\n";
echo '<link rel="stylesheet" type="text/css" media="screen" href="' . $lightboxpluginpath . 'lightbox/css/lightbox.css" />'."\n";
echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/prototype.js" ></script>'."\n";
echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/scriptaculous.js?load=effects,builder"></script>'."\n";
echo '<script type="text/javascript" src="' . $lightboxpluginpath . 'lightbox/js/lightbox.js"></script>'."\n";
echo '<style type="text/css">#overlay {background-color:' . $lightboxcolor1 . ';}</style>'."\n";
}
}

I posted on their support forums but help seems to be thin around there, so I thought I'd give here a try....anybody have any ideas?

thanks
julien

I'm a rookie so don't be too rough on the mistakes I made in the webby im about to post, but here's my prob

http://mythgaming.gethost.nl

I got 1 Iframe in the main page, which loads every link I click from the menu

Now at the link MEMBERS, if I click it you get a Click here url, this contains a javascript that reopens a menu with a close button and normally an image in it

My idea was to open a certain page in that "javascript application" but the problem is when I click "click here" it does open, but in the iframe itself, setting a target _blank doesn't work either as it'll stay in the Iframe

So first problem would be, how can I get that javascript to be opened OUTSIDE the frame.. and with that how could I load a page in it

--
<link rel="stylesheet" type="text/css" href="style.css" /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<title>Myth Academy | Managing system</title>

<script type="text/javascript"></script>

<style type="text/css" media="all">
@import url(style/style.css);
</style>

</head>

<body>


<tr>
<td style='width:16px; height:16px;'>&nbsp;</td>

<td width="50">Result:</td>
<td colspan="3"><a href='http://mythgaming.gethost.nl/members/furian.php' title='Layout' rel='lightbox' target="_blank">Click here</a></td>
</tr>
</table>
<hr size='1' style='color:#000000;' /></div>
<div id="footer">
<p>Any questions? Mail ryze@dock-7.com </p>
</div>
</div>
</body>
</html>

--
As you can see the url above "furian.php" is supposed to load inside the window that pops up if you click Click here.. that's not working, and also the window doesn't pop out from the Iframe but stays in there

The actual code is taken from the http://mythgaming.gethost.nl/training/ page.. as you open a Photo there you'll see the normal "image popup" window


I hope any of you have a suggestion how to fix this, and yea correct me on dumb mistakes i know I made many

Can anybody point me in the right direction of finding a page that has some info on lightbox manipulation??
Or if by chance you know how to change the top margin value? As when the lightbox loads, it's way to far from the top of the page, like 200pixels as the default (as I haven't found how/where to change this).

THANK YOU!!

Hi!
Hopefully this has found the right section of the forum.

This question has to do with a recent change of web hosting and the sudden stopping of my "lightbox 2". When clicked, the link just stays selected, without showing the image or activating the lightbox.

After uploading my site to the new host the lightbox has stopped working. Nothing (root folder, image location, lightbox javascript) has changed from my previous site. With dreamweaver cs3 lightbox is previewing correctly in firefox, but online something is wrong.

Any ideas of what this might be? A previous suggestion was to make sure the links were going to the right place, and as far as I can tell they are. As the website was already working fine on another host server.

Could it be that the (server) settings somewhere aren't enabling the javascript?
Any suggestions on what may be causing this are appreciated.

Thanks.