What am I doing wrong? Can't seem to figure out a simple JavaScript Gallery.

[fuzzybabybunny]

I've been trying to figure this out for hours and hours...

http://www.victorlinphoto.com/testgallery.html
http://www.victorlinphoto.com/...state/testgallery.html

Both are the exact same gallery linking to the exact same JS script, CSS, and images. They're just located in different directories. The problem is that the first one shows Prev, Next, and Close in the image windows while the second one does not, and I absolutely can't figure it out.

http://www.victorlinphoto.com/scripts/jquery.js
http://www.victorlinphoto.com/...jquery.lightbox-0.5.js
http://www.victorlinphoto.com/...query.lightbox-0.5.css

jquery pack
http://www.victorlinphoto.com/...y.lightbox-0.5.pack.js

I'm trying to get the gallery working for this page:

http://www.victorlinphoto.com/realestate/portfolio.php

EDIT:

Ok, I think my issue has to do with the jquery and jquery pack files. Too bad I don't know how they work.

The two test galleries are perfectly happy working with just the first three js and css files, but the real estate portfolio page doesn't work at all unless the jquery pack script is being used (jquery.lightbox-0.5.pack.js) - it can even work without the non-pack jquery.js script (.jquery.lightbox-0.5.js). What's so special about this pack file? Why does my portfolio page HAVE to use it? Can't it just use the regular .jquery.lightbox-0.5.js file that the test galleries are using?

 

[Woosta]

Most likely the fact that one is in a subdirectory and is failing to retrieve images:

url(images/lightbox-blank.gif)

Try root relative links in the css ( /images/lightbox-blank.gif ).

 

[fuzzybabybunny]

Originally posted by: Woosta
Most likely the fact that one is in a subdirectory and is failing to retrieve images:

url(images/lightbox-blank.gif)

Try root relative links in the css ( /images/lightbox-blank.gif ).

Ok, here's what I did:

In http://www.victorlinphoto.com/...jquery.lightbox-0.5.js I changed:

imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)

to

imageLoading: '/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)

and now BOTH http://www.victorlinphoto.com/testgallery.html and
http://www.victorlinphoto.com/...state/testgallery.html work.

BUT http://www.victorlinphoto.com/realestate/portfolio.php still isn't working 🙁

 

[Woosta]

<script src="../scripts/jquery.lightbox-0.5.js" language="javascript" type="text/javascript"></script>
<script src="../scripts/jquery.js" language="javascript" type="text/javascript"></script>

You need to include jQuery before any plugins, as they rely on a global $ method ( the jQuery constructor ).

 

[fuzzybabybunny]

Originally posted by: Woosta

<script src="../scripts/jquery.lightbox-0.5.js" language="javascript" type="text/javascript"></script>
<script src="../scripts/jquery.js" language="javascript" type="text/javascript"></script>

You need to include jQuery before any plugins, as they rely on a global $ method ( the jQuery constructor ).

Huh?

So in my header I should write:

<script src="../scripts/jquery.js" language="javascript" type="text/javascript"></script>
<script src="../scripts/jquery.lightbox-0.5.js" language="javascript" type="text/javascript"></script>


instead of

<script src="../scripts/jquery.lightbox-0.5.js" language="javascript" type="text/javascript"></script>
<script src="../scripts/jquery.js" language="javascript" type="text/javascript"></script>

because the order matters?

I changed the order in portfolio.php and it didn't change a thing.

 

[Ken g6]

http://www.victorlinphoto.com/realestate/portfolio.php works for me. 🙂 I'm using Firefox with Noscript disabling Google-analytics, and CookieSafe disabling cookies.

Edit: Did you clear out your cache of the page? You can do that for one page only with Ctrl-F5.

 

[fuzzybabybunny]

Originally posted by: Ken g6
http://www.victorlinphoto.com/realestate/portfolio.php works for me. 🙂 I'm using Firefox with Noscript disabling Google-analytics, and CookieSafe disabling cookies.

Edit: Did you clear out your cache of the page? You can do that for one page only with Ctrl-F5.

It's working because I finally figure it out, sorta. I'm actually not too sure what I did - all I know is that it works now.

 

[Woosta]

Well it looks like you followed my instructions and it's working 😉 gj.