New Module: Lightbox

[neophyre]

problem solved.

Next thing is, how do I have a black box surrounding my thumbnails?

[Ruud]

problem solved.

Next thing is, how do I have a black box surrounding my thumbnails?

Can you tell us what the problem and the solution was?
Other members in the community might benefit from that.

Borders around images are done using CSS.
Use a tool like firebug (Firefox plugin) to find the class/id the images are using and set a css rule for that.
The bookmarks pages will show you some links to good help with CSS

[laola]

Wer kann helfen?

ich hätte gern, dass die Bildershow nicht automatisch startet. also genau andersherum als es jetzt ist.
Hat einer von euch eine Idee oder einen Tipp? wie ich das hinbekomme?

Danke

laola

[erpe]

This is the english part of the forum 

rgds

erpe

[neophyre]

problem solved.

Next thing is, how do I have a black box surrounding my thumbnails?

Can you tell us what the problem and the solution was?
Other members in the community might benefit from that.

Borders around images are done using CSS.
Use a tool like firebug (Firefox plugin) to find the class/id the images are using and set a css rule for that.
The bookmarks pages will show you some links to good help with CSS

The problem was I was unable to upload the lightbox module. curiously enough, it all began working once I'd fixed up my templates.
I'll have a go at looking thought the css for the borders around the thumbnails..

[neophyre]

Having issues finding the code for the black boxes behind the thumbnails... anyone reckon they could offer me a hand?

Tried with firebug, but got myself a bit lost!

[Ruud]

Having issues finding the code for the black boxes behind the thumbnails... anyone reckon they could offer me a hand?

Can we have a look?

[mikejd]

I have installed this module and have it working except for the language. On the pop-up display all the labels are in German. It looks like these can be changed in lightbox.js where lines 96 to 104 are as follows :

Code:

           strings : { // allows for localization
                closeLink : 'Exit',
                loadingMsg : 'lade Bilder',
                nextLink : 'weiter »',
                prevLink : '« zurück',
                startSlideshow : 'Start Bildershow',
                stopSlideshow : 'Stop Bildershow',
                numDisplayPrefix : 'Bild',
                numDisplaySeparator : 'von'

However, I don't speak German. So, although I could make a guess, can anyone provide a translation and confirm that this is the correct place to modify.

Thanks.
Mike

[doc]

Hi,

simply translate the variables and you are done
Don´t know if this is the right place for translation, but the stuff could be translated as follows:

Code:

strings : { // allows for localization
                closeLink : 'Exit (or close)',
                loadingMsg : 'load(ing) images',
                nextLink : 'next »',
                prevLink : '« previous',
                startSlideshow : 'start slide show',
                stopSlideshow : 'stop slide show',
                numDisplayPrefix : 'image',
                numDisplaySeparator : 'from'

Doc

[mikejd]

Thanks for the translation, doc.

Is it possible to open the lightbox with the slideshow stopped?

Mike

[neophyre]

Having issues finding the code for the black boxes behind the thumbnails... anyone reckon they could offer me a hand?

Can we have a look?

http://www.expozay.net/tanika/tanika.php?expozay=0&cat=37
http://karinautique.com/Lingerie.html

The links above are the sort of effect i'm after, more so like the black borders around the thumbnails on tanika's website.

[neophyre]

anyone?

[neophyre]

Solved:

.lb_image{
background: #333333;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
margin: auto;
display:block;
}

[mikejd]

Solved:

.lb_image{
background: #333333;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
margin: auto;
display:block;
}

More elegant would be:

.lb_image{
background: #333333;
padding: 20px 10px;
margin: auto;
display:block;
}

Mike

[neophyre]

One issue tho - This does not appear in IE at all!

[mikejd]

Do you have a link to the site? As this appears to be a css issue, not a WB problem, it's not really relevant to this forum but without a link to view the page it's difficult to resolve.

Mike

[neophyre]

www.tammyann.com.au/pages/gallery.php

[sparkdigital]

Any ideas anyone on how to style the background color on hover over? I tried

Code:

.lb_image {
background-color: #a29a82;
margin: 5px 10px 5px 0px;
text-decoration: none;
border: none;
padding: 5px;
display:block;
}

.lb_image a{
text-decoration: none;
}

.lb_image a:hover, .lb_image a:active, .lb_image a:visited {
background-color: #a2a93f;
text-decoration: none;
}

but the a:hover doesn't seem to be doing anything. Mind you, I have been staring way too many hours at my screen today so maybe it's just that... 

Here's my link:

http://preview1.namesco.net/~linthwaitehouse.co.uk/cms/weddings-events/gallery.php

Thanks,

Konrad

[cthamer]

Any ideas anyone on how to style the background color on hover over? I tried

Code:

.lb_image {
background-color: #a29a82;
margin: 5px 10px 5px 0px;
text-decoration: none;
border: none;
padding: 5px;
display:block;
}

.lb_image a{
text-decoration: none;
}

.lb_image a:hover, .lb_image a:active, .lb_image a:visited {
background-color: #a2a93f;
text-decoration: none;
}

but the a:hover doesn't seem to be doing anything. Mind you, I have been staring way too many hours at my screen today so maybe it's just that... 

Here's my link:

http://preview1.namesco.net/~linthwaitehouse.co.uk/cms/weddings-events/gallery.php

Thanks,

Konrad

Konrad, your problem is that there is no element matching ".lb_image a:hover". If you look at your code you will see there is no child 'a' of lb_image. You could try '.lb_image:hover'.

Also your link didn't work. I guessed and tried http://linthwaitehouse.co.uk/cms/weddings-events/gallery.php which did work.

[sparkdigital]

Great thanks, it now works:

http://linthwaitehouse.co.uk/cms/weddings-events/gallery.php

Konrad

[cthamer]

Great thanks, it now works:

http://linthwaitehouse.co.uk/cms/weddings-events/gallery.php

Konrad

Glad I could help. I noticed that the loading, previous, next and close images are missing. You need to update the image paths. For example you currently have background:url("/modules/lightbox2/images/loading.gif") center center no-repeat;

[sparkdigital]

Thanks, I've noticed this too but it's purely because of the preview server -I've now update the config file to the correct url and the buttons are there.

Thanks again,

Konrad

[alex21]

how to add lightbox to picture,
without make new lightbox section?

[mr-fan]

for open a simple picture in a lightbox in a WYSIWIG content or other mods you could use the new mod jQueryAdmin with a lightbox script there are several ones to choose:

http://www.websitebakers.com/pages/libs/jqueryadmin.php

http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php

regards martin

[sparkdigital]

how to add lightbox to picture,
without make new lightbox section?

Or you can look at the source code produced for a whole lightbox section and use this as an example: just take out the url and code that you need and use that to place around your image.

Konrad