Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Problem with Lightbox

Featured Replies

Hi Guys and Girls,

 

I am working on this page:

 

http://www.miga-designs.co.uk/ssgroundwork.../portfolio.html

 

And am having problems with a) the background picture isnt showing up but is there if you type the file path in the address bar.

http://www.miga-designs.co.uk/ssgroundwork...nds/testbg2.jpg

 

That is a minor issue, further down the page under the Water Farm picture where I have attempted to implement Lightbox here but I it doesnt seem to be working, everything seems in the right place ie, js files etc.

http://www.miga-designs.co.uk/ssgroundwork...III/javascript/

 

Anyone able to help?

Lightbox js usually requires something like

rel="lightbox"

to be added to your image tags - take another look at the instructions for your specific lightbox, and you may find the answer...

 

The background image should look like this in your CSS:

background-image: url(images/backgrounds/testbg2.jpg);

 

See if that works. (take out the ' )

Hi

 

Your images dont appear to be there.

 

Index of /images

  Name					Last modified	   Size  Description

[DIR] Parent Directory		05-Jul-2008 11:22	  -  
[DIR] backgrounds/			01-Jul-2008 17:02	  -  
[IMG] big.jpg				 01-Jul-2008 17:00	64k  
[DIR] logos/				  01-Jul-2008 17:01	  -  
[IMG] miga_shot.jpg		   01-Jul-2008 17:00   100k  
[IMG] placeholder.jpg		 01-Jul-2008 17:00	 9k  
[IMG] sands_shot.jpg		  01-Jul-2008 17:00	16k

 

Index of /images/backgrounds

  Name					Last modified	   Size  Description

[DIR] Parent Directory		02-Jul-2008 09:05	  -  
[IMG] big.jpg				 01-Jul-2008 17:02	64k  
[IMG] migabg.jpg			  01-Jul-2008 17:01	12k  
[IMG] migabground.jpg		 01-Jul-2008 17:02	21k  
[IMG] newbg.jpg			   01-Jul-2008 17:02	73k

 

Cheers

 

Pat

 

EDIT:IGNORE ALL THAT I WENT TO THE WRONG DIRECTORY :huh:

In your css try this as your url

background-image: url(ssgroundworks.co.uk_Part III/images/backgrounds/testbg2.jpg);

 

That should work, also check the url to your lightbox image

<a href="ssgroundworks.co.uk_Part III/images/water/water1.jpg" rel="lightbox" title="Water 1"><img src="ssgroundworks.co.uk_Part III/images/water/water1tb.jpg" alt="water" title="water" border="0" /></a>

 

 

Pat

Firebug is saying that Builder is not defined in lightbox.js line 102.

Either download the builder.js file from scriptaculous and append that onto this line:

http://www.miga-designs.co.uk/ssgroundworks.co.uk_Part%20III/javascript/scriptaculous.js?load=effects

or try another lightbox script.

Looking at the lightbox.js that I normally use, it is different to yours and doesn't require the builder.js to work.

What version of lightbox are you using?

I've uploaded the version of lightbox that I use.

Try replacing yours with this and see if it works.

 

  • Author

Alright Elan ;)

 

Swapped my existing lightbox file with yours and nothing as yet :(

 

It must be something to do with the thumbnail as it isnt displayed yet the a link works.

 

Cant crack it!

I haven't gone through the whole thread. But i did notice that the file extensions of the image files on your server are in upper case whereas in your html you're linking to files in lower case. Basically the images in your 'images/pdr' folder end with '.JPG' but in your html you're put '.jpg'. I suggest changing the extensions of the files to lower case.

Well at least your javascript isn't showing any errors now :)

All I can think of now, apart from following clearcutdesignz suggestion above, is to triple check that all file paths are correct and that all images are on the server.

Perhaps change your url so that it doesn't have a space in it.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.