Hello. I'm new to Lightbox and not so good of an expert to Javascript. I'm having trouble w/ the coding. I think its the problem with Javascript but I can't figure out whats the problem. When clicking on the thumb, it opens a new page. This is just a sample image size before I make better thumbnails. Here is the link:

http://creativepink.net/packaging.php

Thanks!

Is there a reason why no one is answering???! I'm getting a little irritated and I don't have time to wait! This is my portfolio site that I'm trying to get up and running! Thanks.

Check your code.

One little typing error, and everything will blow up.

In this case, the suppression of the link didn't work, which is key for images on the same page.

But the typo could sit anywhere.

There's always a typo! But I can't find it, been looking for it all day, ugh!

Do you have a book or an online tutorial that shows you how to do it?

I'm starting out in Javascript, too, and when those books or tutorials call something easy it usually means it's easy for a programmer.

If you have never done any Javascript at all, you need to learn what can be a typo.

If you write [ instead of ( or {, the whole program won't work.

Same goes if you leave out an ' or if you write a , instead of a ;.

I'm currently putting my first slide show/gallery in Javascript together, but I have already worked my way through 250 pages of a book.

I took Javascript 8 years ago for 6 weeks and I had a hard time learning that fast. I know it has to have those special characters but I'm still new at it. I'm not wanting to be a web developer, just a web designer. I'm just trying to show the best way to present my design work and show to employers.

The lightbox tutorial and download is from this site:

http://www.huddletogether.com/projects/lightbox2/

I dont know about you but this is probably not the best way to tell someone how to set it up, although it would be easy for web developers, obviously.

250 pages is a lot!! Good luck w/ that!!

Thanks for the little reminders and I'll have to look at these when I have no work at my job lol I need a break from looking my coding now! lol

I can tell you, those 250 pages were from a "Missing Manual" Javascript book, that is so miserably written it's not helping a lot.

I am simply trying to get a web gallery as it written on my web page.

Doesn't work.

The problem has to do with the relationship of Javascript code and the CSS file connected to the html document in which the javascript code is embedded.

Missing manual writer Farland didn't even mention how Javascript and CSS has to work together.

Therefore, my images also open on a separate page.

But that's usual when you start this kind of thing. First you just fix and fix and it still doesn't work.

So, I'm currently examining the relation between the variables mentioned in the Javascript and the same variables mentioned in the CSS.

Too good, that slightly clueless missing manual writer McFarland spent endless pages on regular expressions (a kind of analytical, structural description of different kinds of file names), but forgets to bind CSS and Javascript together. After all, these two are very much connected, and JQuery is Javascript that's very CSS oriented.

But that's often the case with bad books. Endless pages of blablabla, and the key moments are brushed over, because these key moments are difficult to describe.

So, you may feel alone, but you're not alone.

Got it to work.

I erased two lines of code of Farlands script.

Then I had an error of the special kind: the js gallery was in the wrong place.

So, this might be a problem you might have to.

Check the path to the jQuery library.

PS: not that it took me all those hours. I dropped it at midnight, watched two episodes of "Lost", and then returned and had it figured out within half an hour.

so you're saying that i need all of the lightbox stuff in one folder and also put the gallery html/php/my style css in that same folder??

You need the plug-in, the html and css for the page, and you need the jQuery library in your plug-in folder, and a link from your header to that library. Otherwise, lightbox couldn't function.

i'll have to look since its my first time running my own site and not being hosted by someone else.

but whats odd is that the tutorial i got it from, had their html of the tutorial in the zip file and it works. thats why i was asking about having the same organization of the folders. i'll check w/ the plugin and jquery. thanks!

One of the things I have noticed you have
rel='lightbox'

of your link. I think this should be rel="lightbox". try that please.

Originally Posted by webcosmo

One of the things I have noticed you have
rel='lightbox'

of your link. I think this should be rel="lightbox". try that please.

i actually tried that last nite and didn't work. i just tried again and still not working. is that the only place to change the quotes?

The error is in your <head></head>
the code

 
<script language="JavaScript">


<script type="text/javascript" src="http://creativepink.net/js/prototype.js"></script>
<script type="text/javascript" src="http://creativepink.net/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://creativepink.net/js/lightbox.js"></script>




</script>

is wrong.

<script type="text/javascript" src="http://creativepink.net/js/prototype.js"></script>
<script type="text/javascript" src="http://creativepink.net/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://creativepink.net/js/lightbox.js"></script>

should be out of <script type="text/javascript"></script>.

I don't know the details of your code. I did a quick test with the code below, and it worked.

<html>
<head>
    <!--lightbox2 script load start-->
    <script type="text/javascript" src="lightbox2/js/prototype.js"></script>
    <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
    <link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
    <!--lightbox 2 script load end-->
</head>
<body>

<h2>lightbox test</h2>

<a href="http://www.creativepink.net/images/bag.jpg" rel="lightbox" title="my caption"><img src="http://www.creativepink.net/images/bag-thumb.jpg"></a>

</body>
</html>

I just noticed this on your head tag. You are enclosing your calls to some external javascript files within <javascript> tags. This is causing the page fail to load those lightbox scripts. thats why its not working.

<script language="JavaScript">
<script type="text/javascript" src="http://creativepink.net/js/prototype.js"></script>
<script type="text/javascript" src="http://creativepink.net/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://creativepink.net/js/lightbox.js"></script>
</script>

Take off the parts on bold above.

OMG!! Its working!!!!!! lol thank you guys so much!!! i always thought every javascript had to start w/ those tags!!!! i had to stop and think how in the heck those got in there and i realized they were from dreamweaver. strange. i'm gonna have to learn what script needs an opening and closing tag! lol

thanks again!!!