calguy lightbox module

[buntrosgali]

hey guys i have used calguys lightbox module and it works great, but is there any way you can link 4 images together on one page so the user can simply click the next and previous button on the image instead of having to close lightbox and open new one?


here is my site, you can see the 4 images i have. my site

i have each image in a different content block.

[Peciura]

You missed one parameter on "LightBox" help page.

(optional) name="" - Specify a name for the rel link. This can be used to group images together and to allow paging back and forth between them

[buntrosgali]

thanks man im trying to work out how this works though.

I have 4 seperate divs and each div has a seperate content block which has the thumbnail and the attached lightbox largin image.

my code on each div looks like this

how do i use this extra paramater?

[Peciura]

It could be

Code: Select all

{LightBox name='some_name'}

If you are writing html yourself do it like this:

[buntrosgali]

cool thats working but.. there are no image to make it clear how to look for next image, ie. next , previous

heres the site here

click on the firstthumbnail and you will see what i mean.

my site

[Peciura]

Edit "/modules/LightBox/css/lightbox.css" as follows:

#prevLink:hover, #prevLink:visited:hover {
background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat;
}

If you want there are other images you can use them or upload your own:
"/modules/LightBox/images/next.gif"
"/modules/LightBox/images/prev.gif"

[buntrosgali]

these are actually allready set in the stylesheet and is linking to the proper image source. But its not showing ??

#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; background-color:#000; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }

could it possible be hidden with opacity or something?

[Peciura]

You are missing leading "/" in background url

[buntrosgali]

I do have it now but it is still not showing

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/modules/LightBox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}

#prevLink { left: 0; float: left;}


#nextLink { right: 0; float: right;}


#prevLink:hover, #prevLink:visited:hover {
background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat;
}


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

[owr_bgld]

Maybe you did it in an wrong file - that shows your css file which is called:

Code: Select all

#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }

[buntrosgali]

no i have made those changes in LightBox Sample CSS stylesheet

[owr_bgld]

yes, you changed it, but the changes were not saved jet. That can happen (for example) if you uploaded the module via ftp and the owner via ftp is not the same as the owner made via cms. (There are several entrys in the forum) - I had this problem with one of my sites.

Code: Select all

<link rel="stylesheet" href="http://your.domain-is.here/modules/LightBox/css/lightbox.css" type="text/css" media="screen" />

so there are two possibilitys
a) new upload the module (after deinstalling it and deleting all files of the module) via the xml-file
or
b) download the css-file (/modules/LightBox/css/lightbox.css), edit it with text-editor and upload the changed file again.

[Peciura]

I opened your site with Firebug and could not see any changes you had done to css. (may be owr_bgld  is right about file permissions).

in case you do not know what Firebug here are some links you want to visit
http://forum.cmsmadesimple.org/index.ph ... #msg162522
http://www.klauskomenda.com/archives/20 ... r-browser/
With FireBug you can edit CSS on the fly to see it you changes would have desired effect.

[buntrosgali]

YEAAAAAAAA THANKS Guys i downloaded the css file via ftp and put the / into it and it is now working!!! thanks guys!!!